[Javascript] 비구조화 할당(객체 구조 분해)

 

 

function hello(name) {

console.log('Hello' + name);

}

hello('kwkim');

결과 : Hello kwkim!

 

위와 같은 방식을 es6 이상부터는 아래와 같은 방식으로 사용할 수 있다.

function hello(name) {

console.log(`Hello ${name}!`);

}

hello('kwkim');

결과 : Hello kwkim!

 

다른 예시

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};
const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};
function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}
print(ironMan);
print(captainAmerica);

위의 예시를 비구조화할당(객체구조분해)의 방식으로 변경하면 아래와 같이 변경할 수 있다.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

function print(hero) {

  const { alias, name, actor } = hero;

  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;

  console.log(text);

} 

이 부분의 const { alias, name, actor } = hero; 대신 파라미터 부분에 { alias, name, actor}를  추가하여도  동일한  결과가  나타난다.

 

function print({ alias, name, actor }) {

  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;

  console.log(text);

}

 

참조 : https://learnjs.vlpt.us/basics/06-object.html