[JavaScript] 자바스크립트 spread syntax (전개구문)

전개 구문(Spread Syntax)는 ECMAScript에 추가된 문법으로 이름 그대로 객체 혹은 배열을 복사

하고 펼칠수 있다는 것으로 이해하면 될것같다. 

 

1.문법

    const obj1 = {
      name:"gildong",
      age:30,
      hasCar:false
    }

    const obj2 = {...obj1};

객체를 펼치고 복사할거면 (중괄호로 담는다)

  const arr = ['dog','monkey','bird','spider']
  const arr2 = [...arr];

배열을 펼치고 복사할거면(대괄호로 담는다)

 

  const obj1 = {
      name:"gildong",
      age:30,
      hasCar:false
   }

    const obj2 = {...obj1};
    
    console.log(obj1===obj2); // expect false

여기서 주의 할점이있다. 복사 기능이라고 해도 똑같은 모양의 객체나 배열이 되지만 전개구문과 원본을 비교했을시

false가 출력 되면서 각자의 독립적인 객체 및 배열임을 확인 할 수 있다.

 

    const obj1 = {
      name:"gildong",
      age:30,
      hasCar:false
    }

    const obj2 = {
      ...obj1,
      hasHorse:true
    };
    
    console.log(obj2); // {name:"gildong", age:30,hasCar:false , hasHorse:true }

또한 기존 객체에서 전개구문을 활용하게되면 갖고온 객체를 그대로 갖고오면서 추가로 프로퍼티를 쓸수도있다.

 

2.배열

const arr1 = ['apple','banana','watermelon','grapes'];
const arr2 = {...arr1};

console.log(arr2) //expect {0: 'apple', 1: 'banana', 2: 'watermelon', 3: 'grapes'}

지금까지 객체로 예시를 들어보았는데 배열도 똑같이 독립적인 다른 배열이 생성이 되고 , 새로운 배열을 만들 수 있다.

그러나 배열에서는 갖고올 데이터가 배열인데, 객체로 감싸서 전개구문을 하게되면 각 배열의 값은 프로퍼티가 되고

배열의 index가 프로퍼티의 키가 된다.