JS ES6 Default Parameter with examples

JavaScript

In this post, We will go through the JS ES6 Default Parameter with examples.

What is use of default function Parameter

By default the value of the function parameter in javascript is undefined.

Before ES6, There used to be a general way of setting the default value. Which was to check parameter values in the function body, and assign them value if there are undefined. But with this approach, the problem arises if we did not check the default value for function parameters.

Let us understand with an example

function sum(x, y) {
console.log('y value is = '+y)
  return x+ y
}  
sum(5)

Output

y value is = undefined
NaN

How does it works

Here, We did not pass a value for parameter ‘y’, so it is evaluated as undefined during calling the Sum() function. So a+b returning the NaN.

It is not the expected output. default function parameter in ES6 is used to overcome this problem, Before ES6, we used to solve this problem in the following way.

By Checking the default value of the variable in the function body, if values are undefined, assigning a default value to them.

Here is an example

function sum(x, y) {
  y = typeof y !== 'undefined' ? y : 10;
  return x+y;
}

 console.log('Sum is =') 
sum(5)

Output

sum is = 15

What is JS ES6 default parameter?

In ES6 there is a simple way to pass the default function parameter value by using the default function parameter.

The default parameter is a feature introduced in ES6. It makes us named parameters to be initialized with a default value if no values or undefined are given.

Syntax

fuction fun_name(parameter = defaultvalue,parametern=defaultvaluen)
{
//code here
}

Parameters in Default Parameters

  • Parameter : It is the variable name
  • Default value: The default value is used if you don’t pass value during function call or pass Unsigned value.

Some Example using Default Parameter

1. Passing some value,no value,undefined to function

Example Explanation

In the below example, we are passing default values for sum function parameters x,y.

  • At the first time, we are passing values for both arguments sum(5,3).
  • The second time, we did not pass the values of both parameters in the sum() function. Therefore it returns the sum of default values.
  • At last, If we are passing undefined in Sum(undefined) function for both parameters, still the values for function parameters are defaults.
function sum(x=8, y=2) {

  return x+y;
}

 console.log('Sum is ='+sum(5,3)) //passed some value
// no value pass default value use
console.log('deafult values sum = '+sum()) 
//pass undefined
console.log('passing undefined values = '+sum(undefined))

Output

Sum is = 8
deafult values sum = 10
passing undefined values = 10

2. Passing falsy values as function argument

There are 8 falsy values in JavaScript that we can use.

  • false
  • 0
  • 0n: 0 as a BigInt
  • ‘ ‘ Empty string
  • null
  • undefined
  • NaN

In the cases where falsy values are passed as function parameter at calling time, falsy values are considered over default values

  • At the first time,we are passing value(‘ ‘) to first arguments to sum(”).It consider falsy value over deafult.
  • For the second time, we are passing value null to the first arguments to sum(null). It considers falsy value over default.
function sum(x=8, y=2) {

  return x+y;
}

console.log('passing empty string as falsy value = '+sum(''))
console.log('passing null as falsy values = '+sum(null))

Output

passing empty string as falsy value = 2
passing null as falsy values = 2

3. Default parameter behavior at call time

The default parameter is evaluated at call-time which means the object is created every time we call the function

  • We are appending the new element in the array inside the function add()
  • At first, call the function the add(1),
  • Second, call the function with add(2).
  • The output should be [1,2] However, the output is [2]
  • Because it creates a new array object at the call-time and appends element.
function add(element, array = []) {
  array.push(element)
  return array
}

add(6) //[6]
add(7)  //7 not [6,7]

Output

[7]

4. Using function parameter as default value

The value provided for the left parameters can be used for later parameters as the default value to evaluate an expression.

function calculate_salary(hourworked,Payrate, hourlypay=hourworked, salary = Payrate * hourlypay) {
  return salary;
}

console.log('Total salary = '+calculate_salary(12.0,60.0))

Output

Total salary = 720

5. Function return values as a default value

A function return values can be used for parameter default values for another function.

Here is the example for same

let Payrate = () => 800.0;
function calculate_salary(hourworked, hourlypay=hourworked, salary = Payrate() * hourlypay) {
  return salary;
}

console.log('Total salary = '+calculate_salary(12.0))

Output

Total salary = 9600

Related Posts