The ES6 Standard: A refresher

Posted by admin at June 1, 2020

This article discusses the additional specifications introduced by the 2015 version of JavaScript traditionally known as ECMAScript version 6 or ES6. This version of the language is used when working on cross platform applications or frameworks (React, Node) and allows for access to features such as JSX.

Block scoped variables

The ES5 uses the let and const keywords instead of the “var” when creating a new variable. var creates varaibles that exist within a local variables while the “let” and “const” create variables that exist within a block

Dynamic Object Keys

Referencing the value of an objects key can be done in several ways

// if you know the key literal
console.log(person.name);
// or in another longer form
console.log(person['name']);
// but if the varaible holding the key's literal is known: nameVar
console.log(person[nameVar]);

The last one looks like the longher form. In the same way, a dynamic object key can be used when creating the object

let nameVar = 'name';
let person = {
[nameVar]: 'Mike'
}
console.log(person.name);
console.log(person[nameVar]);
// both print statments should display the string 'Mike'

Arrow functions

The arrow function introduces a way of creating anonymous functions with special uses especially in Python lambda style functions like map, filter and reduce.

// single line
let greet => console.log('Hello!');
// or for functions that require multiple lines
let greet = () => {
let name = 'Mike';
console.log('Hello ' + name + '!');
}

Destructing:

Destructing is a way of extract multiple values from an array using one statement

let arr = [1,2,3,4,5,6];
  let [a, b, c, ...rest] = arr
  // a = 1, b = 2, c = 3, rest = arr.splice(3);

And when destructing objects

let obj = {x:'a' y:'b' z:'c' }
  let [i, j, k] = obj;
  // i = obj.a, j = obj.y, i = obj.z, 

Spreading:

This concept is similar to the destructing. Destructing is basically spreading the contents of an array or object into different variables

let a = [1,2,3,4], b = [5,6,7];
  // notice the ellipsis: that is known as the spread operator
console.log(…a, …b); // displays the following: [1,2,3,4,5,6,7]

Default parameters:

ES6 allows for default parameters in functions

// this initialises the parameter name to 'World'
  const greetUser = (name = 'World') => {
      // and print a greeting
      console.log('Hello ' + name + '!');
  }

Classes:

class SimpleOps {
constructor(numbers) {
// extract the first 2 values with destructing
let [a, b] = numbers;
this.a = a;
this.b = b;
} add() { return this.a + this.b; } subtract() { return this.a - this.b; } divide() { return this.a / this.b; } multiply() { return this.a * this.b; } }

Class Inheritance:

class ComplexOps extends SimpleOps {
constructor(numbers) {
// perforn the assignments in the SimpleOps constructor
super(numbers);
// this. and this.b now has values
} mean() { // this first performs the addition from the super class and calucaltes the average return super.add() / 2; } }

Importing and Exporting modules

This allows for multi-file modular programming with JavaScript. Modules can be created and exported for use in other JS source code files. (which in turn has to import them before use)

import Qualifications;
  import Qualifications from Qualifications;
  import { Skills } from Qualifications
  import * from Qualifications;
// import only the default function in the source module
  import Qualifications;

  // import only the default function in the source module by specifying the name
  import Qualifications from Qualifications;

  // import only 2 functions from the source module
  import {Skills, Education} from Qualifications;

  // import all the functions in the source module grouping them in a named instance
  import * as Evaluation from Qualifications;

   0 likes

Suggested Read