구조분해 할당/전개(Sepread) 연산자

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.  아직은 구조 분해 할당이라는 말이 쉽게 이해되지 않으실 거예요. 그럼 예시를 한번 들어볼게요.

가령 배열에 1,2의 값이 있고 이 값을 변수 a, b에 각각 넣으려고 한다면 어떻게 하면 될까요?

const array = [1,2];
const one = array[0];
const two = array[1];

console.log(one) //결과:1
console.log(two) //결과:2

위의 코드처럼 각 변수에 인덱스 값으로 접근해서 하나씩 값을 넣으면 변수에 값을 각각 넣을 수 있습니다. 

하지만 위의 예제처럼 값이 2개가 아닌 수백 개, 수천 개의 배열이라면 저런 방식으로는 값을 넣을 수 없어요. 이럴 때 유용하게 사용할 수 있는 게 구조 분해 할당입니다.

const array = [1,2];
const [one,two] = array;

console.log(one) //결과:1
console.log(two) //결과:2

어때요? 아까와 달리 훨씬 간편해졌죠?

그럼 전개 연산자도 무엇인지 한번 알아볼게요.

const object = {a:1, b:2, c:3};
console.log(object) //{a: 1, b: 2, c: 3}

const copyObject = {...object, d:4}
console.log(copyObject) // {a: 1, b: 2, c: 3, d: 4}

전개 연산자는 위의 코드처럼 점 3개로 구현합니다. 전개 연산자를 사용하면 해당 값을 그대로 복사해 줍니다. 이는 불변성을 유지하는 데에도 아주 유용하게 사용됩니다. 

let a, b, rest;
[a, b] = [10, 20];

console.log(a);    // 결과: 10
console.log(b);    // 결과: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // 결과: Array [30,40,50]


let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 결과: 1
console.log(z); // 결과: 2

let [a, ...b] = [1, 2, 3];
console.log(a); // 결과:1
console.log(b); // 결과:[2, 3]

 

구조 분해는 배열뿐만 아니라 객체도 가능합니다.

let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // 42
console.log(q); // true

 

감사합니다.