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

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

• 객체에서 특정 값을 추출해내는 것을 의미함.

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

먼저 위와 같은 객체를 선언한다.

 

 

 

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

  console.log(print(ironMan)); 
  // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어입니다.

 

 

 

하지만 이렇게 매번 객체.key값을 써주는 것이 번거로울 수 있다.
그래서 비구조화 할당을 사용한다.

  // 비구조화 할당 (객체 구조 분해)
  // 객체에서 특정 값을 추출해내는 것.

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

   console.log(printNew1(ironMan)); 
  // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어입니다.

 

 

이렇게 객체. 을 붙여주는 수고로움을 덜어줄 수도 있다.

그리고 패러미터에서도 비구조화 할당이 가능하다.

  // 패러미터도 비구조화 할당이 가능함.
  function printNew2({alias, name, actor}){
      const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다.`;
      console.log(text)
  }

  printNew2(ironMan)
  // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어입니다.

 

 

하지만 객체 구조화를 꼭 함수 내부에서만 할 필요는 없다.
함수 바깥에서도 사용이 가능하다.

  const { name } = ironMan;
  console.log(name);
  // 토니 스타크 

 

 

출처

• 패스트캠퍼스 프론트엔드 JS 기초 (벨로퍼트)