[JavaScript] default parameter 설정하는 방법

const bookings = [];

const createBooking = function(flightNum, numPassengers, price){
    //ES5
    numPassengers = numPassengers || 1;
    price = price || 199;

    const booking = {
        flightNum,
        numPassengers,
        price
    }
    console.log(booking); // {flightNum: "LH123", numPassengers: 1, price: 199}
    bookings.push(booking);

}

createBooking('LH123');

함수에서 매개변수가 없을 때는 undefined로 적용이 되기 때문에 만약 undefined 라면 ES5에서는 매개변수를 default value 로 재할당하기 위해 위와 같은 방법을 사용했습니다. ES5에서의 원리는 만약 매개변수가 없을 때는 undefined 상태인데 undefined 은 자바스크립트에서 false value로 설정되기 때문에 or operator로 인해서 second value로 넘어가게 됩니다. second value가 존재하기 때문에 default value로 설정이 가능합니다. 

 

ES6에서는 다른 방법으로 가능한데, 이 방법은 다음과 같습니다.

const bookings = [];

const createBooking = function(flightNum, numPassengers = 1, price = 199 * numPassengers){
    //ES5
    // numPassengers = numPassengers || 1;
    // price = price || 199;

    const booking = {
        flightNum,
        numPassengers,
        price
    }
    console.log(booking);
    bookings.push(booking);

}

createBooking('LH123'); // {flightNum: "LH123", numPassengers: 1, price: 199}
createBooking('Lh123', 2, 800); // {flightNum: "Lh123", numPassengers: 2, price: 800}
createBooking('Lh123', 2); // VM2114:13 {flightNum: "Lh123", numPassengers: 2, price: 398}
createBooking('Lh123', 5); // VM2114:13 {flightNum: "Lh123", numPassengers: 5, price: 995}

매개변수 안에 값이 없을 시 default value를 설정해줄 수 있습니다. 그렇게 된다면, 위와 같이 똑같은 결과를 얻을 수 있게 됩니다. 

만약 매개변수가 존재한다면 매개변수는 override 됩니다. 

이와 같은 매개변수 설정은 numPassengers = 1 같이 static하게도 설정할 수도 있지만 price = 199 * numPassengers 같이 dynamic하게 설정할 수도 있습니다.

 

 

또한 파라미터를 default로 설정하고 싶고 다른 파라미터를 skip해서 설정하고 싶다면 skip하고 싶은 파라미터에 undefined로 설정해주면 됩니다.

createBooking('Lh123', undefined ,5); // VM2114:13 {flightNum: "Lh123", numPassengers: 1, price: 995}