JavaScript: Trailing Commas
Page 22
Trailing Commas
Introduction: Trailing Commas
Under development.
Learn to apply
trailing commas, also called final commas
,
to array literals,
object literals, function parameters,
named imports and exports.
Trailing commas have worked with array literals since the implementation of JavaScript. Now with ES2017 (ES8), trialing commas work with many other constructs, except JSON.
Arrays
The first example adds a comma
after the last
entry in an array.
The second example adds commas after
the a
and after the
last entry in the array.
var arrayChars = ['a','b','c',];
var arraySpaces = ['a',,'b','c',,,];
JavaScript calculates the length of each array, as follows.
Sparse Arrays with forEach()
Sparse Arrays with map()
Sparse Array
Arrays with gaps, such as const arraySpaces = ['a',,'b','c',,,];,
are called sparse arrays.
Iterators such as ForEach()
and map() ignore empty entries.
However, when I tested, map()
did not overlook empty entries.
The output displays in the violet box.
Yet forEach()
displays correctly in the
light blue box, above.
JavaScript Arrays & Trailing Commas
The JavaScript, below, prepares and processes the arrays above in the light blue box and violet boxes. See the JavaScript source file, arrays.js.
const arrayChars = ['a','b','c',];
const arraySpaces = ['a',,'b','c',,,];
const arrayDigits = [1,,,2,3,,,];
var eTC = null;
var eSparse = null;
var sChar = "";
/**
* Executes for page
* onload event listener.
*/
function loadExample(){
eSparse = document.getElementById('eSparse');
eTC = document.getElementById('eTC');
eTC.innerHTML += "Length of arrayChars: "+arrayChars.length;
eTC.innerHTML +="<br>Length of arraySpaces : "+arraySpaces.length;
addArray();
multiplyArray();
}
/**
* Call forEach iterator
* with appendChars() function.
* Demostrates forEach overlooks
* empty spaces in array of characters.
* const arraySpaces = ['a',,'b','c',,,];
*/
function addArray(){
arraySpaces.forEach(appendChars);
eTC.innerHTML += "<br><br>const arraySpaces = ['a',,'b','c',,,];<br>";
eTC.innerHTML += "arraySpaces concatenated with <code>forEach()</code>: "+sChar;
}
/**
* Iterator function
* @param ch: String with one
* character in an array.
*/
function appendChars(ch) {
sChar += ch.toString() + ",";
}
/**
* Call map iterator
* with squareDigits() function.
* Demonstrates map
* DOESN'T ALWAYS overlook empty entries
* in an array of digits.
* const arrayDigits = [1,,,2,3,,,];
*/
function multiplyArray(){
var arraySquared = arrayDigits.map(squareDigits)
eSparse.innerHTML +="const arrayDigits = [1,,,2,3,,,];<br>";
eSparse.innerHTML += "<br>arrayDigits Squared with <code>map()</code>:<br>";
eSparse.innerHTML += arraySquared +"<br>"
}
/**
* Iterator function
* Squares each value.
* @param num: One integer digit.
*/
function squareDigits(num) {
return num * num;
}
Object Literals
Function Parameters
Named Imports, Exports
Summary
You learned about trailing commas and JavaScript.
Apply trailing commas, also called final commas
,
to array literals,
object literals, function parameters,
named imports and exports.
Trailing commas have worked with array literals since the implementation of JavaScript. Now with ES2017 (ES8), trialing commas work with many other constructs, except JSON.
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.
