점 3개가 연달아 붙어 있는 이 표시를 스프레드 오퍼레이터라고 한다. 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리하여 사용할 수 있다.

스프레드 연산자는 객체의 연결, 복사 등의 용도로 활용한다.

디스트럭쳐링은 구조화된 배열 또는 객체를 비구조화하여 개별적인 변수에 할당한다. 배열 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당하거나 반환할 때 유용하게 사용한다.

객체에서의 활용

객체의 스프레드

• 기본 문법

  const class1 = {
  	x: 1, y: 'A', z: true
  };
  
  const class2 = { ...class1};
  // 아래의 참조복사 코드와 다르다.
  // const class2 = class1;
  

  특정 객체의 프로퍼티를 포함하는 다른 객체 생성에 유용하게 사용한다.

  const class1 = {
  	a: 1, b: 'A', c: true
  };
  const class2 = {
  	d: {x: 10, y: 100},
  	e: [1, 2, 3]
  };
  const class3 = {
  	...class1, 
  	z: 0
  };
  const class4 = {
  	...class2,
  	...class3,
  	...class2.d
  };
  

  중복되는 프로퍼티는 뒤의 것을 덮어 쓴다.

• 복사의 깊이

  const class1 = {
  	x: 1,
  	y: { a: 2},
  	z: [3, 4]
  };
  
  const class2 = { ...class1};
  class1.x++;
  class1.y.a++;
  class1.z[0]++;
  
  console.log(class1); // x: 2, y: {a:3}, z: [4, 4]
  console.log(class2); // x: 1, y: {a:3}, z: [4, 4]
  

  해당 객체 바로 안쪽의 원시값은 복제하지만 참조값은 같은 값을 가리킨다.

  원시값만 있는 객체는 값에 의한 복사를 한다. - 얕은 복사

객체의 디스트럭쳐링

• 기본 문법

  // 기존 코드
  const obj1 = {
  	x: 1,
  	y: 2, 
  	z: 3
  };
  
  const x = obj.x;
  const y = obj.y;
  const z = obj.z;
  
  // 디스터럭쳐링으로 간략화하기
  const {x, y, z} = obj1;
  const {x, z} = obj2; // 일부만 가져올 수도 있다
  
  

• 활용 예시

  // 필요한 프로퍼티 값을 짧은 코드로 변수/상수에 담기
  
  const array1 = [1, 2, 3, 4, 5];
  
  const { length } = array1; // const length = array1.length;
  
  // 함수 인자값의 가독성을 위해 객체를 사용할 때
  function introduce({age, married, job, name}) {
    // 순서 무관
    // 이 프로퍼티들을 갖는 객체를 인자로 받겠다는 의도 드러냄
  
    console.log(`제 이름은 ${name}, `
      + `나이는 ${age}세구요. `
      + `직업은 ${job}, `
      + `${married ? '기혼' : '미혼'}입니다.`
    )
  }
  
  const person1 = {
    job: '개발자',
    age: 28,
    married: false,
    name: '김철수',
    blood: 'O'
  };
  
  introduce(person1);
  

배열에서의 활용

배열의 스프레드

• 기본 문법

  const arr1 = [1, 2, 3];
  const arr2 = [...arr1];
  

• 활용 예시

  //// 배열을 다수의 인자로 펼칠 수 있음
  const arr1 = [1, 2, 3, 4, 5];
  console.log( ...arr1); // 1, 2, 3, 4, 5
  console.log(arr1); // [1, 2, 3, 4, 5]
  console.log(
  	Math.max( ...arr1);
  	Math.min( ...arr1)
  ); // 그냥 배열인 상태에서는 사용 불가능함. 
  
  const arr = [1, 2, 3, 4, 5, 6, 7];
  const toAdd = ['둘', '셋', '넷'];
  arr.splice(1, 3, ...toAdd); // splice는 원본 배열을 바꿈
  console.log(arr); // [1, '둘', '셋, '넷', 5, 6, 7]
  
  // concat 보다 가독성있게 배열을 결합할 수 있다.
  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  
  const arr3 = arr1.concat(arr2);
  const arr4 = [...arr1, ...arr2];
  
  console.log(arr3, arr4);
  
  // 배열의 얕은 복사
  const arr1 = [1, 2, 3];
  const arr2 = [...arr1];
  console.log( arr1 === arr2); // false
  arr1[0] = 0;
  console.log( arr1, arr2 ); // [0, 2, 3] [1, 2, 3]
  
  // 깊은 복사는 되지 않음!
  const arr1 = [{ x: 1 }, { x: 2}];
  const arr2 = [...arr1];
  arr1[0].x = 0;
  
  console.log(arr1, arr2); // 둘 다 { x: 0 }, { y: 2 } 
  
  // 원본 배열을 유지한 채 일정 부분만 연결하여 복사
  const orgArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  const arr1 = [
  	...orgArr.slice(0, 3),
  	...orgArr.slice(6, 9)
  ];
  console.log(arr1); // [1, 2, 3, 7, 8, 9]
  

배열의 디스트럭쳐링

• 기본 문법

  const arr = [1, 2, 3];
  const [x, y, z] = arr;
  
  // 일부만 가져올 수도 있다
  const [x, y] = arr;
  

  기본값을 설정하여 디스트럭쳐링할 수 있다.

  const arr = [1, 2, 3];
  const [a, b, c, d=4, e=5] = arr;