[ECMAScript]디폴트 파라미터(Default Parameter)

ES6에서 C++ 나 파이썬처럼 함수에서 인자로 디폴트 값을 설정할 수 있습니다. 함수를 호출하는데 매개 변수가 존재하지 않더라도 함수가 디폴트 값으로 매개변수를 초기화하는 기능입니다.

 

매개 변수를 생략하고 함수를 호출하는 경우

function add(a,b) {
  return a + b;  
}
console.log(add()); // NaN

 

매개 변수를 undefined 체크하는 경우

ES6 이전에는 매개 변수를 생략하고 함수가 호출되는 경우를 방지하고자 매개 변수의 undefined를 체크하는 방식을 사용하였습니다. 이러한 방식의 단점은 함수에 전달할 파라미터가 많아질수록 typeof을 체크하는 코드도 많아지며, 파라미터 순서도 신경을 써야 하는 문제점이 있습니다.

function add(a,b) {
  a = typeof a !== 'undefined' ? a : 10;
  b = typeof b !== 'undefined' ? b : 10;
  return a + b;  
}
console.log(add(100, 50)); // 150
console.log(add(50)); // 60
console.log(add()); // 20

---

ES6의 디폴트 파라미터(Default Parameter)

EX 1) 기본 사용 방법

function add(a = 10, b = 10) {
  return a + b;  
}
console.log(add(100, 50)); // 150
console.log(add(50)); // 60
console.log(add()); // 20

 

EX 2) 함수를 기본 디폴트 값으로 설정

createA() 함수가 add() 함수 내부에 정의되었을 경우 에러가 발생합니다. 디폴트 값으로 설정되는 함수는 호출되는 함수 외부에 존재해야 합니다.

function createA() {
  return 100;
}
  
function add(a = createA(), b = 10, c = 10) {
  return a + b + c;  
}
console.log(add()); // 120

 

EX 3) 디폴트 파라미터를 디폴트 파라미터로 설정

매개변수 a는 디폴트 값이 함수로 설정되어있어서 디폴트 값은 100입니다.

매개변수 b는 디폴트 값이 매개변수 a * 10입니다.

매개변수 c는 디폴트 값이 매개변수 b * 10입니다.

function createA() {
  return 100;
}
  
function add(a = createA(), b = a * 10, c = b * 10) {
  return a + b + c;  
}
console.log(add()); // 11100
console.log(add(1)); // 111

add()는 파라미터가 전부 생략이 되었으므로, 매개변수의 값이 전부 디폴트 파라미터로 설정이 됩니다.

매개변수 a의 디폴트 값은 createA() 함수의 리턴 값인 100

매개변수 b의 디폴트 값은 a * 10 = 100 * 10 = 1000

매개변수 c의 디폴트 값은 b * 10 = 1000 * 10 = 10000

return 100 + 1000 + 10000이므로 add()함수의 실행 결과는 11100입니다.

 

EX 4) 디폴트 파라미터를 자기 자신으로 설정

에러가 발생합니다. 매개변수 b의 값이 무엇인지도 모르기 때문에 b = b * 10은 정상적으로 동작하지 않습니다.

function createA() {
  return 100;
}
  
function add(a = createA(), b = b * 10) {
  return a + b;  
}
console.log(add()); // Uncaught ReferenceError: Cannot access 'b' before initialization 

단, 아래 코드는 정상적으로 동작을 합니다. 매개변수 b의 값이 전달되었기 때문에 디폴트 값을 설정할 필요가 없기 때문입니다.

function createA() {
  return 100;
}
  
function add(a = createA(), b = b * 10) {
  return a + b;  
}
console.log(add(10, 10)); // 20

 

EX 5) 객체를 디폴트 파라미터로 설정

var Person = {
  name : {
    firstName : 'Kang',
    middleName : 'Jae',
    lastName : 'Seong'
  },
  age : 29  
}
  
function personLog(a = Person) {
  console.log(`${a.name.firstName} ${a.name.middleName} ${a.name.lastName} is ${a.age} years old.`);
}
  
personLog(); // "Kang Jae Seong is 29 years old."