Parameter vs argument
const example = (parameter) => alert(parameter)
example(argument)
Comma separated arguments The most common way to pass parameters to a function is to put them inside parenthesis separated by comma.
function mail(msg, to) {
return '"' + msg + '" sent to "' + to + '"'
}
mail('Hello', 'John@mail.com') // "Hello" sent to "John@mail.com"
Default values inside function We can assign default values inside a function.
function mail(msg, to) {
msg = msg || 'Hello'
to = to || 'John@mail.com'
return '"' + msg + '" sent to "' + to + '"'
}
mail() // "Hello" sent to "John@mail.com"
mail('Bye') // "Bye" sent to "John@mail.com"
mail('Bye', 'Kris@mail.com') // "Bye" sent to "Kris@mail.com"
Default values in parenthesis Or we can assign default values right in parenthesis.
function mail(msg = 'Hello', to = 'John@mail.com') {
return '"' + msg + '" sent to "' + to + '"'
}
Parameters in array We can pass arguments by spreading array values.
const arr = ['Hello', 'John@mail.com']
mail(...arr) // "Hello" sent to "John@mail.com"
Unlimited number of arguments More parameters than supposed can be passed. Function will take only first ones.
mail('Hi', 'John@mail.com', 1, 2, 3) // "Hi" sent to "John@mail.com"
arguments object All arguments are accessed within function inside a special iterable arguments variable. In arrow function arguments variable doesn't exist.
function func() { return arguments }
func(1, 2, 3) // [Iterator] 0: 1, 1: 2, 2: 3
const func = () => arguments
func(1, 2, 3) // arguments is not defined
Arguments in object Pass arguments to a function separated by comma is ok, but we have to remember the sequence of arguments. Instead we can pass arguments in an object.
function mail(obj) {
return '"' + obj.msg + '" sent to "' + obj.to + '"'
}
mail({ msg: 'Hello', to:'John@mail.com' }) // "Hello" sent to "John@mail.com"
mail({ to:'John@mail.com', msg: 'Hello' }) // "Hello" sent to "John@mail.com"
Destructure object in place Object can be destructed.
function mail({ msg, to }) {
return '"' + msg + '" sent to "' + to + '"'
}
mail({ msg: 'Hello', to:'John@mail.com' }) // "Hello" sent to "John@mail.com"
Object with default parameters And default values can be assigned.
function mail({ msg = 'Hello', to = 'John@mail.com' }) {
return '"' + msg + '" sent to "' + to + '"'
}
mail({}) // "Hello" sent to "John@mail.com"
mail({ msg: 'Bye' }) // "Bye" sent to "John@mail.com"
mail() // Cannot read property 'msg' of undefined
Destructuring assumes that function has an argument. If we want all values by default, then we should specify an empty object.
function mail({ msg = 'Hello', to = 'John@mail.com' } = {}) {
return '"' + msg + '" sent to "' + to + '"'
}
mail() // "Hello" sent to "John@mail.com"
But it looks bulky and there is a more straight forward approach. The best approach
function mail(args){
let defaults = { msg: 'Hello', to: 'John@mail.com' };
let params = {...defaults, ...args};
const { msg, to } = params;
return '"' + msg + '" sent to "' + to + '"'
}
mail({}) // "Hello" sent to "John@mail.com"
mail({ msg: 'Bye' }) // "Bye" sent to "John@mail.com"
mail() // "Hello" sent to "John@mail.com"
Or even shorter.
function mail(args){
const { msg, to } = { msg: 'Hello', to: 'John@mail.com', ...args};
return '"' + msg + '" sent to "' + to + '"'
}