Mastering ES6 Parameters: 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, adding rest parameters, default values, destructuring, and other features.

Note: This article is a translation of Faraz Kelhini’s work with added personal insights.

Background Introduction

With ES6, JavaScript gained many new features that make syntax clearer, improve efficiency and reliability, and aid future maintenance. Although adoption varies, tools like Babel allow ES6 code to run in older browsers, making ES6 a practical choice for modern development.

Concept Introduction

Arguments are the actual values passed to a function, similar to “actual parameters” in other languages and correspond to the

arguments

object. Parameters are the variable names declared in the function definition, akin to “formal parameters”. In JavaScript, arguments and parameters can differ in type and number.

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

In the example above,

10

,

20

,

30

are arguments, while

param1

and

param2

are parameters.

Spread Operator in Arguments

In ES5, developers often used apply() to pass an array as separate arguments, e.g., Math.max.apply(Math, myArray) . ES6 introduces the spread operator ( ... ) to achieve the same without apply() :

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

The spread operator can be used multiple times in a single call and mixed with regular arguments:

<code>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
</code>

It can also be used with constructors, e.g.,

new Date(...[2016, 5, 6])

, which replaces more complex ES5 patterns.

Rest Operator in Parameters

The same ... syntax used as a rest operator in function declarations collects remaining arguments into an array:

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

Rest parameters simplify functions that accept variable numbers of arguments and avoid the pitfalls of the

arguments

object.

<code>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
</code>

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

Default Parameters

ES5 emulated default values with logical OR or explicit checks, which could misinterpret falsy values like

0

or

null

. ES6 allows true default parameters that apply only when an argument is omitted:

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

Default values can be functions, and later defaults may reference earlier parameters:

<code>function getParam() {
  console.log('getParam was called');
  return 3;
}
function myFunction(a = getParam(), b = ++a, c = a * b) {
  console.log(c);
}
myFunction(); // logs 12 and shows the alert
</code>

Destructuring Parameters

Destructuring lets you map an object or array directly to variables, improving readability and allowing default values for individual properties:

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

Pass‑by‑Value vs. Pass‑by‑Reference

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

<code>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'; }
foo(obj);
console.log(obj.bar); // new value
</code>

Parameter Restrictions

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

<code>function throwError() { throw new Error('Missing parameter'); }
function foo(param1 = throwError(), param2 = throwError()) { /* ... */ }
foo(10, 20); // ok
foo(10); // throws Missing parameter
</code>

The arguments Object

ES6 retains the

arguments

object, which is array‑like but lacks array methods. You can convert it with

Array.from(arguments)

. In non‑strict ES5,

arguments.callee

existed but is deprecated in ES6.

Conclusion

ES6 introduces numerous improvements to JavaScript functions, including rest/spread operators, default parameters, and destructuring. These features enhance code clarity, reduce boilerplate, and are increasingly supported across modern browsers, making them essential tools for contemporary development.

References

How To Use Arguments And Parameters In ECMAScript 6

Optimization killers——Managing arguments