Javascript – Default Parameters in Functions

Default Parameters was introduced in Javascript ES6

Functions are really amazing in javascript as they allow to pass any number of parameters regardless of the numbers of parameters declared. Thus there is a need to handle function with default parameters.

Before ES6

Earlier, the function parameters by default was undefined. To handle them we had to check the parameters and assign values if they were undefined.

function increment(value, by) {
	by = (typeof by === 'undefined') ? 1 : by;
	return value + by
}

console.log(increment(2,2)); // 4
console.log(increment(2)); // 3

If we have not checked and assigned the value for by then it would have returned NaN While this approach is good, but imagine we have more parameters and we have to check for every parameters and assign value to it. It will get quite lengthy.

With ES6

With default parameters introduced in ES6, we can assign the default values in the function head itself.

function increment(value, by=1) {
	return value + by;
}
console.log(increment(2,2)); // 4
console.log(increment(2)); // 3

The default value is assigned only to the undefined parameters not to the other falsy values.

console.log(increment(2, undefined)); // 3
console.log(increment(2, '')); // 2
console.log(increment(2, null)); // 2

Passing Function, Arrays and Objects

We can also set default parameters to be function, arrays and objects in javascript.

function store(num = add(1), b = [], c = {}) {
	b.push(num);
	c[num] = b;
	return c;
}

function add(num) {
	return num + 1;
}

console.log(store()); // {2: Array(1)}

Passing Existing parameters

We can also set the existing parameters as the default value. The left parameters can be used as default parameters for its right parameters.

Parameters defined earlier (to the left) are available to later default parameters:

function greet(name, greeting, message = `${greeting} ${name}`) {
	return [name, greeting, message];
}

greet("Sujay", "Hi"); // ["Sujay", "Hi", "Hi Sujay"];
greet("Sujay", "Hi", "Happy Birthday!"); // ["Sujay", "Hi", "Happy Birthday!"]

function double(first, second = first) {
	return first + second;
}
console.log(double(10)); // 20

Default Values are evaluated at call time

Every time a new object is created when the function is called.

function store(num, arr = []) {
	arr.push(num);
	return arr;
}

console.log(store(10)); // [10]
console.log(store(11)); // [11]

This also applies for the functions and variables

function add(num) {
	return num + 1;
}

function increment(value = add(1)) {
  return value;
}

console.log(increment()); // 2
console.log(increment()); // 2

Default parameters with arguments object

In non-strict mode, the arguments objects are updated as the parameters values updates to reflect changes. However with strict mode this can be prevented.

function test(input) {
	console.log(input === arguments[0]);
	input = 'different';
	console.log(input === arguments[0]);
}

test();
// true
// true

Destructured values with default parameters

We can set the default parameters with destructuring. We will use => function.

let calculate = (quantity, price = 10, tax = 0.15) => {
	return quantity * price * tax;
}

console.log(calculate(10)); // 15
console.log(calculate(10, 11)); // 16.5
console.log(calculate(10, undefined, 0.5)); // 25

In the third console, we had to pass undefined to the second parameter to use the default value. This is acceptable, but it is not so nice.

We can improve this with destructuring.

let calculate = (quantity, price = 10, tax = 0.15) => {
	return quantity * price * tax;
}
console.log(calculate({ quantity: 10 })); // 15
console.log(calculate({ quantity: 10, price: 11})); // 16.5
console.log(calculate({ tax: 0.25, quantity: 10 })); // 25

We can pass the parameters in any order using destructing, javascript knows how to match them.

Destructured parameter with default value assignment

We can use default value assignment with the destructuring assignment syntax.

We can set an empty object/array as the default value for the destructured parameter;

for example: [x = 1, y = 2] = []. This makes it possible to pass nothing to the function and still have those values prefilled:

funtion preFilledArray([x = 1, y = 2] = []) {
	return x + y;
}

preFilledArray(); // 3
preFilledArray([]); // 3
preFilledArray([2]); // 4
preFilledArray([2, 3]); // 5

// works the same for objects:
function preFilledObject({ z = 3 } = {}) {
	return z;
}

preFilledObject(); // 3
preFilledObject({}); // 3
preFilledObject({ z: 2}); // 2