default parameters vs OR operator

Written byPhuoc Nguyen

#Default parameters

Default parameters are a cool new feature in JavaScript that lets you set a default value for a function parameter right in the function signature. This means that if you don't pass a value for that parameter when you call the function, it'll just use the default value instead. Easy peasy!

Let me give you an example:

sayHello.js

const sayHello = (name = 'World') => {
  console.log(`Hello, ${name}!`);
};

sayHello();                 // `Hello, World!`
sayHello("Phuoc Nguyen");   // `Hello, Phuoc Nguyen!`

In JavaScript, a parameter's default value is `undefined`. What does this mean for you? Well, if you don't pass any arguments into the function, the parameters will default to `undefined`.

This is an alternative version of the `sayHello` function that doesn't use default parameters.

sayHello.js

const sayHello = (name) => {
  console.log(`Hello, ${name}!`);
};

sayHello();         // `Hello, undefined!`
sayHello("World");  // `Hello, World!`

#OR operator

The OR (`||`) operator is not just for logical operations. It can also be used to set default values for function parameters. This operator returns the first truthy value it encounters.

However, if the first value is falsy (e.g. `undefined`, `null`, `false`, `0`, `""`, or `NaN`), it will return the second value.

Let's modify the `sayHello` function above using the `||` operator:

sayHello.js

const sayHello = (name) => {
    const withDefaultName = name || 'World';
    console.log(`Hello, ${withDefaultName}!`);
};

sayHello();                 // `Hello, World!`
sayHello("Phuoc Nguyen");   // `Hello, Phuoc Nguyen!`

#What makes them different?

One key distinction between default parameters and the `||` operator is that default parameters only work with function parameters, while the `||` operator can be utilized for any variable.

Another difference to consider is that default parameters are more explicit about their intention. In the function signature, it's clear that a default value will be used if an argument isn't passed in. On the other hand, the `||` operator can be confusing, especially if it's used in a complex expression.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

default parameters vs OR operator