2) 개발/JavaScript

[JS 핵심 가이드] 03. 함수 기본값 인수

Yasmin 2021. 10. 25. 15:49

 

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

 

이전 글: [JS 핵심 가이드] 02. 화살표 함수( => )


03. 함수 기본값 인수

 3.2 ES6에서는 함수 기본값 인수를  매우 쉽게 설정할 수 있다.

function calculatePrice(total, tax=0.1, tip=0.05) {
	retrun total + (total * tax) + (total * tip);
}

 

중간 인수를 전달하고 싶지 않은 경우

//tip에 0.15를 할당하고 tax에는 아무것도 할당하고 싶지 않을 때
calculatePrice(100, undefined, 0.15)

//디스트럭처링(destructuring)을 사용한 방법
function calculatePrice({total = 0, tax = 0.1, tip=0.05,} = {}) {
	return total + (total * tax) + (total * tip);
}

const bill = calculatePrice({tip: 0.15, total: 150}); // tax에는 기본값(0.1)이 할당됨.

객체를 인수로 전달하게끔 코드를 수정하고, = {} 코드를 통해 기본값을 할당해준다.

이렇게 되면, 함수에 매개변수를 어떻게 전달하든상관없이 인수는 객체가 된다.

 

 

 


 

ES6이전에는 함수 기본값을 할당하는 방법이 마땅치 않았다고한다.

매번 undefined의 경우를 if문으로 묶어서 해결하는 방법보다 훨씬 깔끔하게 해결되는 ES6의 함수 기본값 인수 기능에 감사하며 유용하게 사용해보자 !