Book/혼자 공부하는 자바스크립트
06-3. 객체와 배열 고급
키모87
2022. 2. 8. 17:48
배열 기반의 다중할당
한번에 여러개의 변수에 값을 할당하는 다중할당 기능이 추가되었습니다.
//다중할당
[식별자,식별자,식별자,...] = 배열
//ex)
let [a,b] =[1,2]
객체 기반의 다중할당
객체 내부에 있는 속성을 꺼내서 변수로 할당할때 다음과 같은 코드를 사용할 수 있습니다.
{속성이름,속성이름,속성이름} = 객체
{식별자 = 속성이름 , 식별자 = 속성이름} =객체
const object ={
name :'혼자 공부하는 파이썬',
price : 18000,
publisher :'한빛미디어'
}
const{name,price} = object
console.log('# 속성 이름 그대로 꺼내서 출력하기')
console.log(name,price)
console.log('')
const {a = name , b= price} =object
console.log('# 다른 이름으로 속성 꺼내서 출력하기')
console.log(a,b)
/* 결과값
# 속성 이름 그대로 꺼내서 출력하기
혼자 공부하는 파이썬 18000
# 다른 이름으로 속성 꺼내서 출력하기
혼자 공부하는 파이썬 18000
*/
객체 기반의 다중할당
객체 내부에 있는 속성을 꺼내서 변수로 할당ㅎ라때 아래와 같이 사용하실 수 있습니다.
{속성 이름, 속성 이름} = 객체
{식별자 = 속성 이름 , 식별자 = 속성 이름} = 객체
<script>
const object ={
name :'혼자 공부하는 파이썬',
price : 18000,
publisher :'한빛미디어'
}
const{name,price} = object
console.log('# 속성 이름 그대로 꺼내서 출력하기')
console.log(name,price)
console.log('')
const {a = name , b= price} =object
console.log('# 다른 이름으로 속성 꺼내서 출력하기')
console.log(a,b)
</script>
배열 전개 연산자
배열과 객체는 할당할 때 얕은 복사라는 것이 이루어집니다. 얕은 복사는 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말하며 복사 된 값이 변경 되면 원래 값도 변경됩니다. 얕은 복사의 반대 말은 깊은 복사 입니다. 깊은 복사는 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말하며 전개 연사자를 통해 복사를 할 수 있습니다.
[...배열]
const 물건_200301 = ['우유' ,'식빵']
const 물건_200302 = [...물건_200301]
물건_200302.push('고구마')
물건_200302.push('토마토')
console.log(물건_200301)
//우유, 식빵
console.log(물건_200302)
//우유, 식빵 , 고구마, 토마토
전개연산자로 배열 전개하고 자료추가하기
const 물건_200301 = ['우유','식빵']
const 물건_200302 = ['고구마',...물건_200301,'토마토']
console.log(물건_200301)
//['우유', '식빵']
console.log(물건_200302)
//['고구마', '우유', '식빵', '토마토']
객체 전개 연산자
<script>
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = {...구름}
별.이름 = '별'
별.나이 = 1
console.log(JSON.stringify(구름))
console.log(JSON.stringify(별))
</script>
/*
결과값
{"이름":"구름","나이":6,"종족":"강아지"}
{"이름":"별","나이":1,"종족":"강아지"}
*/
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = {
...구름,
이름 : '별',
나이 : 1,
예방접조 : true
}
console.log(JSON.stringify(구름))
console.log(JSON.stringify(별))
/*
결과값
{"이름":"구름","나이":6,"종족":"강아지"}
{"이름":"별","나이":1,"종족":"강아지","예방접조":true}
*/
참고로 객체는 전개 순서가 중요합니다. 전개라는 이름 처럼 전개한 부분에 객체가 펼쳐집니다.
<script>
const 구름 = {
이름 : '구름',
나이 : 6,
종족 : '강아지'
}
const 별 = {
이름 : '별',
나이 : 1,
예방접종 : true,
...구름
}
console.log(JSON.stringify(구름))
console.log(JSON.stringify(별))
</script>
/*
결과값 :
{"이름":"구름","나이":6,"종족":"강아지"}
{"이름":"구름","나이":6,"예방접종":true,"종족":"강아지"}
*/