⏳ 2023. 5. 8. - 2023. 5. 14.
구조 분해 할당(Destructing assignment)
배열에서
const arr = [1, 2, 3];
const [a, b, c] = arr;
// const a = arr[0];
// const b = arr[1];
// const c = arr[2];
console.log(a, b, c); // 1 2 3
불필요한 코드를 줄일 수 있다!
const arr = [1, 2, 3];
// 할당하고 싶지 않은 값에 대해서는 순서에 맞춰 ,로 구분해서 작성해야 한다.
let [, b, c] = arr;
console.log(b, c); // 2 3
// 전개 연산자를 사용할 수 있다.
let [a, ...rest] = arr;
console.log(a, rest); // 1 [2, 3]
객체에서
const obj = {
a: 1,
b: 2,
c: 3,
};
const { a, b, c } = obj;
// const a = obj.a;
// const b = obj.b;
// const c = obj.c;
console.log(a, b, c); // 1 2 3
객체에서도 마찬가지로 불필요한 코드를 줄일 수 있다.
const obj = {
a: 1,
b: 2,
c: 3,
d: 5,
e: 10,
};
// 배열과의 차이: 속성 이름으로 값을 찾을 수 있다.
const { b, c } = obj;
console.log(b, c); // 2 3
// 1) 없는 속성으로 값을 찾은 경우
const { x } = obj;
console.log(x); // undefined
// 1-1) 없는 속성으로 값을 찾은 경우 기본값을 할당할 수 있다.
const { y = 4 } = obj;
console.log(y); // 4
// 2) 속성으로 찾은 값을 할당할 변수의 이름을 바꿀 수 있다.
const { a: newName1 } = obj;
// console.log(a); ❌ error
console.log(newName1); // 1
// 1-1)과 2)를 혼합해서 사용할 수 있다.
const { z: newName2 = 10 } = obj;
console.log(newName2); // 10
// 전개 연산자를 사용할 수 있다.
const { d, ...rest } = obj;
console.log(d, rest); // 5, { a: 1, b: 2, c: 3, e: 10 }
'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글
[카카오테크캠퍼스 5주차] JavaScript 마스터: for of, for in (0) | 2023.05.11 |
---|---|
[카카오테크캠퍼스 5주차] JavaScript 마스터: 선택적 체이닝 (0) | 2023.05.10 |
[카카오테크캠퍼스 5주차] JavaScript 마스터: 연산자 (0) | 2023.05.10 |
[카카오테크캠퍼스 5주차] JavaScript 마스터: 데이터 타입 확인 (0) | 2023.05.09 |
[카카오테크캠퍼스 5주차] JavaScript 마스터: Truthy & Falsy (0) | 2023.05.09 |