api에서 객체들을 가지고 왔는데 이름을 다시 설정하고 싶거나 그럴때 사용한다

const settings = {
	color : {
		chosen_color:"dark"
	}
};

const {
	color: {chosen_color = "light"}
} = settings;

근데 chosen_color라는 변수명은 쓰기 싫은거지…

그때 예전이라면

const chosenColor = settings.color.chosen_color || "light";

이렇게 쓸 수 있겠지만 디스트럭쳐링을 유지하면서 다시 리네이밍을 해보자

chosen_color 가 아니라 chosenColor로 쓰고싶다고 해보자.

이럴때는

const settings = {
	color : {
		chosen_color:"dark"
	}
};

const {
	color: {chosen_color : chosenColor = "light"}
} = settings;

쨔쟌!

저렇게 간단하게 한줄로만 써줄 수 있다 (와 진짜 수업들을때마다 대단쓰)

코드 해석을 하자면

settings에서 color의 chosen_color를 가져오는데, 그 이름을 chosenColor로 가져오고 만약 chosen_color의 값이 없으면 light를 기본값으로 정하라, 라는 뜻이다

만약 const 대신 let으로 chosenColor라는 변수를 미리 설정하면 어떨까

const settings = {
	color : {
		chosen_color:"dark"
	}
};

let chosenColor = "blue";
console.log(chosenColor);
//blue

({
	color: {chosen_color : chosenColor = "light"}
} = settings;)
console.log(chosenColor);
//dark

저럴때는 아래의 코드를 괄호로 감싸주어야한다.

그래야 새로api를 받아왔을때 chosenColor로 다시 덮어쓴다

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)