JavaScript: Default & Rest Parameters

◄Page 26►

Default & Rest Parameters

Introduction

Learn about JavaScript parameters, arguments, value arguments, reference arguments, default and rest parameters. Read source code and try test examples.

JavaScript value arguments remain unchanged outside a calling function. JavaScript reference argument properties may change within a calling function and remain changed outside a calling function.

Default and rest parameters were implemented with JavaScript version ES6, also known as ECMAScript 6 and ECMAScript 2015.

Default parameters allow developers to assign default values to arguments in a formal function call.

Rest parameters provide a convenient method to pass an array, of indefinite length, as a function argument.

Declare both default and rest parameters as the last parameter, or last set of parameters, in the function signature's parameter list.

Parameters

Parameters are names listed between parenthesis in a formal function definition. Arguments are values passed to a function between parenthesis, during a function call. Arguments are either passed by value or by reference.

Pass by Value

Primitive variables in JavaScript are passed to functions by value. Functions can read the value of a variable yet they can't change the value of the variable outside of the function itself. When a function exits, the original variable's unchanged.

Tap a Box

See functions testVal() and fChangeValue() within JavaScript file default-rest.js.

Side Note

Inside a function you can change the value of a primitive argument. However outside the function, the primitive argument remains unchanged.

function testValue(sId,v){
var val = v;
fChangeValue(sId,val,'Doris');
var s  =  '<br>val OUTSIDE FUNCTION: '+val;
document.getElementById(sId).innerHTML += s;
}

function fChangeValue(sId,val,sChange){
let e = getElement(sId);
val = sChange
e.innerHTML = "val INSIDE FUNCTION: " + val;
}

Pass by Reference

Objects in JavaScript are passed to functions by reference. Functions can read values of reference properties. Functions can change values of reference properties. Once a property changes inside a function it remains changed outside the function.

Side Note

Inside a function you can change the value of a reference, not just the reference property. However outside the function, the reference remains unchanged.

Tap a Box

The following two buttons use functions testRef(), fRefChangeObject() and fRefChangeProperty() from JavaScript file default-rest.js

Red Box

The red box calls function fRefChangeProperty() which successfully changes the value of a reference property. Once modified, the property has changed outside of the calling function.

Blue Box

The blue box calls function fRefChangeObject() which unsuccessfully changes the value of a reference itself. The reference remains unchanged outside of the calling function.

function fRefChangeProperty(sId,fRef,sName){
let e = getElement(sId);
sRef.sName = sName;
e.innerHTML = "INSIDE FUNCTION value of sName PROPERTY: " + sRef.sName;
}

function fRefChangeObject(sId,fRef,sName){
let e = getElement(sId);
fRef = sName;
// Did the reference change?
e.innerHTML = "INSIDE FUNCTION value of reference: " + fRef;
}

Default Parameters

Default parameters enable the programmer to declare function parameters while simultaneously assigning default values to those parameters. When the function's called, the user can manually supply new values to replace the default values. Optionally when the function's called, the user can leave default values in place.

One Default Value

The following formal function signature includes a default value for the last parameter, y. When you call function fDefaultMultOneArg() with values for arguments sId and x, but not y, then y always equals 5. However you can call fDefaultMultOneArg() with unique arguments for sId, x and y.

Two Default Values

The following formal function signature includes default values for the last two parameters, y and z. If you call function fDefaultMultTwoArgs() with values for arguments sId and x, but not y and z, then y always equals 5 and z always equals 10. However you can call fDefaultMultTwoArgs() with unique arguments for sId, x, y and z.

Last Parameter

Apply default parameter values to the last parameter, or set of parameters, in a parameter list. For example the following formal function signature would generate errors because parameter sId does not have a default value.

Function Examples

function fDefaultMultOneArg(sId,x,y = 5)

Function fDefaultMultOneArg(sId,x,y=5) multiplies parameters x and y. The parameter sId is a string identifier to an HTML element. The product displays toward the bottom of the button you tap, in the HTML element supplied through argument sId.

You must supply values for sId and x. Either supply a value for y or multiply x by five.

function fDefaultMultTwoArgs(sId,x,y=5,z=10)

Function fDefaultMultTwoArgs(sId,x,y=5,z=10) multiplies parameters x, y and z. The parameter sId is a string identifier to an HTML element. The product displays toward the bottom of the button you tap, in the HTML element supplied through argument sId.

You must supply a value for x. Optionally supply a value for y and z. Optionally supply just a value for y or just a value for z.

Manual Parameters

Replace default parameters with your own arguments. Call the function with user supplied parameters. The first example replaces the default parameter y = 5, with the value 2. The second example replaces the defaults, y = 5, z = 10 with the values 4 and 9 respectively.

Tap a Box: Manual Parameters

// Formal signature:
function fDefaultMultOneArg(sId,x,y=5)

// Function call
// supply non default
// parameter for y:
fDefaultMultOneArg('xy',3,2)

// Formal signature:
function fDefaultMultTwoArgs(sId,x,y=5,z=10)

// Function call
// supply non defaults
// for y and z:
fDefaultMultTwoArgs('xyzdef',3,4,9)

Default Parameters

To use default parameters simply do not replace default parameters with your own arguments. The first example processes with the default value y = 5. The second example processes two default values, y = 5 and z = 10.

Tap a Box: Default Parameters

// Formal signature:
function fDefaultMultOneArg(sId,x,y=5)

// Function call uses default.
// Does not include
// the last parameter:
fDefaultMultOneArg('xydef',3)

// Formal signature:
function fDefaultMultTwoArgs(sId,x,y=5,z=10)

// Function call uses defaults.
// Does not include
// the last two parameters:
fDefaultMultTwoArgs('xydef2',3)

Rest Parameters

Prefix the last parameter of a function definition with three dots, .... Parameter ...z, in the following function signature transforms to an array.

Array

Rest parameters are arrays. Apply array methods such as sort(), forEach() and pop() to rest parameters.

Function fRestSum(), in the light green box, iterates over a rest parameter array, to sum all digits from the array.

Tap a Box

See functions fRest() and fRestSum() from file default-rest.js, for implementation.

function fRest(sId,x,y,...z){
let e = getElement(sId);
e.innerHTML = "x: " + x + ",y:" + y + ",z:"+ z;
}

function fRestSum(sId,x,y,...a){
let e = getElement(sId);
let n = x + y;
for(var i = 0; i < a.length; i++){
n += a[i];
}
e.innerHTML = "sum: " + n;
}

HTML5 Markup

See the HTML markup below. Most buttons on this page follow a similar pattern.

<div 
class="box gnlt" 
onclick="fRestSum('r2',1,2,3,4,5)"
>

<div 
class="bld">
fRestSum('r',1,2,3,4,5)
</div>

<pre>
function fRestSum(sId,x,y,...a){
let e = getElement(sId);
let n = x + y;
for(var i = 0; i < a.length; i++){
n += a[i];
}
e.innerHTML = "sum: " + n;
}
</pre>

<div 
id="r2" 
class="bld">
Arguments
</div>
</div>

JavaScript Source Code

The sections titled VALUE EXAMPLES, REFERENCE EXAMPLES,DEFAULT PARAMETERS and REST PARAMETERS include functions implemented to display examples on this page for each topic. See JavaScript file default-rest.js, for each function.

const S_MULT   = " * ";
const S_EQUALS = " = ";

/*******************
 * VALUE EXAMPLES 
 *******************/
/**
 * Demonstrates primitives
 * pass by value.
 * Inside functions they appear to change.
 * Outside a function call primitives
 * do not change.
 */
function testValue(sId,v){
var val = v;
let e = getElement(sId);
fChangeValue(sId,val,'Doris');
var s  =  '<br>val OUTSIDE FUNCTION: '+val;
e.innerHTML += s;
}

/**
 * Read the value of
 * an argument.
 * Change the value.
 * Display the value inside this function.
 * @param sId: String ID of HTML element.
 * @param val: Object passed by value.
 * @param sChange: Object's attempted new value.
 */
function fChangeValue(sId,val,sChange){
let e = getElement(sId);
val = sChange
e.innerHTML = "val INSIDE FUNCTION: " + val;
}

/**
 * Test change reference.
 * Test change reference's property.
 * @param sId: String HTML element ID.
 * @param r: Reference object.
 * @param f: Function
 */
function testRef(sId,r,f){
var ref = r;
let e = getElement(sId);
f(sId,ref,'Doris');
var s  =  '<br>val OUTSIDE FUNCTION: '+ref +",sName:"+ref.sName;
e.innerHTML += s;
}




/*******************
 * REFERENCE EXAMPLES
 *******************/
/**
 * Change the value of a 
 * reference object's property.
 * Display the changed property.
 * @param sId: String ID of HTML element.
 * @param fRef: Object passed by reference.
 * @param sName: Value of object property to modify.
 */
function fRefChangeProperty(sId,fRef,sName){
let e = getElement(sId);
fRef.sName = sName;
e.innerHTML = "INSIDE FUNCTION value of sName PROPERTY: " + fRef.sName;
}

/**
 * Change an object itself.
 * @param sId: String ID of HTML element.
 * @param fRef: Object passed 
 * by reference.
 * @param sName: Value of object
 * property to modify.
 */
function fRefChangeObject(sId,fRef,sName){
let e = getElement(sId);
fRef = sName;
// Did the reference change?
e.innerHTML = "INSIDE FUNCTION value of reference: " + fRef;
}




/*******************
 * DEFAULT PARAMETERS 
 *******************/
/***
 * Display result of
 * x * y.
 * @param x: number to multiply
 * @param y: number to multiply
 * with default value of five.
 * @param sId :  String ID of
 * HTML element for display
 * of result.
 */
function fDefaultMultOneArg(sId,x,y=5){
let e = getElement(sId);
let z = x * y;
e.innerHTML = x + S_MULT + y + S_EQUALS + z;
}

/***
 * Display result of
 * x * y.
 * @param x: number to multiply
 * @param y: number to multiply
 * with default value of five.
 * @param sId :  String ID of
 * HTML element for display
 * of result.
 */
function fDefaultMultTwoArgs(sId,x,y=5,z=10){
let e = getElement(sId);
let w = x * y * z;
e.innerHTML = x + S_MULT + y + S_MULT + z + S_EQUALS + w;
}



/*******************
 * REST PARAMETERS 
 *******************/
/***
 * Just display arguments.
 * @param sId: String HTML element ID.
 * @param x: Number
 * @param y: Number
 * @param ...z: Array Rest parameter
 */
function fRest(sId,x,y,...z){
let e = getElement(sId);
e.innerHTML = "x: " + x + ",y:" + y + ",z:"+ z;
}

/***
 * Sum numbers x + y + array of ...z.
 * @param sId: String HTML element ID.
 * @param x: Number
 * @param y: Number
 * @param ...z: Array Rest parameter
 */
function fRestSum(sId,x,y,...a){
let e = getElement(sId);
let n = x + y;
for(var i = 0; i < a.length; i++){
n += a[i];
}
e.innerHTML = "sum: " + n;
}

Summary

You learned about JavaScript parameters, arguments, value arguments, reference arguments, default and rest parameters. You saw source code and tried test examples.

JavaScript value arguments remain unchanged outside a calling function. JavaScript reference argument properties may change within a calling function and remain changed outside a calling function.

Default and rest parameters were implemented with JavaScript version ES6, also known as ECMAScript 6 and ECMAScript 2015.

Default parameters allow developers to assign default values to arguments within a formal function declaration.

Rest parameters provide a convenient method to pass an array, of indefinite length, as a function argument.

Declare both default and rest parameters as the last parameter, or set of parameters, in the function signature's parameter list.

Learn JavaScript

JavaScript's the foundation of Web developer and Website design skills. This free and unique JavaScript tutorial includes some new or seldom used, but useful features.

Tags