구조분해할당

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다.

키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다.

개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.

이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘한다.

배열 분해하기

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

이제 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 됐다.

아래 예시처럼 split 같은 반환 값이 배열인 메서드를 함께 활용해도 좋다.
(배열값이 리턴되므로 그것을 바로 구조분해 할당한 것!)

let [firstName, surname] = "Bora Lee".split(' ');

'분해(destructuring)'는 '파괴(destructive)'를 의미하지 않는다.

구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여진 것. 이 과정에서 분해 대상은 수정 또는 파괴되지 않는다.
(즉, 원본이 훼손되지 않는다는 것)

배열의 요소를 직접 변수에 할당하는 것보다 코드 양이 줄어든다는 점만 다르다.

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

쉼표를 사용하여 요소 무시하기

쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있다.
이것을 잘 활용하면 원하는 요소만 배열에서 구조분해할당 해올 수 있다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

할당 연산자 우측엔 모든 이터러블이 올 수 있다

배열뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있다. (array, object, string등은 구조분해할당 할 수 있다)

let [a, b, c] = "abc"; // ["a", "b", "c"] 문자열도 가능!!
let [one, two, three] = new Set([1, 2, 3]);

할당 연산자 좌측엔 뭐든지 올 수 있다

할당 연산자 좌측엔 ‘할당할 수 있는(assignables)’ 것이라면 어떤 것이든 올 수 있다.
아래와 같이 객체 프로퍼티도 가능하다.
객체등을 만들 때 매우 유용하게 쓸 수 있을 것!

let user = {};
[user.name, user.surname] = "Bora Lee".split(" ");

console.log(user.name); // Bora
console.log(user); // { name: 'Bora', surname: 'Lee' }

변수 교환 트릭

두 변수에 저장된 값을 교환할 때 구조 분해 할당을 사용할 수 있다.
임시변수를 사용하지 않고 바로 이렇게 구조분해 할당으로 편하게 할 수 있다!!

let guest = "Jane";
let admin = "Pete";

// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane(값 교환이 성공적으로 이뤄졌다.)

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

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있다. 이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 배열이다.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

rest는 나머지 배열 요소들이 저장된 새로운 배열이 된다. rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 세 개(...)와 변수가 가장 마지막에 위치해야 한다는 점은 지켜야 한다.

기본값

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다. 할당할 값이 없으면 undefined로 취급되기 때문.

let [firstName, surname] = [];

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

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

// 기본값
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

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

복잡한 표현식이나 함수 호출도 기본값이 될 수 있다. 이렇게 기본식으로 표현식이나 함수를 설정하면 할당할 값이 없을 때 표현식이 평가되거나 함수가 호출된다.

값이 제공되지 않았을 때만 함수가 호출되므로, prompt는 한 번만 호출된다.

// name의 prompt만 실행됨
let [surname = prompt('성을 입력하세요.'), name = prompt('이름을 입력하세요.')] = ["김"];

alert(surname); // 김 (배열에서 받아온 값)
alert(name);    // prompt에서 받아온 값