실제 코딩을 할 때 매우 편할 것 같은 객체 디스트럭처링과 배열 디스트럭처링, 그리고 ES6에서의 변수 교환(swap)에 대해 알아보겠다.

객체 디스트럭처링

다음과 같은 객체가 있다고 가정하자.

let person = {
	first: "Cheryl",
    last: "Yun",
};

ES5

ES5까지는 다음과 같이 객체에서 변수를 생성했다.

let first = person.first;
let last = person.last;

딱 봐도 객체의 속성(키) 이름과 변수명이 겹침을 알 수 있다.
그럴 수 밖에 없는 것이.. 변수명은 우항에 있는 값을 잘 설명하는 단어가 되어야 하기 때문이다.

ES6

ES6에서는 이러한 중복 문제를 깔끔하게 해결해냈다.

const { first, last } = person;

first와 last를 각각 따로 한 것도 아니고, 한 번에 합칠 수 있고
너무나 편리하게 속성에 접근함과 동시에 속성을 그대로 변수명으로 사용할 수 있다. (변수명 짓기 고통에서 해방..!)

중첩된 객체의 디스트럭처링

다음처럼 중첩된 객체 형태가 주어져도 동일한 방법이 가능하다.
(단, 맨 뒤에 하나밖에 못 빼는 것 같다)

const person = {
	name: 'Cheryl',
    last: 'Yun',
    links: {
    	coding: {
        	github: "https://github.com/Yena-Yun",
        },
    },
};

const { github } = person.links.coding;

빼낸 속성에 다른 이름 지정하기

이번에는 속성을 빼내서 그대로 변수명으로 지정하는 대신, 임의로 다른 변수명을 사용해보았다.

const { github: meow } = person.links.coding;

console.log(meow); // https://github.com/Yena-Yun
console.log(github); // ReferenceError: github is not defined

이러면 github은 더 이상 변수명으로서의 기능은 할 수 없게 되고,
대신 새로 지정한 meow가 변수명이 된다.
('github'로 변수를 참조하려 하면 에러가 나는 걸 볼 수 있다)

새로 지정한 변수에 기본값 전달하기

새로 지정한 변수명 옆에 '='를 사용하여 변수의 초기값을 지정할 수도 있다.

const { github: meow = https://github.com/Yena-Yun } = person.links.coding;

배열 디스트럭처링

배열을 디스트럭처링할 때는 객체의 속성처럼 변수명으로 사용할 요소가 없기 때문에 따로 변수명을 지정해줘야 한다.

const person = ["Cheryl", "Yun", "female"];

const [name, last, gender] = person;

변수를 실제 배열의 요소 갯수보다 적게 사용하기

간단하다. 그냥 해당 요소에 대한 변수를 만들지 않으면 된다.
하지만 앞에서부터 변수가 매칭되는 것 같으니 유의하자.

const person = ["Cheryl", "Yun", "female"];

const [name, last] = person; // 3번째 항은 안 쓴다면 그냥 빼 버리면 된다.

특정 요소만 변수로 잡고 나머지는 한번에 얻고 싶다면?

Rest 연산자('...')를 사용한다.
spread 연산자와 비슷하게 생겼지만 용도가 다르다. - spread는 '펼친다'는 뜻(배열이나 객체를 '펼침')이고 rest는 '나머지'라는 뜻

const person = ["Cheryl", "Yun", "susi", "cake", "barbecue", "chocolate"];

const [name, last, ...favorites] = person;

console.log(favorites); // ["susi", "cake", "barbecue", "chocolate"]

변수 교체

원래 처음에 자바스크립트 알고리즘을 풀 때는 버블 정렬을 구현하기 위해 값을 교체하는 과정에서 tmp 라는 임시 변수를 썼었다. (교체하는 변수 둘 + tmp 까지 총 세 개를 가지고 값을 옮겨담으며 서로 교환)

그런데 ES6에서는 이런 복잡한 방법을 거치지 않고 대괄호([ ])를 사용하여 바로 직관적으로 두 변수의 값을 교체할 수 있다.

let sober = "yes";
let drunk = "no";

// 술을 마시고 나면..

let [sober, drunk] = [drunk, sober];

console.log(sober, drunk); // no yes