[JavaScript] 스프레드와 디스트럭쳐링

1. 스프레드

자바스크립트에서 스프레드란 일종의 객체 복사입니다.

const class1 = {
  x: 1, y: 'A', z: true
};

const class2 = { ...class1 };

console.log(class2); //{x: 1, y: 'A', z: true}

위 코드를 보면 class1의 프로퍼티를 class2가 그대로 가져오는 것을 볼 수 있습니다.

이러한 이유로 스프레드는 특정 프로퍼티나 많은 포로퍼티를 동일하게 사용하는 다른 객체를 생성하는데 사용됩니다.

 

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
}
console.log(class3); //{a: 1, b: 'A', c: true, z: 0}

console.log(class4); //{d: {…}, e: Array(3), a: 1, b: 'A', c: true, …}

그리고 스프레드는 여러 객체를 복사할 수 있습니다. 단 동일한 프로퍼티가 있다면 뒤의 프로퍼티가 덮어쓰는 형식으로 작용합니다.

const class1 = {
  ...{ a: 1, b: 2 },
  ...{ b: 3, c: 4, d: 5 },
  ...{ c: 6, d: 7, e: 8 }
}
//b,c,d는 뒤의 프로퍼티값으로 덮어쓰기가 됨
console.log(class1); //{a: 1, b: 3, c: 6, d: 7, e: 8}

 

스프레드에서도 프로퍼티가 원시값이라면 복사하기 때문에 기존의 객체에는 영향이 없지만 프로퍼티가 객체나 리스트같은 참조값이라면 기존의 객체값도 변경됩니다.

 

const class1 = {
  x: 1,
  y: { a: 2 },
  z: [3, 4]
};

const class2 = { ...class1 };
class1.x++; //class1의 x값만 증가
class1.y.a++; //class1의 객체 y의 a를 증가
class1.z[0]++; //class1의 리스트 첫번째 값을 1증가

//class1의 값만 증가시켰지만 class2의 참조값도 같이 변함
console.log(class1); //{x: 2, y: {a:3}, z: [4,4]}
console.log(class2); //{x: 1, y: {a:3}, z: [4,4]}

2. 디스트럭쳐링

자바스크립트에서 디스트럭쳐링이란 배열 또는 객체를 파괴하여 변수에 할당하는 것을 의미합니다.

예켠대 자바스크립트의 객체를 만들어서 프로퍼티를 가져오고자하면 기존에는 아래처럼 작성합니다.

const obj1 = {
  x: 1, y: 2, z: 3
};

const x = obj1.x;
const y = obj1.y;
const z = obj1.z;

console.log(x, y, z); // 1 2 3

그런데 디스트럭쳐링을 활용하면 아래처럼 작성할 수 있습니다.

const obj1 = {
  x: 1, y: 2, z: 3
};

const {x, y, z} = obj1;

console.log(x, y, z);// 1 2 3

 

즉 객체의 key값을 변수로 만들어서 객체의 프로퍼티값을 한번에 담을 수 있게 하는 기능입니다.

당연히 프로퍼티의 일부만 가져오는 것도 가능합니다.

const obj1 = {
  x: 1, y: 2, z: 3
};

const {x, z} = obj1;

console.log(x, z); // 1 3

 

리스트를 디스트럭처링한다면 아래처럼 사용할 수 있습니다.

let arr1 = [1,2,3];

const [a,b,c] = arr1;

console.log(a,b,c); // 1 2 3

 

다만 리스트는 객체와 다르게 순서대로 들어갑니다.

따라서 변수를 두개만 선언한다면 첫번째 두번째값까지만 들어갑니다.

let arr1 = [1,2,3];
const [a,c] = arr1;
console.log(a,c); // 1 2