search

devSoyoung / STUDY

✏️ 공부한 내용 정리, 주제에 따라 분류
4 stars 1 forks source link

[ES6] 구조 분해 할당 : 배열, 객체 분해 #22

Open devSoyoung opened 5 years ago

devSoyoung commented 5 years ago

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 문법

Example

Array

const arr = [1, 2, 3];
const [first, second, third] = arr;
console.log(first);          // 1

값을 넣을 변수를 좌변에 다음과 같이 넣어주면 각 변수의 값이 우변 요소의 값에 따라 초기화 됨

const [ a = 1, b = 2, c = 3 ] = [ 5, 6 ];
console.log(a);          // 5
console.log(b);          // 6
console.log(c);          // 3

초기값을 지정해줄 수 있으며, 좌변 우변의 배열 길이가 꼭 일치하지 않아도 됨 (남는 값은 버려지고, 모자란 값은 undefined로 채워짐)

Swapping

두 변수의 값 교환을 배열 구조분해 할당을 활용하면 temp 없이 간단하게 할 수 있음

let a = 1;
let b = 2;
[a, b] = [b, a];

Object

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

const { apple, banana, candy } = obj;
console.log(apple);          // undefined

객체의 경우에는 우변의 객체 속성 값과 변수의 이름이 일치해야 함. 순서를 바꿔도 이름에 맞게 값이 들어감.

Reference