Parameter handling in ES6 gets improved a lot and makes developers life easy. We will see how it got better against ES5
Default parameter values
In ES5 it was quite complicated to set a default value to a function parameter if no value passed for that. Normally we checked that parameter defined or not and if undefined then we set it to default value like
function myFunc(name, age, sex){ if(name === undefined) name = 'Jon Doe'; if(age === undefined) age = 18; if(sex === undefined) sex = 'Male'; return name+' is a '+age+' years old '+sex; } myFunc() => "Jon Doe is a 18 years old Male" myFunc('Junior Doe', 5) => "Junior Doe is a 5 years old Male" myFunc('Jane Doe', 49, 'Female') => "Jane Doe is a 49 years old Female"
Or like
function myFunc(name, age, sex){ var name = name || 'Jon Doe'; var age = age || 18; var sex = sex || 'Male'; return name+' is a '+age+' years old '+sex; } myFunc() => "Jon Doe is a 18 years old Male" myFunc('Junior Doe', 5) => "Junior Doe is a 5 years old Male" myFunc('Jane Doe', 49, 'Female') => "Jane Doe is a 49 years old Female"
In ES6 we don’t need to check the parameter and then set it default value. We can do it directly in function definition like
function myFunc(name = 'Jon Doe', age = '18', sex = 'Male'){ return name+' is a '+age+' years old '+sex; } myFunc() => "Jon Doe is a 18 years old Male" myFunc('Junior Doe', 5) => "Junior Doe is a 5 years old Male" myFunc('Jane Doe', 49, 'Female') => "Jane Doe is a 49 years old Female"
Passing undefined
In function if all parameters values are set to default but if we want to use few arguments default value.
Like
function myFunc(name = 'Jon Doe', age = '18', sex = 'Male')
We want to call this function with name and sex and want age to be default value then we need to pass undefined (not null). undefined always replace with default value if any.
myFunc('Jane Doe', undefined, 'Female') => "Jane Doe is a 18 years old Female"
Call time evaluation
All default arguments get evaluated while function called and new object gets created for each call like.
function fruits(name, all = []){ all.push(name); return all; } fruits('apple') => ['apple'] fruits('mango') => ['mango'] not ['apple', 'mango']
Defaults are available to next defaults
Parameters already fetched are available to next default parameters
function fruits(fruits, fewFruits = 'Few '+fruits, manyFruits = 'Many '+fruits){ return [fruits, fewFruits, manyFruits]; } fruits('Mangoes') => ['Mangoes', 'Few Mangoes', 'Many Mangoes']
Rest Parameters
Each function has its own arguments array. arguments array created automatically inside each function and contains all parameters passed to function.
function myFunc(name, age) myFunc('Jon Doe', 24)
Here myFunc arguments will contain name and age both. We can loop through arguments and get all values.
function myFunc(name, age) myFunc('Jon Doe', 24, 'Female', 'Hispanic', 'French')
In above call we passed 3 extra parameter for sex, ethnicity and language. Though myFunc function doesn’t has any named parameter for those extra parameters, we can’t access those values directly. We can get those from arguments.
Here arguments contains all named as well as unnamed parameters. If we want to retrieve all unnamed parameters then there are no direct way to get in ES5. Only way to get it by slicing arguments
function myFunc(name, age){ var extras = Array.prototype.slice.call(arguments, myFunc.length); //or // var extras = Array.prototype.slice.call(arguments, 2); return extras; } myFunc('Jon Doe', 24, 'Female', 'Hispanic', 'French') => ['Female', 'Hispanic', 'French'] NOTE: functionName.length returns the number of parameters that function expects.
In ES6 a new property introduced called rest parameters which holds all unnamed parameters only like
function myFunc(name, age, ...extras){ return extras; } myFunc('Jon Doe', 24, 'Female', 'Hispanic', 'French') => ['Female', 'Hispanic', 'French']
Example
Here we are taking an example, calculation power of numbers where first parameter is the power and second the rest parameter which contains an array of elements.
function power(power, ...theArgs) { return theArgs.map(function (element) { return Math.pow(element, power); }); } power(2,1,2,3,4,5) => [1,4,9,16,25] power(3,1,2,3,4,5) => [1,8,27,64,125]
Better Examples
If a functions expects few parameters then while we call that function, we can’t pass all parameters in an array, need to pass individually like
function myFunc(name, age, sex) var args = ['Jon Doe', 24, 'Male']; myFunc(args) //doesn't work
function myFunc(name, age, sex) var args = ['Jon Doe', 24, 'Male']; myFunc(args[0], args[1], args[2]) // works myFunc.apply(null,args) // works
In ES6 it’s like
function myFunc(name, age, sex) var args = ['Jon Doe', 24, 'Male']; myFunc(...args) //works
function myFunc(name, age, sex, ethnicity, language) var args = [ 24, 'Male', 'Hispanic']; myFunc('Jon Doe', ...args, 'French') //works