Javascript Advanced: A List of the Features of ES6 – Part II

ES6 Features Description – Part II

Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Example:

 
var [a, , b] = [1,2,3];
console.log(a,b)
 
c = 2
var getASTNode = {
   op: a,
   lhs: {
       op: b
   },
   rhs: c
}
 
var {op, lhs, rhs} = getASTNode
 
 
function g({name: x}) {
 console.log(x);
}
g({name: 5})
 
 
var [a] = [];
a === undefined;
 
 
var [a = 1] = [];
a === 1;

Output:

1 3
5

Default 

Function parameters in JavaScript are undefined by default. Setting a different default setting, however, is frequently advantageous. Here, default parameters can be useful. If no value or undefined is given, default function parameters enable named parameters to be initialized with default values.

Example:

function testDefault(x, y=38) {
   return x + y;
}
 
// Using default value for second parameter. which is pre-defined as 38.
value = testDefault(10)
console.log(value);
 
// Using user defined value for second parameter.
value = testDefault(10, 5)
console.log(value);

Output:

48
15

Rest 

The last parameter of a function definition can be prefixed with “…” (three U+002E FULL STOP characters), which will result in the placement of all remaining (user-given) parameters inside a typical JavaScript array. A rest argument can only be used as the final parameter in a function declaration. The remainder parameter syntax offers a mechanism to represent variadic functions in JavaScript by allowing a function to receive an unlimited number of arguments as an array.

Example:

function addNums(...theArgs) {
   let total = 0;
   for (const arg of theArgs) {
     total += arg;
   }
   return total;
 }
 
console.log(addNums(1, 2, 3));
console.log(addNums(1, 2, 3, 4));
 

Output:

6
10

Spread

Spread syntax (“…”) enables the expansion of an iterable—such as an array or string—in locations where one or more expected parameters (for function calls) or elements (for array literals) are present. The spread syntax lists the properties of an object in an object literal and adds the key-value pairs to the newly generated object.

The spread syntax resembles the rest syntax exactly. The spread syntax can be thought of as the antithesis of the rest syntax. While rest syntax gathers numerous elements and “condenses” them into a single element, spread syntax “expands” an array into its elements. See the rest property and rest parameters.

Example:

function addNums(x, y, z) {
   return x + y + z;
}
const numbers = [11, 21, 31];
 
console.log(addNums(...numbers));
 
console.log(addNums.apply(null, numbers));

Output:

63
63

Let

A block-scoped local variable is declared by the let declaration, and it may or may not be given an initial value. Unlike the var keyword, which declares a variable globally or locally to an entire function regardless of block scope, let enables you to declare variables that are limited to the scope of a block statement, or expression, on which it is used. The latter is initialized to a value only when a parser evaluates it, which is another difference between var and let (see below).

Similar to const, When declared globally, let does not create properties for the window object (in the top-most scope).

You can read more about the decision to use the name “let” here. Declaring let variables near the top of the scope in which they are used can help you avoid many problems with them (doing so may impact readability).

Contrary to var, let starts with declarations rather than statements. In light of the fact that there is no method to access the variable, it follows that you cannot use a single let declaration as the body of a block.

Example:

let x = 11;
 
if (x === 11) {
 let x = 22;
 
 console.log(x);
}
 
console.log(x);

Output:

22
11

Const

Like variables declared with the let keyword, constants are block-scoped. A constant’s value cannot be altered by redeclaration or reassignment (i.e., using the assignment operator) (i.e. through a variable declaration). The attributes or items of a constant, on the other hand, can be changed or deleted if it is an object or array.

The scope of the constant created by this declaration can either be global or specific to the block in which it is made. Unlike var variables, global constants do not become attributes of the window object.

A read-only reference to a value is created by the const declaration. It only means that the variable’s identification cannot be changed, not that the value it contains is immutable. If the content is an object, for example, this indicates that the object’s contents (such as its properties) can be changed.

Example:

const number = 42;
 
try {
 number = 99;
} catch (err) {
 console.log(err);
}
 
console.log(number);

Output:

TypeError: Assignment to constant variable.
 
   at Object.<anonymous> (/home/Desktop/first.js:4:10)
   at Module._compile (node:internal/modules/cjs/loader:1126:14)
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
   at Module.load (node:internal/modules/cjs/loader:1004:32)
   at Function.Module._load (node:internal/modules/cjs/loader:839:12)
   at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
   at node:internal/main/run_main_module:17:47
 
 
42

Iterators: For … of

With the for…of the statement, a loop that functions on a series of values taken from an iterable object is put into motion. Iterable objects include the arguments object, generators created by generator functions, and user-defined iterables in addition to instances of built-ins like Array, String, TypedArray, Map, Set, NodeList (and other DOM collections).

Example:

let fiboSeries = {
  
   [Symbol.iterator]() {
       let left = 0, now = 1;
       return {
           next() {
               [left, now] = [now, left + now];
               return { done: false, value: now }
           }
       }
   }
}
 
let fib = [];
for (let i of fiboSeries) {
   if (i > 1000)
       break;
   fib.push(i);
}
console.log(...fib);

Output:

1 2 3 5 8 13 21 34 55 89 144 233 377 610 987

Generators

Iterator-authoring is made easier by generators using function* and yield. A Generator instance is returned by a function that is specified as a function*. Additional text and throw are examples of generators, which are subtypes of iterators. Thus, a yield is an expression form that returns a value since these allow values to flow back into the generator (or throws).

Example:

 let fiboSeries = {
   [Symbol.iterator]: function*() {
     let pre = 0, cur = 1;
     for (;;) {
       let temp = pre;
       pre = cur;
       cur += temp;
       yield cur;
     }
   }
 }
  for (let n of fiboSeries) {
   if (n > 1000)
     break;
   console.log(n);
 }

Output:

1
2
3
5
8
13
21
34
55
89
144
233
377
610
987

Unicode

New APIs to process strings at the level of 21bit code points have been added, along with non-breaking improvements to enable full Unicode, such as a new Unicode literal form in strings and a new RegExp u mode to handle code points. These upgrades allow JavaScript developers to create cross-platform programs.

Example:

 // same as ES5.1
"ক".length == 1
 
// new RegExp behaviour,
"ক".match(/./u)[0].length == 1
 
// new form
"\u{20BB7}"=="ক"=="\uD842\uDFB7"
 
// new String ops
"ক".codePointAt(0) == 0x20BB7
 
// for-of iterates code points
for(var c of "ক") {
 console.log(c);
}

Output:

ক