구조 분해 할당

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 구조다.
함수에 객체나 배열을 전달해야하는 경우가 생기기도하고 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.
이럴 때 객체나 배열을 변수로 분해할 수 있게 해주는 구조 분해 할당을 사용할 수 있다.
이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우에서 구조 분해를 사용하면 효과적이다.

배열 분해하기

let arr = ["1", "2", "3"]
//구조 분해 할당을 이용해
//one에는 arr[0]을 
//two에는 arr[1]을
//three에는 arr[2]을 할당하였다.
let [one, two, three] = arr;

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

아래 예시처럼 split 같은 반환 값이 배열인 메서드를 활용

let [one, two, three] = "1 2 3".split(' ')

변수 교환

let a = 10;
let b = 20;

let tmp = 0;

tmp = a;
a = b;
b = tmp;

console.log(a, b);

두 변수에 저장된 값을 교환할 때 구조 분해 할당을 사용할 수 있다.

let a = 10;
let b = 20;

//변수 a에는 20, 변수 b에는 10이 저장되도록 값을 교환
[a, b] = [b, a];

console.log(a, b);//20 10(값 교환 성공)

'...'로 나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들을 모아서 저장할때 ...을 붙은 매개변수 하나를 추가하면 나머지 요소를 가져올 수 있다.

let [one, two, ...rest] = ["1", "2", "3", "4", "5"]

console.log(one);
console.log(two);

console.log(rest[0]); // 3
console.log(rest[1]); // 4
console.log(rest[2]); // 5

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

let [four, five, six, seven = "7"] = ["4", "5", "6"];
console.log(four, five, six, seven); // 4 5 6 7

객체 비구조화 할당

Before

let object = { one: "1", two: "2", three: "3", name: "0TAE" };

let one = object.one;
let two = object.two;
let three = object.three;

console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
console.log(name); // 0TAE

After

let object = { one: "1", two: "2", three: "3", name: "0TAE" };
//객체의 비구조화 할당은 배열의 index를 이용하는 것이 아니고 순서가 아니라 key값을 기준으로 할당한다.
let { one, two, three, name } = object;

console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
console.log(name); // 0TAE

객체의 프로퍼티의 키값을 통해 접근을 해야되기 때문에 변수명이 키값으로 강제되는 경향이 있다. 하지만 아래와 같은 방법으로 변수명을 바꿀 수 있다.

let object = { one: "1", two: "2", three: "3", name: "0TAE" };

let { one : oneOne, two, three, name : myName, four = "4" } = object;

console.log(oneOne); // 1
console.log(two); // 2
console.log(three); // 3
console.log(myName); // 0TAE
console.log(four); // 4