[자바스크립트] ES6(ECMA Script 6) - 기본 매개변수(Default parameter)

기본 매개변수(Default parameter)

---

default parameter은 함수에 전달된 파라미터의 값이 undefined이거나 전달된 값이 없을 때, 초기화 설정된 값을 말합니다.

1. 문법

기본 문법은 아래와 같습니다.

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
     statements
}

default parameter를 사용하지 않는다면, 밑의 코드와 같이 코딩해야 합니다.

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

console.log(multiply(5, 2)); // 10
console.log(multiply(5, 1)); // 5
console.log(multiply(5));    // 5

default parameter를 사용안함

default parameter을 사용한다면, 밑에 코드와 같이 됩니다.

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

console.log(multiply(5, 2)); // 10
console.log(multiply(5, 1)); // 5
console.log(multiply(5));    // 5

default parameter 사용

default parameter을 사용한다면, 예외처리 없이 간단히 코딩 할 수 있습니다.

2. Default parameter의 undefined와 null 처리

default parameter은 함수에 전달된 파라미터가 undefined 이거나 전달되지 않았을 경우, 설정한 값으로 초기화 됩니다.

function getName(name = 'foo') {
    return name;
}

console.log(getName());
console.log(getName(undefined));
console.log(getName(null));
console.log(getName("bar"));

Default parameter의 undefined와 null 처리

getName 함수에 파라미터가 전달이 안됬거나, undefined가 전달되었을 경우, default parameter인 foo가 출력되는 것을 확인 할 수 있습니다.

getName 함수에 파라미터가 null이 전달 되었을 경우, 그대로 null이 출력되며, 값을 넘겨줄때도, 넘겨준 값이 출력되는 것을 확인 할 수 있습니다.

3. Default parameter 호출

default parameter은 함수가 호출될 때마다 새로운 객체를 생성합니다.

function append(value, array = []) {
    array.push(value);
    return array;
}

console.log(append(1)); //[1]
console.log(append(2)); //[2], not [1, 2]

함수 호출될 때 마다 새로운 객체를 생성합니다.

default parameter로 함수, 변수 모두 가능합니다.

function callSomething(thing = something()) {
    return thing;
}

function something(){
    return "sth";
}

console.log(callSomething());  //sth

함수, 변수 모두 가능합니다.

4. Default parameter 이후 Default parameter 사용

default parameter은 이후에 따라오는 default parameter에서 사용 가능합니다.

function person(name = "foo", age = "20", action = name + " eat!!") {
    console.log(name);
    console.log(age);
    console.log(action);
}
person();

이후에 따라오는 default parameter에서 사용 가능합니다.

5. Default parameter의 근사처리

default parameter은 여러 edge case를 핸들링합니다.

function go() {
    return ":P"
}

function withDefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) {
    return [a,b,c,d,e,f,g];
}

function withoutDefaults(a, b, c, d, e, f, g){
    switch(arguments.length){
        case 0:
            a
        case 1:
            b = 5
        case 2:
            c = b
        case 3:
            d = go();
        case 4:
            e = this
        case 5:
            f = arguments
        case 6:
            g = this.value;
        default:
    }
    return [a,b,c,d,e,f,g];
}

console.log(withDefaults.call({value:"=^_^="}));
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]


console.log(withoutDefaults.call({value:"=^_^="}));
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

default parameter은 여러 edge case를 핸들링합니다.

6. Default parameter이 함수일 경우

// Doesn't work! Throws ReferenceError.
function f(a = go()) {
  function go(){return ":P"}
}
f();

default parameter의 값이 함수일 경우 유의사항

default parameter의 값이 함수인데, 그 함수가 default parameter을 사용한 함수 안에서 정의 되었을 경우, ReferenceError, not defined 에러가 발생합니다. default parameter로 함수를 사용할 경우 그 함수가 먼저 정의 되어야 합니다.

7. Default parameter 뒤에 Default parameter가 아닌 경우

function f(x=1, y) { 
  return [x, y]; 
}
console.log(f()); // [1, undefined]

Default parameter 뒤에 Default parameter가 아닌 경우

default parameter 뒤에 default parameter아 아닌 경우, Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) 이전에는 SyntaxError가 발생하였지만, 이 문제는 해결되어, 이후 버전에는 정상 동작하게 되었습니다.

8. 구조분해 할당(Destructuring assignment)

default parameter은 destructuring assignment이 가능합니다.

function f([x, y] = [1, 2], {z: z} = {z: 3}) {
    return x + y + z;
}
console.log(f()); // 6

default parameter은 destructuring assignment이 가능합니다.