👯♀️ 구조 분해 할당
Destructing : 파괴, 분해
ES6부터 추가된 기능이다.
배열인 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript이다.
기존의 객체 및 배열 리터럴 표현식을 사용하면 일반적으로 쉽게 데이터 뭉치를 만들 수 있다.
var arr = [1, 2, 3, 4, 5];
구조분해할당을 사용하면 위와 비슷하지만, 할당문의 좌변에서 사용하여 원래 변수에서 어떤 값을 분해해 할당할지 정의할 수 있다.
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
let, a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); / 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30, 40, 50]
👯♀️ 배열의 구조 분해 할당
기본 변수 할당
var for = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
선언에서 분리한 할당
변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있다.
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
기본 값
변수에 기본 값을 할당하면, 분해한 값이 undefined
일 때 그 값을 대신 사용한다.
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
위 예제에선 a가 1이라고 할당해 선언해 줬지만 b는 할당받지 못했다.
이럴 경우 a=5
, b=7
이라는 기본 값 할당에 의해 b는 7을 대신 사용하게된다.
변수 값 교환하기
하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있다.
구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요하다.
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
함수가 반환한 배열 분석
함수는 이전부터 배열을 반환할 수 있었다.
구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있다.
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
위 예제에선 f()
는 출력으로 배열 [1, 2]를 반환하는데, 하나의 구조 분해만으로 값을 분석할 수 있다.
일부 반환 값 무시하기
다음과 같이 필요하지 않은 반환값을 무시할 수 있다.
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
반환 값을 모두 무시할 수도 있다.
[,,] = f();
변수에 배열의 나머지를 할당하기
배열을 구조 분해 할당할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다.
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(a); // [2, 3]
👯♀️ 객체의 구조 분해 할당
기본 할당
var obj = {p: 42, q: true};
var {p, q} = obj;
console.log(p); // 42
console.log(q); // true
선언 없는 할당
구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있다.
var a, b;
({a, b} = {a: 1, b: 2});
위 예제의 특이한 점은 {a, b} = {a: 1, b: 2}
를 괄호로 감쌌다는 점이다.
왜 그대로 쓰지 않고 괄호로 감쌌냐면, {a, b}
를 선언해주지 않았기 때문에 유효한 소스가 아니기 때문이다. (선언은 타입과 함께 사용하는 그 선언을 말하는 것이 맞다 : var {a, b}
)
결론은, var {a, b} = {a: 1, b: 2}
와 ({a, b} = {a: 1, b: 2})
와 같은 소스라는 뜻이다.
괄호를 사용하면 선언 없이도 사용할 수 있다.
새로운 변수 이름으로 할당하기
객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있다.
var obj = {p: 42, q: true};
var {p: foo, q: bar} = obj;
console.log(foo); // 42
console.log(bar); // true
기본 값
객체로부터 해체된 값이 undefined
인 경우 변수에 기본 값을 할당할 수 있다.
var {a = 10, b = 5} = {a: 3};
console.log(a);
console.log(b);
위 예제의 경우 b의 값을 할당해주지 않았지만 b = 5
라고 기본 값을 기존에 줬기 때문에 b 는 5가 된다.
기본 값 갖는 새롱누 이름의 변수에 할당하기
새로운 변수명 할당과 기본 값 할당을 한번에 할 수 있다.
var {a: aa = 10, b: bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5
함수 매개변수의 기본 값 설정하기
function drawES6Chart({size = 'big', cords = {x: 0, y:0}, radius = 25} = {}) {
console.log(size, cords, radius);
}
drawES6Chart({
cords: {x: 18, y: 30},
radius: 30
});
매개변수의 기본 값을 지정해두고, 매개변수를 받아 console.log
를 띄워보는 예제이다.cords
와 radius
는 매개변수로 할당 받았지만 size
는 할당받지 못하였기 때문에 기존에 기본 값으로 정의된 'big'이 출력될 것이다.
그리고 여기서 주목할 점은 매개변수 내 구조 분해에서 우변이다.
빈 오브젝트가 우변에 할당되었다. 이 부분은 생략 가능하다.
하지만 생략해준다면 반드시 함수 호술 시 하나 이상의 인자가 제공되어야한다.
즉, 매개변수 우변에 빈 오브젝트 할당을 생략한다면 drawES6Chart();
와 같이 인자가 없는 함수의 호출이 불가능하다는 뜻이다.
중첩된 객체 및 배열의 구조 분해
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
for of 반복문과 구조분해
var people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (var {name: n, family: { father: f } } of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
함수 매개변수로 전달된 객체에서 필드 해체하기
function userId({id}) {
return id;
}
function whois({displayName: displayName, fullName: {firstName: name}}) {
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log("userId: " + userId(user)); // userId: 42
whois(user); // jdoe is John
계산된 속성의 이름과 구조 분해
계산된 속성 이름(computed property name)은 객체 리터럴과 비슷하게 구조 분해에도 사용될 수 있다.
계산된 속성 이름이란 []
대괄호 안 내용의 결과가 객체의 속성(키) 가 되는 것을 말한다.
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
위 예제에선 []
내에 있던 key의 값인 'z'가 속성이 되어 결과적으로 {z: foo}
가 된다.
따라서 { z: foo } = { z: "bar" }
로 구조분해 할당 되어 foo "bar"이 되는 것이다.
객체 구조 분해에서 Rest
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }
'자바스크립트' 카테고리의 다른 글
[JavaScript] 실행 컨텍스트, 스코프 체인과 클로저 (0) | 2021.06.13 |
---|---|
[JavaScript] Scope란? (스코프 체인, 실행 컨텍스트...) (0) | 2021.06.13 |
[JavaScript] for ...in, for ...of의 차이 (1) | 2021.05.31 |
[JavaScript] ECMAScript란? ES5와 ES6의 차이 (3) | 2021.05.31 |
[JavaScript] 데이터 타입 - undefined, string... (typeof - 타입 확인 방법) (0) | 2021.05.31 |