JavaScript Introduction | Functions | Parameters and Arguments

Parameters

In JavaScript, when defining a function, you do not separately specify parameter types.
When calling a function, no type checking is performed on values passed as arguments.

Even if fewer arguments than the function definition are passed when calling a function, JavaScript does not throw an error, unlike other languages.
In this case, JavaScript automatically sets undefined for the remaining parameters that were not passed.

A parameter is a variable used in a function definition to pass received arguments into the function.
An argument is a value passed to a function when the function is called.

The following example passes different numbers of arguments to a function with three parameters.

function addNum(x, y, z) { // defines addNum() with three parameters: x, y, and z.
    return x + y + z;
}
addNum(1, 2, 3); // calls the function with arguments 1, 2, and 3. -> 6
addNum(1, 2);    // calls the function with arguments 1 and 2. -> NaN
addNum(1);       // calls the function with argument 1. -> NaN
addNum();        // calls the function without passing any arguments. -> NaN

In the example above, when fewer than three arguments are passed to addNum(), it returns NaN, meaning it cannot calculate the result.
This is because the remaining values that were not passed are automatically set to undefined, so arithmetic operations cannot be performed.

However, as in the following example, you can write a function that calculates normally using only the passed arguments without returning NaN.

function addNum(x, y, z) {
    if(x === undefined) // when the argument corresponding to x is not passed
        x = 0;          // changes the value of variable x from undefined to 0.
    if(y === undefined) // when the argument corresponding to y is not passed
        y = 0;          // changes the value of variable y from undefined to 0.
    if(z === undefined) // when the argument corresponding to z is not passed
        z = 0;          // changes the value of variable z from undefined to 0.
    return x + y + z;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0

arguments Object

If more arguments than the function definition are passed, the arguments that cannot be assigned to parameters cannot be referenced directly.
However, by using the arguments object, you can check the total number of arguments passed to the function and access each argument directly.

The arguments object stores the arguments passed when a function is called in an array-like form.
The first argument is stored in arguments[0], and the next argument is stored in arguments[1].
The total number of arguments is stored in the length property of the arguments object.

The addNum() function in the following example always performs a normal calculation regardless of the number of arguments passed.

function addNum() {
    var sum = 0;                                // declares variable sum to store the total.
    for(var i = 0; i < arguments.length; i++) { // repeats for the total number of received arguments.
        sum += arguments[i];                    // adds each received argument to sum.
    }
    return sum;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

The arguments object is only similar to an array and is not actually an Array object.
It has only numeric indexes and a length property, so not everything can be handled like an array.

Default Parameters and Rest Parameters

Parameters newly defined from ECMAScript 6 are as follows.

1. Default parameter
2. Rest parameter

Default Parameter

A default parameter means a default value used when a specified argument is not passed when calling a function.

In JavaScript, the default value of a parameter is set to undefined.

function mul(a, b) {
    // When only one argument is passed, set the remaining parameter to 1 instead of undefined.
    b = (typeof b !== 'undefined')  ? b : 1;
    return a * b;
}
mul(3, 4); // 12
mul(3);    // 3

However, default parameters let you change these default parameter values.

function mul(a, b = 1) { // If only one argument is passed, always sets the remaining parameter to 1.
    return a * b;
}
mul(3, 4); // 12
mul(3);    // 3

Default parameters are not supported in Internet Explorer, Safari, or Opera.

Rest Parameter

A rest parameter uses the ellipsis prefix (…) to specify all arguments from a specific position through the last argument at once.

The following example subtracts the second through last arguments from the first argument and returns the result.

function sub() {
    var firstNum = arguments[0];                  // From the first argument,
    for(var i = 0; i < arguments.length-1; i++) { // subtract the second through last arguments.
        firstNum -= arguments[i+1];
    }
    return firstNum;
}
sub(10, 2, 3);    // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4

However, using a rest parameter lets you define the sub() function more intuitively.

// Stores the first argument in variable firstNum and the remaining arguments in array restArgs.
function sub(firstNum, ...restArgs) {
    for(var i = 0; i < restArgs.length; i++) {
        firstNum -= restArgs[i];
    }
    return firstNum;
}
sub(10, 2, 3);    // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4

Rest parameters are not supported in Internet Explorer or Safari.

Web Browser Compatibility

The versions of major web browsers that support JavaScript default parameters and rest parameters are as follows.