[ES6+] Function destructuring(함수 비구조화)
in JavaScript
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의 정석’을 듣고 정리 =)