Destructuring -ECMAScript

Destructuring배열의 값 또는 객체의 속성을 별개의 변수로 압축 해제할 수있는 JavaScript 표현식입니다.

형태
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

변수에 배열의 엘리먼트를 할당한다는 표현보다 배열의 엘리먼트를 변수에 할당한다는 표현이 더 정확합니다.
배열의 엘리먼트 값을 변수에 할당하기 위해서는
먼저, 배열의 엘리먼트를 분할하고 분할된 엘리먼트 값이 변수에 할당되기 때문입니다.

자세히 보기

전개(Spread) 연산자 -ECMAScript


개요

전개(Spread) 연산자는 이터러블 오브젝트의 엘리먼트를 하나씩 분리하여 전개합니다. (복사)

객체(혹은 배열)를 가리키는 것이 아닌 내부의 값을 복사하여 새로운 객체(혹은 배열)를 만들어 내기 때문에
불변성을 지켜줘야하는 곳에 자주 사용됩니다.

전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있습니다.

  • 기본형

[…iterableObject]

  • function에서

function(…iterableObject);

  • array에서

[…iterableObj, ‘4’, ‘five’, 6];

  • object 에서

let objClone = { …obj };
//ECMAScript 2018에서 추가되었습니다.

spread 연산자는 “...”을 작성하고 뒤에 이터러블 오브젝트를 작성합니다.

자세히 보기