Destructuring(구조 분해 할당)
2020. 4. 8. 12:33ㆍ웹/Javascript(ES6+)
Destructuring(구조 분해 할당)
특징
-
구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
-
JSON 규격의 객체나 배열은 쉽게 매핑하여 변수를 할당할 수 있고, 함수의 반환값을 여러 개로 할 수 있음
-
ES6 에서는 Destructing 을 통해 객체나 배열이 복잡하게 전달되는 함수들로 인하여 변수를 할당하고 속성에 접근해야할 때, 간편하게 할당 및 정의
예제)
let num1, num2, rest;
[num1, num2] = [100, 200]
console.log(num1);
console.log(num2);
[num1, num2, ...rest] = [100, 200, 300, 400, 500];
console.log(rest);
const myObject = {
name: 'Test',
gender: 'Male',
job: 'Programmer'
};
const {name, gender, job} = myObject;
console.log(name + ", " + gender + ", " + job);
-- 출력 결과 --
100
200
[300, 400, 500]
Test, Male, Programmer
예제) 기본값 설정
const myArray = [1,2];
const [a=10, b=9, c=8, d=7] = myArray;
console.log(a + ", " + b + ", " + c + ", " + d);
-- 출력 결과 --
1, 2, 8, 7
-
왼쪽의 표현식에 = 연산자와 함께 적을 때, 오른쪽의 객체나 배열에 값이 없으면 기본값으로 설정
예제) Destructing 응용
function destrucArray([first, second]) {
return [first + second, first - second, first * second, first / second];
}
function destructObject({name, gender}) {
return {
greetings: 'Hello, ' + name,
sayHello() {
console.log(`sayHello function: Hello, ${name}, ${gender}`);
}
};
}
const [sum, sub, mul, div] = destrucArray([1, 2]);
console.log(`Return DestructArray : ${sum}. ${sub}, ${mul}, ${div}`);
const {greetings, sayHello} = destructObject({name: "TEST", gender: "male"});
sayHello();
-- 출력 결과 --
Return DestructArray : 3. -1, 2, 0.5
sayHello function: Hello, TEST, male
참조
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
속깊은 JavaScript(양성익 지음)
'웹 > Javascript(ES6+)' 카테고리의 다른 글
iterator 와 for-of (0) | 2020.04.10 |
---|---|
Rest, Spread 연산자 (0) | 2020.04.09 |
템플릿 리터럴 문자열 표현식 (0) | 2020.04.08 |
화살표 함수(Arrow Function) (0) | 2020.04.07 |
키워드 var, let, const 차이점 (0) | 2020.04.07 |