const - JS | lectureA Closer Look At Functions

We will start this new section with one of the easiest parts: default parameters. So sometimes, it's useful to have functions where some parameters are set by default. This way, we do not have to manually pass them in if we don't want to change the default.

We are going to start by creating a very basic booking function. That is, with no default parameters—just a normal function that requires three parameters: flightNumber, numberOfPassengersand price.

function createBooking(flightNumber, numberOfPassengers, price) {
  //...
}

Let's now use the data passed to our parameters to create an object and push that into some booking array.

const bookings = [];

function createBooking(flightNumber, numberOfPassengers, price) {
  const booking = {
    flightNumber,
    numberOfPassengers,
    price,
  };
  console.log(booking);
  bookings.push(booking);
}

Let's now try to create a booking without passing some parameters and see what happens.

createBooking('AA1234');

From the above result, we can see that the value of numberOfPassengers and price are set to undefined because we didn't specify them. We can now use short-circuiting to our advantage because, numberOfPassengers and price are falsy values. I will start by showing you the old way of setting default parameters so that you can have an idea of how it was done before ES6.

Let's say we wanted to set the number of passengers to one by default. Before ES6, we would reassign the numberOfPassengers parameter like this:

// ES5 way of setting default parameters
function createBooking(flightNumber, numberOfPassengers, price) {
  // 1 is the default value for numberOfPassengers
  numberOfPassengers = numberOfPassengers || 1;
  //...
}

This solution works because of the reasons we learned in the previous lectures. That is whenever numberOfPassengers is falsy, which undefined is, it will be set to 1. We can of course do the same thing with price.

// ES5 way of setting default parameters
function createBooking(flightNumber, numberOfPassengers, price) {
  numberOfPassengers = numberOfPassengers || 1;
  price = price || 100;
  //...
}

If we now reload our page, we can see that the default values are set.

However, this is not the best way to do it. We can do better using ES6's default parameters and still obtain the same result.

// ES6 way of setting default parameters
function createBooking(flightNumber, numberOfPassengers = 1, price = 100) {
  //...
}

Now, we can override the default values by passing in the parameters.

createBooking('AA1234', 2, 200);

One thing that's very cool about default parameters is that it can contain any expression. For example, we can have something like this:

function createBooking(
  flightNumber,
  numberOfPassengers = 25 * 0.85,
  price = 100
) {
  //...
}

What's even more cool is that we can use the values of other parameters to evaluate the values of other parameters. For example, we can have something like this:

function createBooking(
  flightNumber,
  numberOfPassengers = 25 * 0.85,
  price = 100 * numberOfPassengers // Price calculated based on number of passengers
) {
  //...
}

createBooking('AA1234', 18);
createBooking('AA1234', 5);

Note that when using another parameter to evaluate the value of another parameter, order matters.

function createBooking(
  flightNumber,
  price = 100 * numberOfPassengers //This will not work because when JavaScript reaches price, it doesn't know what numberOfPassengers is yet.
  numberOfPassengers = 25 * 0.85,
) {
  //...
}

Another thing we have to note here is that we cannot skip arguments when we call a function. That is, let's say we want to leave the number of passengers with its default value and only pass in the flight number and price. Doing the below will not work:

createBooking('AA1234', 1000);

The above function call sets the number of passengers to 1000, but it doesn't set the price. Bcause the second argument will always be mapped to the second parameter. So, if we want to leave the second parameter with its default value, ther is a nice trick to use.

All we have to do is to set the second argument to undefined. THis works because setting the parameter to undefined is the samething as not even setting it.

createBooking('AA1234', undefined, 1000);