JavaScript

[ES6 JavaScript] default parameters

JayLee 2020. 10. 2. 10:00
반응형

 오늘 함께 공부해볼 것은 기본값 매개변수입니다. 이전 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

 

기본값 매개변수

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

developer.mozilla.org

 

반응형