How do you create a default parameter in JavaScript?

In JavaScript, you can create default parameters for functions. Default parameters allow you to specify a value for a parameter if no argument is passed to the function or if the argument is undefined.

There are a few different ways to create default parameters in JavaScript. Here are some examples using code snippets:

1. Using the OR operator (||)

One way to create a default parameter is to use the OR operator (||). If the parameter is falsy (i.e., null, undefined, 0, false, or ''), the value on the right-hand side of the operator is used instead.

function sayHello(name) {
  name = name || "World";
  console.log(`Hello, ${name}!`);
}

sayHello(); // Output: Hello, World!
sayHello("John"); // Output: Hello, John!

In this example, if no argument is passed to the sayHello function, the name parameter is undefined, which is falsy. Therefore, the name variable is set to the default value of 'World'. If an argument is passed, such as 'John', the name variable is set to that value instead.

2. Using the ternary operator (? :)

Another way to create a default parameter is to use the ternary operator (? :). This allows you to specify a default value if the parameter is falsy and a different value if it is truthy.

function sayHello(name) {
  name = name ? name : "World";
  console.log(`Hello, ${name}!`);
}

sayHello(); // Output: Hello, World!
sayHello("John"); // Output: Hello, John!

In this example, if no argument is passed to the sayHello function, the name parameter is undefined, which is falsy. Therefore, the name variable is set to the default value of 'World'. If an argument is passed, such as 'John', the name variable is set to that value instead.

3. Using default function parameters

In ES6, you can use default function parameters to specify default values for function parameters. This syntax is more concise and easier to read than the previous two examples.

function sayHello(name = "World") {
  console.log(`Hello, ${name}!`);
}

sayHello(); // Output: Hello, World!
sayHello("John"); // Output: Hello, John!

In this example, the name parameter is given a default value of 'World' when the function is defined. If an argument is passed to the function, such as 'John', the name variable is set to that value instead.

4. Using destructuring assignment

You can also use destructuring assignment to specify default values for function parameters. This is useful if you want to use a different variable name for the parameter than the argument that is passed to the function.

function sayHello({ name = "World" } = {}) {
  console.log(`Hello, ${name}!`);
}

sayHello(); // Output: Hello, World!
sayHello({ name: "John" }); // Output: Hello, John!

In this example, the first sayHello function takes an object as its parameter. The object has a name property, which is assigned a default value of 'World' if it is not specified.

5. Combining default parameters and rest parameters

You can use default parameters and rest parameters together to create a function that can take any number of arguments, with some of them having default values.

function concatenate(separator = ",", ...strings) {
  return strings.join(separator);
}

console.log(concatenate(";", "hello", "world")); // Output: hello;world
console.log(concatenate(undefined, "hello", "world")); // Output: hello,world
console.log(concatenate()); // Output:

In this example, the concatenate function takes a separator parameter, which defaults to ','. It also takes a rest parameter called strings, which collects all of the arguments after the separator. The function then uses the join method to join the strings together with the separator. If no arguments are passed to the function, an empty string is returned.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.

Read more: