This series will cover some of the base new functionality of JavaScript ES6. My goal is to offer very simple short examples to simplify the learning process. The target audience is for people who are new to ES6 and would like some basic working examples.

1. ES6 – Spread Operator – Concatenating a group of various variables
2. ES6 – Spread Operator – Adding all numbers in a group
3. ES6 – Copy Arrays
4. ES6 – Ternary Operator
5. ES6 – Destructuring Rest Operator

NOTE: To open the developer console in Firefox with keyboard shortcut: Cmd + Option +K (on a Mac) or Cmd +Shift +J (on Windows). Optionally, you can highlight an object on a web page then right-click on the highlighted item and choose “Inspect Element” and the developer console window will open. Next click on console tab, usually found near the top of the newly opened developer console window.

In these examples, I ask a question and offer a possible solution.

ES6 – Spread Operator

Concatenating a group of various variables

// ES6 - Spread Operator Example, Pre-Defined Variables 

var a, b, c, d, arr;

a = [1, 2];
b = [4, 5, 6];
c = [8, 9];
d = 10;
e = 'KASH';

// OBJECTIVE: Using the spread operator and above variables to create the following array 
// TARGET RESULTS: [KASH, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// NOTE: With just one line of code, we can easily achieve the desired result.

arr = [e, 0, ...a, ...b, 7, ...c, d];

console.log(arr);

Results

KASH, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

ES6 – Spread Operator

Adding a group of various numbers

In this example we will take an array of numbers and add them together.  If we were building a calculator type application, then the ability to add (X) amount of numbers will be key.  Understanding that we may not know how many numbers will be input before asking for a total.   In this example, the array to be added is already pre-defined.

// ES6 - Spread Operator Example - Adding All Numbers 

// OBJECTIVE: Using the spread operator to create a function to add the following variables 
// TARGET RESULTS: Add the following Numbers = 11,22,33,44,55,66,77,88,99

// NOTE: Using the spread operator '...args' we can sums all numbers in the array

function addAll(...args) {  // args is the array name
	let sum = 0;
	for (let arg of args) sum += arg;
	return sum;
}

addAll(11,22,33,44,55,66,77,88,99);

console.log(sum); // Total = 495 

Results

ES6 – Copy Arrays

var a = [1, 2, 3, 4, 5, [6, 7, 8]]
var b;
/*
OBJECTIVE: 
1. Using the above variables copy array 'a' to array 'b'
2. Push 'SomeData' to array 'b'  
3. Then add 9, 10 to the inner array of 'b' = [6, 7, 8]

END RESULT GOAL:
a = 1,2,3,4,5,6,7,8,9,10
b = 1,2,3,4,5,6,7,8,9,10,SomeData
*/
// SOLUTION: use the following example (BOLD TEXT) below to achieve this

b = [...a];

// add new element to 'b' array
b.push("SomeData");

// add new elements in the 'a' sub Array
b[5].push(9, 10); 

console.log(a);
console.log(b);

Results

a = 1,2,3,4,5,6,7,8,9,10
b = 1,2,3,4,5,6,7,8,9,10,SomeData

ES6 – Ternary Operator

Before ES6

Determine if “[DATA]” (some kind of data) is a number. Before ES6, this was commonly coded similar to this (shown in BOLD)

function isNumber (a) {
  var ipt = a;
  console.log('is [ ' + ipt + ' ] a number?');

 if (typeof a === "number") {
     return "That's a Number";
     } else {
     return "That's not a number"
     }
 }

Using Ternary (ES6)

Reduced above BOLD lines to 1 line of code (shown in BOLD font below)

function isNumber2(a) {
	var ipt = a;
 	console.log('is [ ' + ipt + ' ] a number?');
	return typeof a === "number" ? "That's a Number" : "That's not a number";
}

Example Results

is [ 1 ] a number? = That’s a Number
is [ true ] a number? = That’s not a number
is [ ash ] a number? = That’s not a number

ES6 – Destructuring Rest Operator

In the following example we will look at the Destructuring Rest Operator and how it can simplify tasks. It is always to the left side of the = whereas when using the spread operator it will be on the right side. The rest parameter syntax or ‘…‘ allows us to represent an indefinite number. In the following example, we will show how we can create a new group of arrays by extracting one or more arguments from a single array.

var a, b, c;

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// OBJECTIVE = Using the above variables, 
// assign a = 1, b = 2, c = 3, 4, 5, 6, 7, 8, 9, 10
// use the following example to achieve this

[a, b, ...c] = arr;

var resA = 'A = ' + a;
var resB = 'B = ' + b;
var resC = 'C = ' + c;

console.log(resA);
console.log(resB);
console.log(resC);

Results

A = 1
B = 2
C = 3,4,5,6,7,8,9,10