객체 비구조화 할당

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 이곳으로 문의주세요! 😀

객체를 활용하는 예제를 보면

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

hero에 대한 정보를 정리하기 위해 계속 hero.~~ 이렇게 쓰는 부분을 볼 수 있다.

이 부분을 좀더 간편하게 바꿀수 있는 방법이 ES6에

객체 비구조화 할당(객체 구조 분해) 라는 문법이 있음!

사용법은 다음과 같다..!

//...생략

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

//...생략

블록({})을 열고

추출하고 싶은 내용(alias, name, actor)을 쉼표로 구분하여 블록안에 넣고

오른쪽에는 등호 옆에 어디에서 값을 추출하고 싶은지(hero) 적는다.

위와 같은 상황을 좀 더 간편하게? 적으면 이렇게도 할 수 있다!!

//...생략

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

//...생략

함수에서 파라미터를 입력받는 순간에 바로 객체 비구조화 할당을 할 수 있는 것이다!!