[Javascript] parameter default 파라미터에 기본값 미리 설정하기(es6이후버전)

함수를 구현할 때, 파라미터값에 기본값을 설정해줄 수 있다. 2가지 방법이 있다. 첫번째는 ES6이전의 고전적인 방식이고, 두번째는 최신의 방식이다. 

 

예제의 상황을 보겠다.

const creatBooking = function (busNum, people, price) {
  const booking = {
    busNum,
    people,
    price,
  };
 
  console.log(booking);
};

creatingBooking('LH123');

//{flightNum:"LH123", people: undefined, price: undefined}

현재 3가지 파라미터를 가지는 함수를 만들었다. 그리고 3가지 파라미터 중 첫번째, 파라미터에만 값을 넣었다. 그랬더니 나머지 people과 price의 value에는 undefined의 값이 출력되었다. 

 

우리는 이렇게 undefined가 나오는 상황을 원치 않는다. 그래서, default값을 미리 설정해두려 한다. 

 

 

 

1.ES6이전의 고전적인 방식

const creatBooking = function (busNum, people, price) {
numPassengers = numPassengers || 1;
    price = price || 199;
    /*논리 연산자를 사용했다. 첫번째가 false이면 1로 갈 것이다.이것을 default로 만들어둔다.*/
    
  const booking = {
    busNum,
    people,
    price,
  };
 
  console.log(booking);
};

creatingBooking('LH123');

//{flightNum:"LH123", people: 1, price: 199}

파라미터를 이용하지 않고, 함수 내부에서 파라미터의 default값을 설정해둔다. 그렇게해서 1번째 파라미터에만 값을 입력했더니 더이상 undefined값이 출력되지 않고, 각각의 default값이 출력되기 시작했다. 다음으로es6이후의 최신 버전을 알아보도록 하겠다.

 

 

 

2.ES6이후의 최신 방식 - 파라미터에 바로 기본값 설정하기 

const creatBooking = function (busNum, people = 1, price = 199) {
  const booking = {
    busNum,
    people,
    price,
  };
 
  console.log(booking);
};

creatingBooking('LH123');

//{flightNum:"LH123", people: 1, price: 199}

보는 코드와 같이, 바로 파라미터에 기본값을 입력해둔다. 출력되는 내용은 고전적인 방식과 똑같지만, 훨씬더 직관적인 방식으로 이용이 가능해졌다. 이 parameter default에는 추가적인 기능이 있다. 그것을 밑에서 살펴보겠다. 

 

 

 

3.parameter default 추가적인 기능 

const creatBooking = function (busNum, people = 1, price = 199*people) {
  const booking = {
    busNum,
    people,
    price,
  };
 
  console.log(booking);
};

creatingBooking('LH123');
//{flightNum:"LH123", people: 1, price: 199}

creatingBooking('LH123',3);
//{flightNum:"LH123", people: 3, price: 597}

parameter default 에 값을 입력할 때, 어떤 expression도 가능하다. 저렇게 199*people처럼 변수를 입력하는 것도 가능하며, 199*3과 가이 숫자를 곱해주는 것도 가능하다. people의 3을 입력했을 떄의 결과값을 보면 조금 더 이해가 될 것 같다. 

이런식으로 parameter default를 이용할 때 유의해야 할 점이 있는데, 변수가 선언되기 전에는 사용할 수 없다는 것이다. 이 말인즉, 

const creatBooking = function (busNum, people = 1*price, price = 199) {
 

이 코드와 같이 price가 선언되기 전에, price를 다른 곳에 가져다 쓸 수 없다는 말이다. 

 

 

 

파라미터 기본값 설정하기에 대해서 알아보았다. undefined의 값을 원하지 않고, 파라미터의 기본값을 설정해두고자 할 때, 유용하게 사용될 것 같다.