DEV Community

Cover image for 6-ES6++: Function Parameters
Hasan Zohdy
Hasan Zohdy

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

multiply(undefined, 10); // 20
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

add(undefined, 1, 2, 3); // 21
Enter fullscreen mode Exit fullscreen mode

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.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (0)