default parameters vs OR operator

Written byPhuoc Nguyen

Created

23 Aug, 2023

#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.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

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