[JavaScript] 자바스크립트의 구조 분해 할당 (비구조화 할당)

함수에서 파라미터로 받아온 객체 내부의 값을 조회할 때,
구조 분해 할당(비구조화 할당)을 사용하면 더 간결하게 코드를 작성할 수 있다.

 

// 함수에서 객체를 파라미터로 받기
function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}

 

위와 같이 함수에서 객체를 매개변수로 받아 호출하는 경우 복잡한 코드('객체.요소' 형태)를 작성해야 하지만,

// 구조 분해 할당을 활용 (변수 선언)
function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

// 구조 분해 할당을 활용 (파라미터 단계에서)
function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

이렇게 구조 분해 할당을 하면 간결하게 코드를 작성할 수 있다.

 

참고자료
https://learnjs.vlpt.us/useful/06-destructuring.html