본문 바로가기

JavaScript

구조분해할당

개념 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.

// 배열과 객체 선언에서 분리한 할당 및 변수에 나머지 할당
var a, b, rest;

[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

({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}

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

// 변수값 교환
var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

// 함수 반환값 분석 및 일부 반환 값 무시
function f() {
  return [1, 2, 3];
}

var [a, , b] = f();   // [,,] = f(); 반환값 모두 무시
console.log(a); // 1
console.log(b); // 3

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

'JavaScript' 카테고리의 다른 글

CallBack Function  (0) 2019.08.22
arrow function  (0) 2019.08.19
setTimeout(), Promise, async/await 비교  (0) 2019.07.29
클로저  (0) 2019.07.24
JSON  (0) 2019.07.23