[JS] 구조 분해

구조 분해 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언이 가능합니다.

const obj = {a: 1, b: 2 };

const {a, b} = obj;

console.log(a); // 1
console.log(b); // 2

함수의 파라미터에서도 구조 분해를 할 수 있습니다

let obj = {a: 1, b: 2};

function print({ a, b}) {
  console.log(a)
  console.log(b)
}

print(obj);

// 1
// 2

만약 b값이 주어지지 않았다고 가정한다면 두 번째 출력에서 undefined가 나타납니다

let obj = { a: 1};

function print({ a, b}) {
    console.log(a)
    console.log(b)
}

print(obj);

// 1
// undefined

b값에 기본값을 주려면 아래와 같습니다

let obj = { a: 1};

function print({ a, b = 2}) {
    console.log(a)
    console.log(b)
}

print(obj);

// 1
// 2

이건 함수의 파라미터에서만 할 수 있는 건 아닙니다

let obj = { a: 1};

let { a, b = 2} = obj;

console.log(a); // 1
console.log(b); // 2

선언할 값의 이름을 바꿀 수도 있습니다

let fruit = {
    name: 'apple',
    color: 'red'
};

let newFruit = fruit.name;

console.log(newFruit); // apple

위 코드에서는 fruit.name 값을 newFruit에 담고 있는데, 이름이 같다면 그냥 우리가 이전에 배웠던 구조 분해 방식을 쓰면 되지만 지금은 이름이 서로 다릅니다.

이러한 상황에서는 : 문자를 사용해서 이름을 바꿔줄 수 있습니다.

let fruit = {
    name: 'apple',
    color: 'red'
};

let { name : newFruit } = fruit;

console.log(newFruit); // apple

위 코드는 'fruit 객체 안에 있는 name을 newFruit라고 선언하겠다.'라는 의미입니다.

구조 분해는 객체에만 할 수 있는 것이 아닙니다. 배열에서도 할 수 있습니다.

let arr = [1, 2];

let [one, two] = arr;

console.log(one); // 1
console.log(two); // 2

이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용합니다.

객체의 구조 분해와 마찬가지로, 기본값 지정이 가능합니다

let arr = [1];

let [one, two = 2] = arr;

console.log(one); // 1
console.log(two); // 2

Wooyoung