Mastering ES6 Parameter Handling: Rest, Spread, Defaults, and Destructuring

ECMAScript 6 (or ECMAScript 2015) is the newest version of the ECMAScript standard and has remarkably improved parameter handling in JavaScript. We can now use rest parameters, default values and destructuring, among other new features.

PS: This article is mainly translated from Faraz Kelhini’s article (see reference 1) with some of the author’s own understanding added.

Background Introduction

With the arrival of ES6, JavaScript gained many new features that make syntax clearer, more concise, and improve efficiency and reliability, facilitating later extension and maintenance. Although many new features are not yet widely adopted, learning them helps apply ES6 in real projects. Browser support is optimistic, and tools like Babel can transpile ES6 to ES5 for compatibility, so using ES6 in development is worthwhile.

Concept Introduction

Arguments and Parameters are often used to describe function parameters, usually without distinction. For clarity, we define:

Arguments are the actual values passed to a function, similar to actual parameters in other languages and correspond to the arguments object inside a function’s scope.

Parameters are the variable names declared in the function definition, analogous to formal parameters in other languages. In JavaScript, Arguments and Parameters can differ in type (JavaScript is weakly typed) and quantity.

function foo(param1, param2) {
    // do something
}
foo(10, 20, 30);

In the example above, 10, 20, 30 are Arguments, while param1 and param2 are Parameters.

Spread Operator in Arguments

In ES5, we often used apply() to pass an array to a function, e.g., using Math.max() to find the maximum element of an array because the method does not accept an array directly.

var myArray = [5, 10, 50];
Math.max(myArray); // Error: NaN
Math.max.apply(Math, myArray); // 50

ES6 introduces the spread operator ( ... ), allowing arrays to be expanded into individual arguments without apply() :

var myArray = [5, 10, 50];
Math.max(...myArray); // 50

The spread operator can replace apply() , offering clearer semantics and flexibility, such as using it multiple times in a single call or mixing with regular arguments.

function myFunction() {
  for (var i in arguments) {
    console.log(arguments[i]);
  }
}
var params = [10, 15];
myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25

It can also be used directly in constructors:

new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Rest Operator in Parameters

The rest operator ( ... ) used in a function declaration collects unmatched arguments into an array (the “rest parameter”).

function myFunction(...options) {
    return options;
}
myFunction('a', 'b', 'c'); // ["a", "b", "c"]

When no arguments are passed, the rest parameter is an empty array. Using rest parameters simplifies functions with variable numbers of arguments compared to the arguments object, which is not a true array.

function checkSubstrings(string, ...keys) {
  for (var key of keys) {
    if (string.indexOf(key) === -1) {
      return false;
    }
  }
  return true;
}
checkSubstrings('this is a string', 'is', 'this'); // true

ES6 default parameters can only appear after regular parameters and at most one default parameter can be used per function declaration.

Default Parameters

ES5 does not support default parameters; developers often used logical OR or explicit checks, which can mis-handle falsy values like 0 or null. ES6 allows true default values that are applied only when the argument is undefined.

function foo(param1 = 10, param2 = 10) {
  console.log(param1, param2);
}
foo(); // 10 10
foo(0, null); // 0 null

Destructuring Parameters

Destructuring lets you map an object or array directly to variables, improving readability and conciseness. It can be combined with default values and used in function parameters.

function initiateTransfer({
    protocol = 'http',
    port = 800,
    delay = 150,
    retries = 10,
    timeout = 500,
    log = true
}) {
    // code to initiate transfer
}

Pass-by-Value vs. Pass-by-Reference

JavaScript always passes arguments by value. For primitive values, a copy is made, so modifications inside the function do not affect the original variable. For objects or arrays, the value is a reference to the memory region, so modifying properties or elements affects the original object.

var a = 5;
function increment(a) {
  a = ++a;
  console.log(a);
}
increment(a); // 6
console.log(a); // 5

var obj = { bar: 'value' };
function foo(param) {
  param.bar = 'new value';
}
console.log(obj.bar); // value
foo(obj);
console.log(obj.bar); // new value

Parameter Validation

Because JavaScript lacks static type declarations, functions can receive any type and number of arguments. To avoid runtime errors from missing or undefined parameters, you can validate arguments early or use default parameters that throw errors when required arguments are absent.

function throwError() {
    throw new Error('Missing parameter');
}
function foo(param1 = throwError(), param2 = throwError()) {
    // do something
}
foo(10, 20); // ok
foo(10); // Error: Missing parameter

arguments Object

ES6 retained the arguments object, which is not a true array but has a length property and index access. It lacks array methods, but you can convert it using Array.from(arguments) or Array.prototype.slice.call(arguments). In ES5 non‑strict mode, arguments.callee existed, but it is deprecated in strict mode and ES6.

Conclusion

ES6 brings hundreds of improvements to JavaScript, and developers are increasingly using these new features. This article summarized how ES6 enhances parameter handling, but many other exciting features remain to be explored.

References

How To Use Arguments And Parameters In ECMAScript 6

Optimization killers——Managing arguments