구조 분해 할당
객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료구조이다.
키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다.
→ 개발을 하다보면 함수에 객체나 배열을 전달해야 하는 경우도 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우
→ 이럴 때 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법인 구조분해할당을 사용할 수 있다
ex)
const obj = {
a: 'hello',
b: {
c: 'hi',
d: { e: 'wow'},
},
};
JavaScript
복사
→ 구조 분해 할당 →
const { a, b: { c, d: { e } } } = obj;
const a = obj.a;
const c = obj.b.c;
const e = obj.b.d.e;
// 말단에 있는 애들만 변수 가능
JavaScript
복사
배열 분해하기
let arr = ["ash", "island"]
let [firstName, surname] = arr;
// 구조분해할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당
alert(firstName); // ash
alert(surname); // island
JavaScript
복사
→ 이제 변수로 이름과 성을 사용할 수 있게 되었다
split 같은 반환값이 배열인 메소드를 함께 활용해도 좋다
let [firstName, surname] = "ash island".split(' ');
JavaScript
복사
구조가 파괴를 의미하진 않는다
쉼표를 사용하여 요소 무시하기
쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있다
// 두번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert( title ); // Consul
JavaScript
복사
→ 두번째, 네번째 요소는 생략되었지만, 세번째 요소는 title이라는 변수에 할당되었다
할당 연산자 우측엔 모든 이터러블이 올 수 있다
배열 뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있다
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
JavaScript
복사
할당 연산자 좌측엔 뭐든지 올 수 있다
객체 프로퍼티도 가능
let user = {};
[user.name, user.surname] = "Ash Island".split(' ');
alert(user.name); // Ash
JavaScript
복사
