[자바스크립트 / Vanilla JS] 함수 기본값 인수

❗ 함수 인수의 기본값 (ES6 이전)

ES6 이전에는 함수 인수의 기본값을 설정하는 것이 쉽지 않았다.

바로 예시를 하나 살펴보자.

function getLocation(city, country, continent){
    if (typeof country === 'undefined'){
        country = 'Italy';
    }

    if (typeof continent === 'undefined'){
        continent = 'Europe';
    }

    console.log(continent, country, city)
}

getLocation('Milan');
// Europe Italy Milan

getLocation('Paris', 'France');
// Europe France Paris

예제의 함수는 city, country, continent 세 가지 인수를 취한다.

함수 본문에서 country 또는 continent가 정의되지 않았는지 확인하고, 정의되지 않은 경우에만 기본값을 제공하는 것이 

이 코드의 내용이다.

 

getLocation('Milan')이라고 호출하면 두 번째, 세 번째 매개변수는 정의되지 않았으므로 함수의 기본값으로 대체된다.

 

그러나 기본값이 인수 목록의 끝이 아닌 시작 부분에 있도록 하려면 어떻게 해야할까 ? 

function getLocation(city, country, continent){
    if (typeof country === 'undefined'){
        country = 'Italy';
    }

    if (typeof continent === 'undefined'){
        continent = 'Europe';
    }

    console.log(continent, country, city)
}

getLocation(undefined, undefined, 'Milan');
// Europe Italy Milan

getLocation(undefined, 'Paris', 'France');
// Europe France Paris

첫 번째 인수를 기본값으로 바꾸기 위한 깔끔하고 멋진 방법은 없고, 그저 인수로 undefined 값을 전달해야 한다.

다행히 ES6는 우리를 구원하기 위한 함수 기본값 인수를 제공한다.

---

❗ 함수 기본값 인수

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

바로 예시를 보도록 하자

function calculatePrice(total, tax=0.1, tip=0.05) {
   //tax나 top에 값을 할당하지 않으면 기본값으로 0.1과 0.05가 쓰인다.
   return total + (total * tax) + (total * tip);
}

다음과 같이 매개변수를 아예 전달하지 않으려면 어떻게 해야 할까 ? 

// tip에 0.15를 할당하려 헀지만, 아래처럼 쓰면 0.15는 두 번째 인수 tax에 할당된다.
calculatePrice(100,0.15);

 

디스트럭처링을 같이 코드를 바꾸면 해결할 수 있다.

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

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

함수의 인수를 객체로 만들었다.

함수를 호출하면 매개변수가 주어진 키에 맞춰서 입력되기 때문에 매개변수의 순서에 대해 걱정할 필요가 없다

 

앞의 예에서는 tip의 기본값은 0.05이지만 0.15로 덮어 썼고 tax는 값을 덮어쓰지않아 기본값인 0.1로 유지되었다.

 

이 코드에서 다음 부분에 주목하자,

{total = 0. tax = 0.1, tip = 0.05,} ={}

여기서 인수 객체를 빈 객체로 기본 설정하지 않고(즉 = {}를 빼고) 선언한 다음 아무 매개변수도 없이 calculatePrice()를

실행하면 다음과 같은 오류가 발생한다.

"Cannot Destructure property 'total' of 'undefined' or 'null.

 

= {}를 추가해야 인수를 기본적으로 객체로 설정한다.

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

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

인수로 무엇을 전달했는지에 상관없이 total, tax, tip 세 가지 기본 속성을 가진 객체로 기본 설정 되었다.

 

= {}가 없는 코드의 결과와 비교해보자.

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


calculatePrice({});
// "Cannot Destructure property 'total' of 'undefined' or 'null.

calculatePrice();
// "Cannot Destructure property 'total' of 'undefined' or 'null.

calculatePrice(undefined);
// "Cannot Destructure property 'total' of 'undefined' or 'null.

디스트럭처링에 대해서 잘 모르겠다면 

여기로 ! 

 

출처 : 모던자바스크립트 핵심 가이드 서적