[JavaScript] 함수 인수의 기본값

함수 인수의 기본값

ES6 이전의 함수 인수의 기본값

• ES6 이전에는 함수 인수의 기본값을 설정하는 것이 쉽지 않았다. ES6 이전에는 아래와 같이 함수 인수의 기본값을 설정하였다.

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

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

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

• 위의 예제처럼 ES6 이전에는 인수가 정의되지 않았는지 확인하고 정의되지 않은 경우에 기본값을 직접 제공하는 코드를 작성했다.

ES6 함수 기본값 인수

• ES6에서는 인수값에 기본값을 바로 할당하여 기본값 인수를 매우 쉽게 설정할 수 있다.

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

// tax에 0.15로 매개변수를 전달
calculatePrice(1000, 0.15);

// tip 에 0.3을 매개변수로 전달
calculatePrice(1000, undefined, 0.3);

• 위와 같이 기본값을 쉽게 할당할 수 있다. 마지막에 undefined를 매개변수로 넘기는 방법은 정상적으로 작동하긴 하지만 깔끔한 방법은 아니기에 아래와 같은 방법으로 실행하는 것이 좋다.

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 출력

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

• 위의 방법은 함수의 인수를 객체로 만든 것이다. 함수를 호출하면 매개변수가 주어진 키에 맞춰서 입력되기 때문에 매개변수의 순서에 대해 신경쓰지 않아도 된다.

• {total = 0, tax = 0.1, tip = 0.05,} = { } 에서 = { } 를 입력해주는 이유는 인수를 기본적으로 객체로 설정하게 하기 위해서이다. 입력하지 않는다면 Cannot destructure property 'total' of 'undefined' or 'null'; 에러를 유발한다.

• 위과 같은 방법은 디스트럭처링을 통한 방법이라고 한다. 디스트럭처링에 대해서는 추후에 자세하게 알아보기로 하장