본문 바로가기

공부/JAVASCRIPT

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

아래의 코드를 보면 info로 받아오는 person의 값을 조회하기 위해 info.key를 반복하고 있다. 비구조화 할당은 이런 코드를 좀 더 편하게 쓸 수 있는 문법이다. 객체 구조 분해라고도 부른다.


const person = {

name : "홍길동",

age : 1500,

job : "도적"

}


function print(info) {

const text = `${info.name}은 ${info.age}살이고 직업은${info.job}이다.`;

console.log(text);

}


비구조화 할당의 사용 방법은 간단하다.


function print(info) {

const { name, age, job } = info;

const text = `${name}은 ${age}살이고 직업은${job}이다.`;

console.log(text);

}


또는 아래와 같이 사용한다.


function print({ name, age, job }) {

const text = `${name}은 ${age}살이고 직업은${job}이다.`;

console.log(text);

}


반복되는 info. 코드가 사라진 것을 확인 할 수 있다.

비구조화 할당은 함수 바깥에서도 사용할 수 있다.


const { name, age, job } = person;

console.log(name);

=>홍길동