728x90
구조 분해 할당(Destructuring) 이란?
배열 [ ] 이나 객체 { } 의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법입니다.
배열 구조 분해
// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3
// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
//일부 반환 값 무시하기
let arr = ["value1", "value2", "value3"];
let [a, ,b] = arr;
console.log(a,b) // value1 value3
let [a,b,c,d] = arr
console.log(d) // undefined
let [a,b,c,d = 4] = arr
console.log(d) // 4
객체 구조 분해
// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // undefined
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today
728x90
'Language > JavaScript' 카테고리의 다른 글
[TIL] JavaScript - This (bind, call, apply) (0) | 2022.12.07 |
---|---|
[TIL] JavaScript - This (1) | 2022.12.06 |
[TIL] JavaScript - DOM (0) | 2022.12.01 |
[TIL] JavaScript - Bigint (0) | 2022.11.30 |
[TIL] JavaScript - 얕은 복사, 깊은 복사 (0) | 2022.11.29 |
댓글