Mastering JavaScript Function Parameters: Defaults, Rest, and TDZ Explained

In JavaScript, functions are first‑class citizens that can be assigned, passed, and returned like any other value, making them central to the language.

Default Parameter Values

Simulating default parameters in ES5:

function makeRequest(url, time, callback) {
    time = (typeof time !== 'undefined') ? time : 2000;
    callback = (typeof callback !== 'undefined') ? callback : function () {
        // ...
    };
}

In ES6 you can declare defaults directly:

function makeRequest(url, time = 2000, callback = function () {}) {
    // ...
}

According to the ES6 specification, only

url

is required;

time

and

callback

are optional. All of the following calls are valid:

makeRequest('/foo');
makeRequest('/foo', 500);
makeRequest('/foo', 500, function() { /* ... */ });

Effect of Default Parameters on the arguments Object

function mixArgs(first, second) {
    console.log(first === arguments[0]);
    console.log(second === arguments[1]);
    first = 'c';
    second = 'd';
    console.log(first === arguments[0]);
    console.log(second === arguments[1]);
}

Result (non‑strict mode):

true
true
true
true

In non‑strict mode, changes to named parameters are reflected in the

arguments

object. In strict mode the linkage is broken:

function mixArgs(first, second) {
    'use strict';
    console.log(first === arguments[0]);
    console.log(second === arguments[1]);
    first = 'c';
    second = 'd';
    console.log(first === arguments[0]);
    console.log(second === arguments[1]);
}
mixArgs('a', 'b');

Result:

1
true
false
false
false

Temporal Dead Zone of Default Parameters

ES6

let

and

const

have a temporal dead zone (TDZ); default parameters share the same behavior. Parameters are bound before the function body runs, and they cannot be accessed until they are initialized.

function add(first = second, second) {
    return first + second;
}
add(1, 1);          // equivalent to let first = 1; let second = 1;
add(undefined, 1); // throws because <code>second</code> is not initialized when <code>first</code> is evaluated

Rest Parameters

Placing

...

before a named parameter makes it a rest parameter, which collects all remaining arguments into an array.

function pick(obj, ...keys) {
    let result = {};
    for (let i = 0; i < keys.length; i++) {
        result[keys[i]] = obj[keys[i]];
    }
    return result;
}

Example usage mimicking Underscore.js

pick()

:

var article = {
    title: 'js-函数',
    author: 'zh',
    age: '20'
};
console.log(pick(article, 'title', 'age'));

Result:

{ title: "js-函数", age: "20" }

The function’s

length

property counts only named parameters; rest parameters do not affect it (e.g.,

pick.length === 1

because only

obj

is counted).

Two constraints on rest parameters:

Only one rest parameter is allowed, and it must be the last parameter.

Rest parameters cannot be used in object literal setter definitions.

let object = {
    set a(...val) { // ❌ SyntaxError
        // ...
    }
};

In the next lesson we will discuss arrow functions. See you next time!