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