## DEV Community # 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
return a + b;
}

let firstValue = 3;
let secondValue = 5;

// firstValue and secondValue are arguments
``````

## 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 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];

``````

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,
};

``````

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,
};

``````

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;
}

``````

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;
}

``````

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;
}

``````

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;
}

``````

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

## ☕♨️ 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 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)

DEV Community

## 11 Tips That Make You a Better Typescript Programmer ### 1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

### #2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

...