반응형
오늘 함께 공부해볼 것은 기본값 매개변수입니다. 이전 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
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
반응형
'JavaScript' 카테고리의 다른 글
[ES6 JavaScript] Spread syntax(전개 구문) (0) | 2020.10.04 |
---|---|
[ES6 JavaScript] Rest Parameters (0) | 2020.10.03 |
[ES6 JavaScript] 구조 분해 할당(Destructuring assignment) (0) | 2020.10.01 |
[ES6 JavaScript] Template Literals (Template Strings) (0) | 2020.09.30 |
[ES6 JavaScript] 객체 리터럴(Object Literals) (0) | 2020.09.29 |