[ECMAScript6 / ES6] 비구조화 할당 (구조 분해) / destructuring assignment

< 객체 비구조화 할당 >

const ironMan = {
  name: "토니 스타크",
  actor: "로버트 다우니 주니어",
  alias: "아이언맨"
};
 
function print(hero) {
  const { name, actor, alias } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}
 
print(ironMan); 
//아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.

ironMan 객체와 print 함수가 선언되어 있고 print 함수 호출 시에 파라미터 값으로 ironMan 객체를 넘겨주는 소스코드이다.

 

const { name, actor, alias } = hero;

객체에서 값들을 추출하여 새로운 변수로 선언해주는 코드.

이 코드가 없었다면 text 변수에서 ${hero.alias}, ${hero.name}, ${hero.actor} 와 같이 일일이 hero. 을 입력해야 되는 번거로움을 감수해야 한다.

 

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
}
 
function print({ name, actor, alias }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text)
}
 
print(ironMan); 
//아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.

결과 값은 위의 코드와 같다.

이 코드는 print 함수의 파라미터에 객체 비구조화 할당한 것을 확인할 수 있다.

 

< 객체의 속성 이름 바꾸기 >

const animal = {
  name: '멍멍이',
  type: '개'
};
 
const nickname = animal.name;
 
console.log(nickname); //멍멍이

비구조화 할당 시에 위 코드와 같다.

{기존 이름 : 수정될 이름} 을 넣어서 변경한다.

기존 animal 객체의 name이 nickname으로 바뀌는 것은 아니다.

 

< 배열 비구조화 할당 >

const deepObject = {
  state: {
    infromation: {
      name: 'gyu',
      languages: ['korean', 'english', 'japanese']
    }
  },
  value: 5
};
 
const { name, languages } = deepObject.state.infromation;
const { value } = deepObject;
 
const extracted = {
  name,
  languages,
  value
};
 
console.log(extracted);
//Object {name: "gyu", languages: Array[3], value: 5}

name, languages, value 값들을 밖으로 꺼내기 위해 비구조화 할당 문법을 두 번 사용한다.

​

 

const deepObject = {
  state: {
    infromation: {
      name: 'gyu',
      languages: ['korean', 'english', 'japanese']
    }
  },
  value: 5
};
 
const {
  state: {
    infromation: {
      name, languages: [first, secound]
    }
  },
  value
} = deepObject;
 
 
const extracted = {
  name,
  first, secound,
  value
};
 
console.log(extracted);
//Object {name: "gyu", first: "korean", secound: "english", value: 5}

객체 깊숙하게 있는 값들을 한꺼번에 추출하는 방법이다.

위의 코드와 기능은 동일하지만, 값을 추출하기 위한 선언이 한 번이냐, 두 번이냐의 차이이다.

languages 배열을 위와 같이 비구조화할 수도 있다.