[JavaScript] 매개변수에 기본값 지정하기

오늘은 함수의 매개변수에 기본값을 지정하는 방법에 대해서 알아보았다. 

 

함수의 매개변수에 기본값을 넣는 방법은 간단했다.

 

function myNum(a, b = 1){
  return a + b;
}

let result = myNum(3);
console.log(result); // 4;
console.log(myNum(3, 3)); // 6

 

또한 배열을 매개변수의 기본값으로 사용할 수도 있으며 함수도 가능하다. 

 

function myArr(a = 0, array = [1, 2, 3]) {
  return array[a];
}

console.log(myArr()); // 1
console.log(myArr(2)); // 3
console.log(myArr(4,[1,2,3,4,5,6])); // 5

function myNum(tem = myArr()){
  return tem;
}
console.log(myNum()); // 1

 

함수의 매개변수에 기본값을 넣으면 인자가 넘어오지 않았을 경우에 편리하다. 또한 앞 쪽의 매개변수를 뒤 쪽의 매개변수의 기본 값으로도 사용이 가능하다.

 

// MDN 의 예제를 조금 변형했다.
function myUser(name, greeting, message = greeting + ' ' + name) {
  return [name, greeting, message]
}

myUser('Leo', 'Hi')                      // ["Leo", "Hi", "Hi Leo"]
myUser('David', 'Hi', 'Happy Birthday!')   // ["David", "Hi", "Happy Birthday!"]

 

 

 

여러 가지 유용한 점들이 많지만 주의해야 할 사항이 있다. 매개변수의 기본값은 왼쪽에서 오른쪽으로 설정되기 때문에 기본값이 있는 매개변수 뒤에 기본값이 없는 매개변수가 온다면  기본값이 있는 매개변수가 덮어쓸 수도 있다는 것이다.

 

// 앞에만 기본값 존재
function myNum(x = 1, y){
 return [x, y];
}

console.log(myNum(2)); // [2, undefined] -> 뒤 매개변수에는 값이 아예 안들어감.
console.log(myNum()); // [1, undefined]
console.log(myNum(2, 4)); // [2, 4]

 

위의 예제를 보면 myNum에 인자가 하나만 들어가 y에는 전달되지 않고 x에만 설정된 것이 보인다.

 

이럴때는 뒤에 매개변수에도 값을 전달하기 위해 앞의 값을 undefined로 넘겨주어야 한다 !

 

// 앞에만 기본값 존재
function myNum(x = 1, y){
 return [x, y];
}

console.log(myNum(undefined, 5)); // [1, 5] -> 앞에는 기본값이 뒤에는 넘겨준 인자 5가 제대로 전달되었다.

 

기본값을 설정할 때는 뒤에 전달될 인자도 생각해서 값을 넘겨줘야겠다.