JS 문법 비구조화 할당(구조분해)

객체를 선언 할 때 { key: value } 의 형식으로 구성된다.

key 값을 선언할 때 공백이 없다면 위와 같이 { test: true } 구현해 주면 되고 

key 값에 공백이 포함되어 있다면 { 'test two': true } 따옴표를 이용해 문자열로 감싸서 넣어주면 된다.

예제를 통해 비구조에 대해 이해해 보겠다.

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

// 객체를 파라미터 값으로 받아 {hero.name}와 같은 방식으로 값을 출력시킨다. 이와 같은 방식에서 hero. 을 제외하고 사용하는 방식이 객체 비구조화 할당이다 아래 예제를 보면서 이해를 해보면

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

print(ironMan);
print(captainAmerica);

// const { alias, name, actor } = hero 부분이 객체의 값을 추출해서 새로운 상수로 선언해줘 hero. 을 생략하고 코드를 간략하게 정리할 수 있다.

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


print(ironMan);
print(captainAmerica);

// 위의 방식은 비구조화 할당을 파라미터 단계에서 적용하는 방식으로 더욱 더 코드를 간략하게 사용하는 방식을 알아 보았다.

출처: https://learnjs.vlpt.us/basics/06-object.html#%EA%B0%9D%EC%B2%B4-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9

06. 객체 · GitBook