Chapter 03: 함수 기본값 인수 (Default function arguments)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

3.1 함수 인수의 기본값(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

인수의 첫 번째 값을 기본값으로 설정해야 하는 경우, 코드는 더욱 복잡해진다. 아래 코드처럼 parameter에 undefined 를 일일히 전달해야만 첫 번째 인수를 기본값으로 바꿀 수 있다.

function getLocation(continent,country,city){
  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 Paris France

3.2 함수 기본값 인수 (ES6 이후)

---

ES6 이후 함수 기본값 인수를 매우 쉽게 설정할 수 있다.

function calculatePrice(total, tax = 0.1, tip = 0.05){
// When no value is given for tax or tip, the default 0.1 and 0.05 will be used
return total + (total * tax) + (total * tip);
}

Use Destructuring Assignment

디스트럭처링(구조 분해 할당)을 이용해 함수의 기본값을 설정하는 방법도 사용할 수 있다.

// Use Destructuring Assignment (함수의 parameter를 객체로 설정)
function calculatePrice({
  total = 0,
  tax = 0.1,
  tip = 0.05} = {}){
  return total + (total * tax) + (total * tip);
}

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

디스트럭처링을 이용해 함수의 기본값을 객체로 설정하면 함수에 매개변수를 어떻게 전달하든 상관없이 그 인수는 객체가 된다. 이때 인수의 마지막에 ={} 기호를 빠뜨리지 않도록 주의해야 한다. 이 기호가 없으면 오류가 발생하기 때문이다. ={} 기호의 유무에 따른 결과 차이를 다음 코드를 통해 확인해보자.

={}를 사용할 경우

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

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

={}를 사용하지 않을 경우

function calculatePrice({
  total = 0,
  tax = 0.1,
  tip = 0.05}){
  return total + (total * tax) + (total * tip);
}
calculatePrice({});
// cannot read property `total` of 'undefined' or 'null'.
calculatePrice();
// cannot read property `total` of 'undefined' or 'null'.
calculatePrice(undefined)
// cannot read property `total` of 'undefined' or 'null'.

3.3 QUIZ

---

Q 3.1. 다음 작업을 수행하는 코드를 작성해보자.

다음코드에서 arg1과 arg2를 변경하여 첫 번째는 tax를 나타내고 두 번째는 tip의 값을 나타내게 만들어보자.

tax에는 기본값 0.1을 지정하고 tip에는 기본값 0.05를 지정하자.

function calculatePrice(total, arg1, arg2) {
    return total + (total * tax) + (total * tip);
}
calculatePrice(10);
// 예상 결과: 11.5

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

Q 3.2. 다음 코드의 올바른 출력은?

var b = 3;
function multiply(a, b = 2) {
    return a * b;
}
console.log(multiply(5));

• 답
• 10