ES6에서는 함수에 들어오는 인수의 초기값을 인수 자리 내부에서 바로 설정할 수 있다.

기본 형태

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

인수의 값은 기본적으로 앞에서부터 차례대로 매칭된다.
초기값이 있을 경우 새롭게 들어온 매칭되는 값으로 덮어씌워진다.

다음과 같이 매개변수가 하나 덜 들어오면 어떻게 될까?

calculatePrice(100, 0.15);

total과 두 번째 tax까지 값이 매칭되고 세 번째 tip은 값이 없는 것으로 인식된다.

만약 0.15라는 매개변수를 인수 tip의 값으로 인식하게 하려면 어떻게 할까?

calculatePrice(100, undefined, 0.15);

가운데 tax로 인식될 자리에 undefined를 넣으면 된다.

그러나 undefined를 굳이 추가하는 게 깔끔해보이지는 않는다.

자바스크립트 객체의 디스트럭처링이라는 개념을 사용하면 이를 해결할 수 있다.

디스트럭처링(destructuring)

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

함수의 인수 부분이 객체 형태로 되어 있다.
그리고 이 객체 전체의 초기값을 빈 객체({ })로 잡아주었다.

함수의 인수를 객체 형태로 전달할 때의 장점

1. 인수의 순서가 바뀌어도 상관 없다.
2. 인수의 일부가 덜 들어와도 상관 없다.

이는 함수를 호출하면 매개변수가 알아서 객체의 '키'에 맞춰 넣어주기 때문이다.

const bill = calculatePrice({ tip: 0.15, total: 150 });

total과 tip은 지정한 값으로 들어갈 것이고, tax는 값이 지정되지 않았기 때문에 0.1 초기값이 사용될 것이다.

'= {}'에 대해

함수의 인수를 객체 형태로 지정할 때 초기값에 빈 객체('= {}')를 할당해주지 않으면 매개변수에 필수 키가 포함되지 않은 다음과 같은 경우 "Cannot destructure property total of 'undefined' or 'null'." 에러가 발생한다.

calculatePrice({}); // 에러
calculatePrice(); // 에러
calculatePrice(undefined); // 에러

• 의미: total이 undefined나 null로 간주되어 디스트럭처링을 할 수 없다.

하지만 '= {}'로 초기값을 설정해주면 다음과 같이 매개변수에 필수 키가 포함되지 않은 경우에도 에러가 나지 않는다.

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

calculatePrice({}); // 0
calculatePrice(); // 0
calculatePrice(undefined); // 0

빈 객체로 전체 인수 객체에 대한 초기값을 설정('= { }') 하는 것은
인수 각각에 초기값을 설정(예: { total = 0 }) 하는 것과는 관계가 없다.
(매개변수에 빈 객체, 빈 값, undefined가 들어왔을 때의 일종의 예외 처리라고 보면 됨)