[Javascript] 함수의 기본 파라미터

 

 

이번 글에서는 함수의 기본 파라미터를 설정하는 방법에 대해 알아보려 한다.

한 번 우리가 원의 넓이를 구하는 함수를 만들어 본다고 가정해 보자.

 

function calculateCircleArea(r) {
  return Math.PI * r * r;
}

const area = calculateCircleArea(4);
console.log(area); // 50.26548245743669

 

여기서 Math.PI는 원주율 파이(π)의 값을 가리킨다. 그런데 여기서 만약 우리가 이 함수에 r이라는 인자 값을 넘겨주지 않는다면 어떤 결과가 나타날까?

 

function calculateCircleArea(r) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // NaN

 

결과는 NaN이 나온다. NaN은 Not a Number라는 의미로 위 예시에서는 undefined * undefined와 같이 숫자가 아닌 값에 곱셈을 해버리니 이와 같은 결과가 나와버린 것이다.

 

그렇다면 위와 같은 함수에서 r 값이 주어지지 않았을 때를 고려해 기본 값으로 1을 설정하도록 변경해 보자.

 

 

몇 년 전까지만 해도 자바스크립트에서 파라미터의 기본 값을 설정하려면 아래와 같이 파라미터의 값이 undefined인지 명시적으로 확인하고 일치하는 경우에 기본 값을 설정하도록 해야 했다.

function calculateCircleArea(r) {
  if(r === undefined) r = 1
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793

 

 

이 외에도 논리 연산자(||)를 사용해 파라미터에 기본 값을 설정해 주는 방법도 있다.

function calculateCircleArea(r) {
  // r의 값이 falsy면 기본값이 할당됨.
  // 단, 이 방식은 r 값이 0, '' 등일 경우 r에 값이 전달되지 않은 것과 같다고 간주함.
  const r = r || 1;
  return Math.PI * radius * radius;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793

 

ES5 시절까지만 해도 위와 같이 작성하는 것이 최선이었지만 ES6 이후로는 아래와 같이 할 수 있게 되었다.

function calculateCircleArea(r = 1) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793

 

 

훨씬 깔끔해 보이지 않은가? 함수의 기본 파라미터 문법은 화살표 함수에서도 사용할 수 있다.

const calculateCircleArea = (r = 1) => Math.PI * r * r;

const area = calculateCircleArea();
console.log(area); // 3.141592653589793