배열 구조 분해 에서

배열 구조 분해 소개

배열 구조 분해 할당은 배열에서 값을 간결하게 추출하는 방법이에요. 문법은 배열 리터럴 표현식과 비슷한데, 할당의 오른쪽이 아니라 왼쪽에 온다는 점이 달라요.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

재할당

변수는 배열에서 값과 위치로 연결되기 때문에, 구조 분해 문법을 쓰면 하나의 표현식에서 여러 변수에 값을 할당하거나 다시 할당할 수 있어요.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

중첩된 배열에서도 똑같이 동작해요.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

값 건너뛰기

이 문법을 쓰면 값을 건너뛸 수 있어요. 예를 들어 배열의 특정 위치를 무시하고 싶을 때 말이에요. 아래 예제에는 사용자의 이름, 성, 도로명 주소가 담긴 배열을 반환하는 getUserInfo 함수가 있다고 생각해 봐요.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

값 버리기

할당할 때 배열의 모든 값을 사용할 필요는 없어요.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

배열에 있는 값보다 더 많이 가져오기

배열에 들어 있는 값보다 더 많은 값을 추출할 수도 있어요. 남은 변수에는 undefined가 할당돼요. 값의 개수를 미리 알 수 없을 때 유용할 수 있어요.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

기본값

배열 구조 분해 할당은 원본 배열에 값이 없을 경우에 대비해 _기본값_을 지정할 수 있어요.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

관련 개념

object-destructuring rest-and-spread