6-ES6++: Function Parameters

Function Parameters

Function parameters are the variables that are passed to the function when it is called. In ES6 we have some new ways to define function parameters.

But before we go there, let's review some points first.

Parameters VS Arguments

Parameters are the variables that are defined in the function definition, which means the variables that in the function definition are called parameters.

In the other hand, arguments are the values that are passed to the function when it is called. So, the values that are passed to the function when it is called are called arguments.

Let's see an example:

// a,b are parameters
function add(a, b) {
  return a + b;
}

let firstValue = 3;
let secondValue = 5;

// firstValue and secondValue are arguments
add(firstValue, secondValue);

Function Default Parameters

In ES6 we can set default values for function parameters. This is useful when we want to have a default value for a parameter if the user does not provide one.

function multiply(a, b = 5) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // 25

Here we set the default value of second parameter to 5. If we call the function with only one parameter, the second parameter will be 5.

We can define default values for all parameters. If we call the function with no parameters, all parameters will have their default values.

function multiply(a = 2, b = 5) {
  return a * b;
}

multiply(); // 10

You know what, if you passed the first argument with undefined it will use the default value.

multiply(undefined, 10); // 20

Rest Parameters

Before ES6 we could not pass an arbitrary number of arguments to a function. We had to define the number of arguments in the function definition.

function add() {
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }

  return result;
}

This can be used normally with normal functions, however, arrow functions do not have their own arguments object. So, we can not use this method with arrow functions.

Thankfully, ES6 introduced rest parameters to solve this problem. Rest parameters are the parameters that are defined with ... before the parameter name.

function add(...numbers) {
  let result = 0;
  for (let i = 0; i < numbers.length; i++) {
    result += numbers[i];
  }

  return result;
}

It can also be used after defining other parameters.

function add(a, b, ...numbers) {
  let result = a * b;
  for (let i = 0; i < numbers.length; i++) {
    result += numbers[i];
  }

  return result;
}

add(2, 3, 4, 5, 6); // 40

In that sense, we will multiply the first two arguments and then add the rest of the arguments.

Spread Operator

Spread operator is the opposite of rest parameters. It is used to pass an array as
arguments to a function.

function add(a, b, c) {
  return a + b + c;
}

let numbers = [1, 2, 3];

// without using spread operator
add(numbers[0], numbers[1], numbers[2]); // 6

// using spread operator
add(...numbers); // 6

See? much easier and cleaner.

Destructuring Parameters

Destructuring parameters is a way to pass an object as arguments to a function.

Let's first see the normal way of passing an object as arguments to a function.

function add(numbers) {
  return numbers.a + numbers.b + numbers.c;
}

let numbers = {
  a: 1,
  b: 2,
  c: 3,
};

add(numbers); // 6

Now when we use destructuring parameters, we can pass the object directly.

function add({ a, b, c }) {
  return a + b + c;
}

let numbers = {
  a: 1,
  b: 2,
  c: 3,
};

add(numbers); // 6

In the example above, we can use the object destructuring syntax to define the parameter instead of using numbers.a, numbers.b, and numbers.c.

Using variable outside function as default parameter

We can use other variables outside the function as default parameters.

let defaultFirstNumber = 2;
let defaultSecondNumber = 3;

function add(a = defaultFirstNumber, b = defaultSecondNumber) {
  return a + b;
}

add(); // 5

Here we used defaultFirstNumber and defaultSecondNumber as default parameters.

This can be used also with object destruction as well, we can use other variables outside the function as default parameter

let defaultNumbers = {
  a: 2,
  b: 3,
};

function add({ a, b } = defaultNumbers) {
  return a + b;
}

add(); // 5

Now we used defaultNumbers as default parameter for the function first parameter.

Mixing Default Parameters, Rest Parameters, and Destructuring Parameters

We can also mix default parameters, rest parameters, and destructuring parameters.

Let's first see how to use both object destructuring and default parameters.

function add({ a, b, c } = { a: 1, b: 2, c: 3 }) {
  return a + b + c;
}

add(); // 6

Here we didn't send any arguments to the function thus it used the default value automatically.

Now let's see how to mix 'em all.

function add({ a, b, c } = { a: 3, b: 5, c: 10 }, ...numbers) {
  let result = a + b + c;
  for (let i = 0; i < numbers.length; i++) {
    result += numbers[i];
  }

  return result;
}

add(); // 18

Passing undefined as the first argument will use the default value.

add(undefined, 1, 2, 3); // 21

In the previous example, we ignored the first argument by passing undefined to it, then we passed the numbers that will be grouped in numbers array which is the rest parameter.

🎨 Conclusion

In this article, we learned about the different ways of passing arguments to a function. We learned about default parameters, rest parameters, spread operator, and destructuring parameters.