[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