[ES6 JavaScript] default parameters

 오늘 함께 공부해볼 것은 기본값 매개변수입니다. 이전 JavaScript에서 함수 매개변수의 기본값은 undefined였습니다. 그래서 기본값 설정을 위해서는 함수 내부에서 매개변수 값을 검사해 undefined인 경우 값을 할당하여 사용했습니다. 

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1
  return a*b
}

multiply(5, 2)   // 10
multiply(5)      // 5

 위 함수가 es6 이전에 사용하던 방법의 예입니다. 만약 b가 undefined라면 b의 값을 1로 초기화하고 있습니다. 하지만 es6 기본값 파라매터를 이용하면 아래와 같이 간단하게 구현할 수 있습니다.

function multiply(a, b = 1) {
  return a*b
}

multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

 

Pixabay로부터 입수된 Gustavo Ferreira Gustavo님의 이미지 입니다.  

Falsy values 전달하기

 그렇다면, 다른 falsy 값에 대해 기본값은 어떻게 동작할까요?

function test(num = 1) {
  console.log(num)
}

test()            // 1
test(undefined)   // 1

// 다른 falsy values로 테스트 하기:
test('')          // ""
test(null)        // null

 undefined의 경우 당연히 기본값으로 대체된 것을 확인할 수 있습니다. 하지만, 공백 문자열('')이나 null값의 경우엔 그 값이 그대로 출력되었습니다.

 

앞 쪽 매개변수 사용하기

 매개 변수가 여러개일때, 앞 쪽에 정의된 매개변수는 뒷쪽에 정의된 매개변수의 기본값에 바로 사용할 수도 있습니다.

function greet(name, greeting, message = greeting + ' ' + name) {
  return [name, greeting, message]
}

greet('David', 'Hi')                      // ["David", "Hi", "HiDavid"]
greet('David', 'Hi', 'Happy Birthday!')   // ["David", "Hi", "Happy Birthday!"]

 위 greet함수를 보면 name, greeting, message라는 3개의 매개변수가 있습니다. 그런데 message 함수의 매개변수의 기본값은 앞에 있는 두개의 매개 변수의 값을 포함한 표현식으로 구성되어 있습니다. 이렇게 앞 쪽에 정의된 매개변수를 사용하여 기본값을 세팅할 수 있습니다.

 

기본 값 할당에 구조 분해 할당 사용하기

function f([x, y] = [1, 2], {z: z} = {z: 3}) {
  return x + y + z
}

console.log(f())	// 6

 기본 값 할당에 구조 분해 할당을 사용할 수도 있습니다.

 

 

참고:

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters

기본값 매개변수