Default Parameters in JavaScript

Introduction

In JavaScript, functions can have default values, that is, receive a value in case one is not provided.

Default Parameters

We'll use a simple addition function as an example:

javascript

function sum(a, b) {
  return a + b;
}

sum(5, 5); // 10
sum(5, null); // 5
sum(5, undefined); // NaN 
sum(5, ''); // "5"
sum(5, 0); // 5

Normally, to transform invalid received values to 0, for example, one could do the following:

javascript

function sum(a, b) {
  // if 'a' is not valid, set to 0
  if (!a) {
    a = 0;
  }
  // if 'b' is not valid, set to 0  
  if (!b) {
    b = 0;
  }
  return a + b;
}

sum(5, 5); // 10
sum(5, null); // 5
sum(5, undefined); // 5
sum(5, ''); // 5
sum(5, 0); // 5

However, using default parameters we could transform that same function as follows:

javascript

// we define the default value of 'a' and 'b' equal to 0
function sum(a = 0, b = 0) {
  return a + b; 
}

sum(5); // 5    (5 + 0)
sum(5, undefined); // 5    (5 + 0)
sum(5, null); // 5    (5 + null)  
sum(5, ''); // "5"  (5 + '')
sum(5, 5); // 10   (5 + 5)
sum(5, 0); // 5    (5 + 0)

We see that default parameters are only applied on undefined parameters, so receiving null, 0 or '' will cause these values to be used instead.

Now another example with a 'Hello World!':

javascript

function helloWorld(name) {
  return 'Hello ' + name + '!';
}

helloWorld(); // 'Hello undefined!'
helloWorld(undefined); // 'Hello undefined!'
helloWorld(null); // 'Hello null!'
helloWorld(''); // 'Hello !' 
helloWorld('World'); // 'Hello World!'

If we don't send the appropriate parameters we end up with unexpected results, in this case Hello undefined!.

We can fix this using default parameters:

javascript

function helloWorld(name = 'World') {
  return 'Hello ' + name + '!';
}

helloWorld(); // 'Hello World!'
helloWorld(undefined); // 'Hello World!' 
helloWorld(null); // 'Hello null!'
helloWorld(''); // 'Hello !'
helloWorld('World'); // 'Hello World!'

We see that in case no parameter is sent (undefined), the function uses the default, in this case, 'World'. Although as mentioned earlier, default parameters only work if the received value is undefined. In the case of receiving 0, null or '' as a parameter, these values will be used instead.

Now let's see another example concatenating arrays:

javascript

function salad(fruits, vegetables) {
  return fruits.concat(vegetables);
}

salad(); // TypeError: Cannot read property 'concat' of undefined
salad(['grapes']); // ['grapes', undefined]

salad(['apple', 'pear'], []); // ['apple', 'pear']  
salad(['apple', 'pear'], ['lettuce', 'onion']); // ['apple', 'pear', 'lettuce', 'onion']

With default parameters:

javascript

function salad(fruits = [], vegetables = []) {
  return fruits.concat(vegetables);
}

salad(); //  []
salad(['grapes']); //  ['grapes'] 
salad(['apple', 'pear'], []); //  ['apple', 'pear']
salad(['apple', 'pear'], ['lettuce', 'onion']); //  ['apple', 'pear', 'lettuce', 'onion']

Default parameters can considerably simplify validations when creating functions. These can be of any type, that is, number, object, string, etc. even functions or previously defined default parameters.

Therefore this is totally valid:

javascript

function sum(a = 5, b = 3, c = a - b) {
  return a + b + c;
}

sum(); // 10	(5 + 3 + 2) 
sum(3); // 6	(3 + 3 + 0)
sum(10); // 20	(10 + 3 + 7)

function sum2(a = sum(10), b = 5) {
  return a + b;  
}

sum2(); // 25	(20 + 5)
sum2(10); // 15	(10 + 5)

Default Parameters in JavaScript ​

Introduction ​

Default Parameters ​

Default Parameters in JavaScript

Introduction

Default Parameters