06-3. 객체와 배열 고급

배열 기반의 다중할당

한번에 여러개의 변수에 값을 할당하는 다중할당 기능이 추가되었습니다.

//다중할당
[식별자,식별자,식별자,...] = 배열

//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,"종족":"강아지"}
*/