[ES6+] Function destructuring(함수 비구조화)


function saveSettings(settings){
	console.log(settings)
}

saveSettings({
	follow: true,
	alert: true,
	mkt:true,
	color:"green"
})

위 코드는 함수를 호출할 때는 좋은데,

함수를 작성할떄는 좋지않다.

예를 들어 follow 의 값이 바뀌었을때 알 수 있는 방법은

function saveSettings(settings){
	if(!settings.mkt){
		//원하는 내용 실행
	}
}

이런식이거나, 혹은 3개의 변수는 1번api로,

하나의 변수는 2번 api로 보내고 싶다면 새 함수를 만들어서

function saveSettings(settings){
	saveColor(settings.color);
}

이런식으로 저장해주는것이다.


위 방법이 기존의 방법이었다면 조금 더 효율적으로 코드를 짜보자

첫번쨰는, 변수의 가독성을 확보하도록 짜는것이고

두번째는 , 각 변수의 기본값을 설정하는것이다

(여태 했던 비구조화와 같은 맥락이군!)

function saveSettings({notifications, color:{theme}}){
	console.log(color);
	//blue
}

saveSettings({
	notifications:{
		follow: true,
    alert: true,
    mkt:true,	
	},
	color:{
		theme: "blue"
	}
})

이러면 color의 기본값은 blue가 되고 notifications로 묶어서 관리할 수있다!





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




© 2018. by sora

Powered by sora