6-ES6++: Function Parameters
Tags: javascript, es6, esnext
Published: 2022-11-18 04:23:03

---
title: 6-ES6++: Function Parameters
published: true
description: 
series: es6++
tags: javascript, es6, esnext
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9eombdni1ijxtkkz81o.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## 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:

```js
// 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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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

```js
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.

```js
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.

```js
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.

```js
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.

## ☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may [buy me a coffee](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/pb2vmdfhGf) 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

* [Event Driven Architecture: A Practical Guide in Javascript](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)