Destructuring (구조분해 할당)

객체나 배열을 변수로 분해할 수 있도록 하는 문법

🎆Object Destructuring (객체 분해)

기본 문법

let {var1, var2} = {var1:…, var2:…}
할당 연산자 기준
좌측 : 상응하는 객체 프로퍼티의 패턴
우측 : 분해하고자 하는 객체

const address = {
  city: 'new york',
  state: 'NY',
  zipcode: '10003'
};

function logAddress ({ city, state }) {
  console.log(city + ', ' + state);
}

logAddress(address);//new york, NY

🎇Array Destructuring

Example #1 - 할당

const numbers = [ 1, 2, 3, 4, 5 ];

const [ one, two, three, four, five ] = numbers;

console.log(one); //1
console.log(two); //2

Example #2 - 쉼표 사용해 요소 무시하기

쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있다.

const numbers = [ 1, 2, 3, 4, 5 ];

const [ one, , , ,five ] = numbers;

console.log(one); //1
console.log(five); //5

Example #3 - 연산

const numbers = [ 1, 2, 3, 4, 5 ];

function sum ([ a, b, c, d, e ]) {
  console.log(a + b + c + d + e);
}

sum(numbers);//15

Example #4 - 기본값

할당하고자 하는 변수의 갯수가 분해하고자 하는 배열의 길이보다 커도 에러가 발생하지 않는다. 할당할 값이 없는 경우 undefined로 취급된다.

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

=을 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값(default value)'을 설정할 수 있다.

let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (배열에서 받아온 값)
alert(surname); // Anonymous (기본값)

Example #5 - ...로 나머지 요소 가져오기

배열 앞의 값 몇 개만 필요할 때, 이후 나머지 값들은 한 데 모아서 저장할 수 있다. 이 때 나머지 요소들은 하나의 새로운 배열로 반환된다. 이 rest변수는 가장 마지막에 위치해야 한다.(이름은 꼭 rest가 아니어도 된다.)

const numbers = [ 1, 2, 3, 4, 5 ];

function sum ([ a, b, ...rest ]) {
  console.log(rest);
}

sum(numbers);//[3, 4, 5]

Reference

https://ko.javascript.info/destructuring-assignment