[카카오테크캠퍼스 5주차] JavaScript 마스터: 구조 분해 할당

⏳ 2023. 5. 8. - 2023. 5. 14.

 

1. 구조 분해 할당(Destructing assignment)

1.1. 배열에서

      

      

      

    
    

      <javascript />
    
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

불필요한 코드를 줄일 수 있다!

      

      

      

    
    

      <javascript />
    
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]

1.2. 객체에서

      

      

      

    
    

      <javascript />
    
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

객체에서도 마찬가지로 불필요한 코드를 줄일 수 있다.

      

      

      

    
    

      <javascript />
    
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 }