[ javascript ] 비구조화 할당

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

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

function print(hero) {
  // hero라는 이름으로 객체형태의 파라미터를 받아와 사용
  const text = `${hero.alias}(${hero.name})역할을 맡은 배우는 ${hero.actor} 입니다`
  console.log(text);
}

print(ironMan);
print(captainAmerica);

객체 형태의 파라미터를 사용할 때 hero.name, hero.alias, 처럼 앞에 hero 가 붙는데 ES6의 비구조화 할당이라는 문법을 사용하면 좀 더 편하게 사용할 수 있고 비구조화를 객체 구조 분해라고 부르기도 합니다

객체 비구조화 할당을 사용하면

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);

객채 형태의 파라미터 안에 있는 값들을 각각에 할당할 수 있습니다

다른 방법은 아예 파라미터를 사용하는 단계에서 비구조화 할당을 사용할 수 있습니다

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

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

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

print(ironMan);
print(captainAmerica);

비구조화 할당을 사용하여 코드가 처음보다 훨씬 깔끔해졌습니다