작성자 : 박소선
검수자 : 배광식
Default : Default Function Parameters
Default는 함수의 파라미터를 초기화 하는데 사용한다. 함수를 정의할 때 임의의 값을 기본 값으로 지정할 수 있다.
함수를 호출할 때, 파라미터에 아무 값도 지정해주지 않았거나 undefined으로 지정했다면, Default 파라미터를 사용한다.
ES5, ES6 의 기본적인 차이
[ES 5]
- 함수 내부에서 파라미터 값들을 테스트를 하고 undefined라면 값을 지정해주는 방식이었다.
- 아래의 예시 중 multiply 함수를 호출할 때, b 파라미터에 해당하는 값을 넣지 않는다면, undefined로 인식된다.
function mul5() {
var x = (arguments[0] !== void 0 ? arguments[0] : 1);
var y = (arguments[1] !== void 0 ? arguments[1] : 1);
return x * y;
}
mul5(); // 1 (1 * 1)
mul5(5,2); // 10 (5 * 2)
mul5(5); // 5 (5 * 1)
// 혹은 위의 내용을 아래와 같이 코드를 짤 수도 있겠다.
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1; // 이 조건문이 없었다면 NaN이 반환되었을 것이다.
return a * b; // 그러나 typeof를 사용해서 기본 값을 지정했기에 정상적으로 결과값이 반환되었다.
}
multiply(5, 2); // 10 (5 * 2)
multiply(5, 1); // 5 (5 * 1)
multiply(5); // 5 (5 * 1)
[ES 6]
- 이제는 함수 내부에서 조건을 체크할 필요가 없다. 함수 선언부에서 디폴트 값을 정의하면 된다.
function mul6(a = 1, b = 1) {
// console.log("a: " + a);
// console.log("b: " + b);
return a * b;
}
mul6(); // 1
mul6(5, 2); // 10
mul6(5) // 5
mul6(,10); //error: 순서대로 인자에 값이 지정되기 때문에 이런 식으로 순서를 건너 뛸 수 없다.
//tweaked from mdn example
function multiply(a, b = 1) {
return a * b;
}
multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5); // 5
// 앞에서 배운 ES6 arrow function을 활용하면 위의 multiply 함수를 이렇게 표현이 가능하다.
var multiply = (a, b = 1) => {
return a * b;
}
multiply(5,2) // 10
multiply(5) // 5
undefined / false 값 테스팅
- ( ) 혹은 undefined를 넣으면 디폴트 값을 반환한다.
- null 은 오브젝트이며, undefined와는 다른 값이다.
function test(num = 3) {
console.log(typeof num);
}
test(); // 'Number type' (num은 3이다.)
test(undefined); // 'Number type' (여전히 num은 3이다.)
// test with other falsy values:
test(''); // 'String type' (num은 '')
test(null); // 'Object type' (num은 null)
default argument 가 동작하는 시점
- 함수가 호출되는 시점마다 새로운 작업을 한다. (즉, 함수 호출의 결과값은 각각 독립적이다.)
function append(value, array = []) {
array.push(value);
return array;
}
append(1); // [1]
append(2); // [2]
// append(2)로 함수가 호출되었을 때, 새롭게 array 객체가 생성되기 때문에
// 그 전의 호출값 ( append(1)의 값 )은 보이지 않는다.
앞에 있는 인자의 (디폴트) 값을 활용할 수 있다
function verbs (present, past = present + 'ed', pp = 'have ' + past ) {
// past 파라미터는 present 파라미터를 값을 활용한다.
// pp는 past 값을 활용한다.
return [present, past, pp];
}
verbs('cross'); // ["cross", "crossed", "have crossed"]
// past는 present 값을, pp는 past 값을 사용했다.
verbs('study', 'studied'); // ["study", "studied", "have studied"]
// present, past 파라미터는 새로 지정을 해주었고, pp는 지정해 준 past 값을 사용했다.
함수 안에 함수가 있는 경우
- 외부 함수의 안에서 정의하는 또다른 함수의 반환 값을 외부함수 파라미터의 디폴트 값으로 사용할 수 없다.
- 디폴트 파라미터가 항상 먼저 실행된다.
- 아래 예시의 경우, f(a)함수 선언이 먼저, go( ) 함수는 그 다음이다.
// ReferenceError를 반환한다.
function f(a = go()) {
function go() { return ':P'; }
}
디폴트 값이 있는 파라미터, 없는 파라미터
왼쪽 ==> 오른쪽 순서로 파라미터 값이 지정된다.
아래 예시의 경우, 두번째 파라미터(y)가 디폴트가 없더라도, 앞에 있는 x 파라미터에 먼저 값을 지정해주고 y는 그냥 undefined로 출력한다.
function f(x = 2, y) {
return [x, y];
}
f(); // [2, undefined]
f(3); // [3, undefined]
비구조화 할당이 가능하다
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
return x + y + z;
}
f(); // 6
// x에 1, y에 2, z에 3이 각각 할당되었다.
비구조화 할당: Destructuring Assignment