Deep Dive in JavaScript Since?ES2015
Florian GOTO
Ingénieur Back-end [ Node.js ? Nest.js ? TypeScript ? APIs ? Microservices ? GenAI ] **FREELANCE**
Originally published?on?Oct 20, 2019
JavaScript is?Awesome!
This article will be your thorough guide to most of the added features in JavaScript since the revolutionary ES6 / ES2015 version that modernized the language.
So relax and enjoy.
Feel free to share if you find it useful. Thanks.
Keeping up with JavaScript features is essential in order to write clean code and to understand modern libraries and design patterns.
This article will be kept up to date with the upcoming standardized features. This knowledge will be useful on the frontend, backend (server, database, etc.), desktop, mobile…basically everywhere.
Overview of Added Features Since?ES2015
ES2015
ES2016
ES2017
ES2018
ESNext
What is ECMAScript??
ES in ESxxxx is an abbreviation for ECMAScript. ECMAScript is the standard upon which JavaScript is based. Beside JavaScript, other languages used to implement ECMAScript but JavaScript is the most widely used implementation of ECMAScript.
Ecma International is a Swiss standards association in charge of defining international standards.
When JavaScript was created, it was presented by Netscape and Sun Microsystems — the maker of the Java language — to Ecma and they gave it the name ECMA-262 a.k.a ECMAScript.
What is TC39??
TC39 is the committee that evolves JavaScript. Its members are companies involved in JavaScript and browser vendors, including Mozilla, Google, Facebook, Apple, Microsoft, Intel, PayPal, SalesForce and others.
Every standard version proposal must go through various stages.
ES Versions
Before ES2015, ECMAScript specifications were commonly called by their edition number. So ES5 is the official name for the ECMAScript specification update published in 2009.
Then some people had the idea to use the year of the specification release in the name of the specification hence ES2015. The community still uses the version number.
let and?const
Until ES2015, var was the only statement to declare variables.
var watoto = 0
When using the var keyword when assigning a value to a variable, it will assign that value to an undeclared variable, and the results will be:
If you don’t initialize a variable when declaring it, it will be undefined ie no value has been explicitly assigned to it.
var watoto; // typeof watoto === 'undefined'
You can redeclare the variable many times hence overriding it:
var watoto = 1;
var watoto = 2;
You can also declare multiple variables at once (but please avoid it for readability, or put one assignment per line) in the same statement:
var watoto = 1, wazazi = 2; // not readable if many assignments
var watoto = 1,
wazazi = 2; // much more readable
The scope is the portion of code where a variable is accessible.
A variable initialized with var outside of any function is assigned to the global object (global scope) hence accessible everywhere.
A variable initialized with var inside a function is assigned to that function, it is tied to the local scope of the function and is accessible only inside it (like function parameters).
Variables defined in a function with the same name as a global variable takes precedence over the global variable, shadowing it.
A block (identified by a pair of curly braces) does not define a new scope. In re-ES2015 JavaScript, scopes were only created when a function was created. REmember that the var keyword does not have block scope, but function scope.
Inside functions, variables defined in it are accessible throughout all the function body, even if they are declared at the end. it can still be referenced in the beginning.
The long-short explanation for this is called hoisting (metaphor — the word hoisting is used but not defined in the latest JavaScript specification). Basically a hoistable variable declaration (with var) will trigger the JavaScript engine to create (at compilation time) the associate variable references in memory and set them to undefined. Therefore, at runtime, you will be able to access these variable before they have been declared without getting a ReferenceError (except if you use strict mode at the top of your function). Same thing applies for variable declared outside a function.
(function(){
a=3;
console.log(a);
var a; // variables declared with var are "hoisted" on top of the function scope
})();
Using let
let was introduced in ES2015, it is a safer version of var. Major differences with var variables declarations:
I tend to use var only in cases where I deliberately need hoisting or when I do not want block-scoping.
Using const
const variable declarations create variables that cannot be reassigned ie you can only use the assignment operator (=) once at declaration.
const machungwa = 'oragne';
Not being reassignable does not mean that the const variable declarations are immutable. There is no built-in operator (at the moment of writing) to handle immutability, eventhough there are some hacks to render object properties immutable (remember everything is an object in JavaScript...?;) ).
const variable declarations are block-scoped like let declarations.
I tend to mostly use const variable declarations in my code.
Arrow Functions
This shortened alternative syntax for function declarations has drastically reduced the footprint of functions in JavaScript:
From:
function fanyaKitu() {
console.log("busy writing this article");
}
to
const fanyaKitu = () => {
console.log("busy writing this article");
}
If the function body contains a single statement, you can omit the curly braces and write all on one line, it is called a compact body:
const fanyaKitu = () => console.log("busy writing this article");
Parameters are passed in the parentheses:
const fanyaKitu = (subject1, subject2) => console.log(`busy writing about ${subject1} and ${subject2}.`);
If you have only one parameter, you can omit the parentheses completely:
const fanyaKitu = subject => console.log(`busy writing about ${subject}.`);
This shortened syntax of arrow functions encourages the use of smaller functions.
Implicit Return in Arrow Functions
If only one expression is specified in the arrow function compact body (without the curly braces), it becomes the implicit return value of the function. In a block body (with curly braces), you must use an explicit return statement.
const fanyaKitu = subject => `busy writing about ${subject}`
`
fanyaKitu('new features in JavaScript since ES2015');
// 'busy writing about new features in JavaScript since ES2015'
When returning an object in a compact body, wrap the object with parentheses in order to distinguish it from a block body:
const fanyaKitu = () => ({
kuandika: true,
kusoma: true,
kulala: false
});
fanyaKitu(); // { kuandika: true, kusoma: true, kulala: false }
How the this Keyword Works in Arrow Functions
The ```this`` keyword value varies depending on the mode in which JavaScript is running (strict mode or not).
Let review how the this keyword works to compare its behavior in regular and arrow functions.
When defined inside a method of an object, if the method is a regular function the this keyword will refer to the object itself:
const gari = {
mfano: 'Carrera',
mtengenezaji: 'Porsche',
jinaKamili: function() {
return `${this.mtengenezaji} ${this.mfano}`
}
}
calling gari.jinaKamili() will return "Porsche Carrera".
Arrow functions do not bind the this keyword. Thethis scope is inherited from the execution context. Hence the value of this will be looked up in the call stack. So the gari.jinaKamili()expression will not work if the method jinaKamili is an arrow function:
const gari = {
mfano: 'Carrera',
mtengenezaji: 'Porsche',
jinaKamili: () => `${this.mtengenezaji} ${this.mfano}`
}
// calling gari.jinaKamili() will return "undefined undefined".
Remember that the this keyword is lexically-scoped which means that it takes the value of the context where it is written. In the case of arrow function methods, the this keyword takes the value of the current execution context of the function where the object method was defined. What matters is where the this keyword was written, not where it is called.
Therefore, arrow functions are not suited for object methods and cannot be used as constructors either, when instantiating an object will raise a TypeError because you would be tring to initialize an object of type undefined (remember that there is no this keyword in arrow functions).
This is where regular functions should be used instead, when dynamic context is not needed.
Arrow functions should also not be used in event handlers. DOM Event listeners set this to be the target element, and if you rely on this in an event handler, a regular function is necessary:
const kiungo = document.querySelector('#kiungo');
kiungo.addEventListener('click', () => {
// this === window
});
const kiungo = document.querySelector('#kiungo');
kiungo.addEventListener('click', function() {
// this === kiungo
});
As a general rule, avoid using arrow functions when you need the this keyword or be very careful to what the this keyword points to.
Classes
JavaScript has quite an uncommon way to implement inheritance: prototypical inheritance. Prototypal inheritance, while in my opinion great, is unlike most other popular programming language’s implementation of inheritance, which is class-based.
People coming from Java or Python or other languages had a hard time understanding the intricacies of prototypal inheritance, so the ECMAScript committee decided to sprinkle syntactic sugar on top of prototypical inheritance so that it resembles how class-based inheritance works in other popular implementations. Note that JS classes are not just syntactic sugar because they have features that are not available or difficult to emulate using pure prototypal inheritance.
This is important: JavaScript under the hood is still the same, and you can access an object prototype in the usual way.
Class Definition
ES2015 introduced the new class syntax. The class declaration creates a new class with a given name using prototype-based inheritance. It is syntaxic sugar for prototype-based object oriented programing. For those familiar with traditional JavaScript prototype-based OOP, classes do exactly the same thing but in a more conventional way for people who come from other languages like Java / C#.
class Mtu {
constructor(jina) {
this.jina = jina
}
// object method
jambo() {
return `Hujambo, jina langu ni ${this.jina}.`;
}
}
When creating a new object, the constructor method is called, with the passed arguments. In this case jambo is an object method and can be called on all objects derived from the Mtu class.
Here’s how to create a new object from a class:
const tatu = new Mtu('Tatu');
tatu.jambo();
Class declarations are not hoisted so you will need to declare a class before using it (contrary to function constructor declarations which are hoisted).
Class Inheritance
A class extends another class, and objects initialized using that class inherit all the methods of both classes.
Inside a class, you reference the parent class with the super keyword. Executing super [ super() ] will instantiate an object of the parent class type.
If the inherited class has a method with the same identifier as one of the current class, the closest method in the prototype chain takes precedence:
class Mhandisi extends Mtu {
jambo() {
return `${super.jambo()} Kazi yangu ni mhandisi.`;
}
}
const malaika = new Mhandisi('Malaika');
malaika.jambo();
// “Hujambo, jina langu ni Malaika. Kazi yangu ni mhandisi.”
Since ES9 / ES2019, classes have explicit class variable declarations, you no longer need to declare variables inside the constructor.
class Tiyo {
machungwa = 34;
constructor() {
// not necessary anymore
// this.machungwa = 34
}
}
new Tiyo().machungwa === 34
Static methods
Methods are defined on / bound to the instance of a class, not to the class itself.
Static properties and methods are bound to the class itself hence you don’t need to create an instance / object to use them:
class Mtu {
static one = 'moja';
static genericJambo() {
return 'Jambo';
}
}
Mtu.genericJambo() === 'Jambo';
Mtu.one === 'moja';
Private fields and?methods
Since ES2019, built-in private fields (hence methods also) are available as an experimental feature. You use a hashtag before the identifier of the property:
class Toto {
#titi = "private";
#toto = ka => console.log(`this is ${ka}.`);
get titi() {
return this.#toto(this.#titi);
}
}
Getters and?setters
You can prefix object and class methods with the get or set keywords to bind properties to functions. When you access the property, the bound function will be executed automatically. The property identifier does not contain the value, it just executes the bound function.
class Mtu {
#name = '';
set jina(value) {
this.#name = value;
}
get jina() {
return this.#name;
}
}
const tatu = new Mtu();
// the = operator will trigger the setter
tatu.jina = 'Tatu';
// the jina() function is executed automatically, no need to explicitly use ()
tatu.jina === 'Tatu';
If you only have a getter, the property cannot be set, and any attempt at doing so will be ignored:
class Mtu {
static #home = 'Earth';
static get planet() {
return this.#home;
}
}
Mtu.planet === 'Earth'; // true
// nothing will happen
Mtu.planet = 'Mars';
Mtu.planet === 'Earth'; // true
If you only have a setter, you can change the value but not access it from the outside:
class Mtu {
#jina;
constructor(jina) {
this.#jina = jina
}
set jina(value) {
this.#jina = value
}
}
const malaika = new Mtu('Malaika');
// value mutated internally
malaika.jina = 'Malaika Tata';
// no read access
malaika.jina === undefined; // true
Default parameters
You can define default values for the arguments of a function when they are not set at runtime (empty parentheses or missing parameters or set to undefined) or when the destructuring notation. Default parameters allow named parameters to be initialized with default values if no value or undefined is passed
const matoto = { jambo: '9' };
// destructuring an undefined property
const { titi = 12 } = matoto;
titi === 12; // true
function volala(sub = 'volala') {
console.log(`Hakuna ${sub}!`);
}
volala('matunda'); // Hakuna matunda
volala(); // Hakuna volala
Here’s how we used to deal with default parameters before ES2015:
function kurangi(chaguo) {
if (!chaguo) {
chaguo = {};
}
const rangi = ('rangi' in chaguo) ? chaguo.rangi : 'njano';
console.log(`Rangi ni ${rangi}.`);
}
kurangi(); // "Rangi ni njano."
kurangi({ rangi: 'nyekundu' }); // "Rangi ni nyekundu."
With destructuring we can now define default values to function arguments no matter if they are lists of arguments, objects, etc.:
const kurangi = ({ rangi = 'njano' }) => rangi;
// no rangi property in the object argument
kurangi({ nyama: false }) === 'njano'; // true
kurangi({ rangi: 'kijani' }) === 'kijani'; // true
If no object is passed when calling the kurangi function, we can also assign an empty object by default:
const kusokota = ({ rangi = 'bluu' } = {}) => rangi;
kusokota() === 'bluu';
Template Literals
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called “template strings” in prior editions of the ES2015 specification.
Template literals are enclosed by the back-tick ( ) (grave accent) character instead of double or single quotes.
```const kamba = `kitu;````
They provide:
Let’s dive into each of these in detail.
Multi-line strings
Pre-ES2015, to create a multiline string you had to use the \ character at the end of each line:
const kamba = 'Sehemu ya kwanza \
sehemu ya pili.';
This allows to write a string on several lines, but it will be evaluated as a single line string:
Sehemu ya kwanza sehemu ya pili.
To render the kamba string on multiple lines, you explicitly need to add \n (newline) character at the end of each line:
const kamba =
'Sehemu ya kwanza\n \
Sehemu ya kwanza';
or
const kamba = 'Sehemu ya kwanza\n' + 'Sehemu ya kwanza';
Template literals make multiline strings much simpler.
Once a template literal is opened with the back-tick, you just press enter to create a new line, with no special characters, and it’s rendered as-is:
const kamba = `Hey
hii
kamba
ni ya kushangaza!`;
Space is meaningful in strings, so be careful about what result you are trying to achieve:
const kamba = `Kwanza
mbili`;
will create a string like this:
"Kwanza
mbili"
To fix this issue, you can have an empty first line, and use the trim() (or derivatives) method to remove outer spaces:
const string = `
Kwanza
mbili`.trim();
Interpolation
In order to embed expressions within normal strings, you can do this by using ${...} inside the template literal:
const string = `kitu ${kutofautiana}`; //kitu mtihani
inside the ${} you can add literal values and expressions:
const string = `kitu ${1 + 2 + 3}`;
const string2 = `kitu ${foo() ? 'x' : 'y'}`;
You can even nest template literals inside other template literals. Very useful for conditional parts of strings.
const hali =false;
const jina = 'siroro'
const kamba = `hii ni ${ hali ? 'nzuri' : `jina ${jina === 'siroro' ? 'zuri' : 'mbaya'}` }.`;
console.log(kamba); // hii ni jina zuri
Template tags (a.k.a tagged templates)
A more advanced form of template literals are tagged templates. Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions. In the end, your function can return your manipulated string (or it can return something completely different as described in the next example). The name of the function used for the tag can be whatever you want.
const mtu = 'Hatimaye';
const umri = 23;
function myTag(strings, mtuExp, umriExp) {
const str0 = strings[0]; // "That "
const str1 = strings[1]; // " is a "
// There is technically a string after
// the final expression (in our example),
// but it is empty (""), so disregard.
// const str2 = strings[2];
let umriStr;
if (umriExp > 99){
umriStr = 'wa miaka mia moja';
} else {
umriStr = 'kijana';
}
// We can even return a string built using a template literal
return `${str0}${mtuExp}${str1}${umriStr}`;
}
const output = myTag`That ${ mtu } is a ${ umri }`;
console.log(output);
// That Hatimaye is a kijana
Tag functions don’t need to return a string, as shown in the following example.
function template(strings, ...keys) {
return (function(...values) {
const dict = values[values.length - 1] || {};
const result = [strings[0]];
keys.forEach(function(key, i) {
const value = Number.isInteger(key) ? values[key] : dict[key];
result.push(value, strings[i + 1]);
});
return result.join('');
});
}
const t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A'); // "YAY!"
const t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'}); // "Hello World!"
Destructuring assignments
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Given an object, you can extract just some values and put them into named variables:
const Mtu = {
jinaLaKwanza': 'Toto',
jinaLaFamilia: 'Cisse',
mwigizaji: true,
umri: 54, //made up
};
const {jinaLaKwanza: jina, umri} = Mtu;
console.log(`Mimi ni ${jina} na nina miaka ${umri}`);
The variables jina and umri contain the desired values.
Default values
When destructuring objects, you can give an alias (instead of the name of the property) to store the value in that property and you can also use default values for destructures properties that are undefined or null:
let gari = {
umri: 5,
brand: 'Mercedes'
};
// use the "age" alias to create a variable containing the value of gari.umri
// the "model"property is undefined so the variable "model" will default to "best"
var { umri: age, model = 'best'} = gari;
console.log(`This car is ${age} years old and is the ${model} model from ${brand}.`);
Array Destructuring
To use destructuring assignments on arrays use [] instead of {}. The destructuring is positional because arrays are an ordered data type:
const amri = [
{ nafasi: 0 },
{ nafasi: 1 },
{ nafasi: 2 },
{ nafasi: 3 },
{ nafasi: 4 }
];
const [kwanza, pili] = amri;
(kwanza.nafasi > pili.nafasi) === false
pili.nafasi === 1;
Ignoring Values
The following statement creates 2 new variables by getting the items at index 2 and 4 of the amriarray:
let [ , , tatu, , tano] = amri
tano.nafasi === 4;
Enhanced Object?Literals
Property Definitions
With ECMAScript 2015, there is a shorter notation available to set properties which share the same identifier:
Instead of doing
const kitu = 'kitukitu';
const kuweka = {
kitu: kitu
};
kuweka.kitu === 'kitukitu';
you can do
const kitu = 'kitukitu';
const kuweka = {
kitu
};
kuweka.kitu === 'kitukitu';
Prototype
Prototypal inheritance gets simpler syntax:
const anKitu = { sura: 'sura' };
const ki = {
// this makes the ki object an instance of the anKitu object
__proto__: anKitu
};
// check that the prototype of the ki object and the anKitu variable are referencing the same object
Object.is(anKitu, ki.__proto__);
You can access properties on the prototype by using the keyword super;
const anKitu = { sura: 'sura', mtihani: () => 'bustani' };
const ki = {
__proto__: anKitu,
mtihani() {
return super.mtihani() + 'ki'
}
};
ki.mtihani() === 'bustaniki';
Dynamic properties
Property names can now be generated dynamically. It is useful for data generation and the factory design pattern.
const mala = 93240329;
const lama = 45326;
const ki = {
[`${mala}-${lama}`]: 'shaka'
};
ki['93240329-45326'] === 'shaka';
For…of loop
ES5 introduced forEach() loops. While useful, they offered no way to break, like for loops always did. ES2015 introduced the for-of loop, which combines the conciseness of forEach with the ability to break. The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.
const safu = ['babu', 'porini', 'visa'];
// In each iteration the 'thamani' variable will be assigned the value of an element in the safu array
for (const thamani of safu) {
console.log(thamani);
}
//get the index as well, using `entries()`
for (const [index, value] of safu.entries()) {
console.log(`${value} @ ${index}`);
}
Difference between for…of and?for…in
Both for…in and for…of statements iterate over something. The main difference between them is in what they iterate over.
for...of iterates over the property values for...in iterates the property names
const obj = {
toto: 111,
titi: 222,
tata: 333
};
for(const key in obj) {
console.log(obj[key]);
}
Promises
A promise is commonly defined as a proxy for a value that will eventually become available.
A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action’s eventual success value or failure reason.
This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
A Promise is in one of these states:
A pending promise can either be fulfilled with a value, or rejected with a reason (error). When either of these options happens, the associated handlers queued up by a promise’s then method are called.
If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.
As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.
Creating Promises
You will most likely not create promises yourself but it is important to understand how to create them, not just use them.
A Promise object is created using the new keyword and its constructor. This constructor takes as its argument a function, called the executor function. This function should take two functions as parameters.
The first of these functions (resolve) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (reject) is called when the task fails, and returns the reason for failure, which is typically an error object.
const ahadiYaKwanza = new Promise((resolve, reject) => {
// do something asynchronous
setTimeout(() => {
try {
resolve({ message: 'Promised was fulfilled.' }); // fulfilled
} catch(error) {
reject(error); // rejected
}
}, 1000);
});
ahadiYaKwanza
.then(
data => {
console.info(data.message);
}
)
.catch(
error => {
console.error(error.message);
}
);
To provide a function with promise functionality, simply have it return a promise:
// Node.js example
function asyncClient(url) {
const https = require("https");
return new Promise((resolve, reject) => {
const urlLib = require("url");
https.get(
{
host: urlLib.parse(url).hostname,
port: 443,
path: urlLib.parse(url).pathname,
headers: {}
},
response => {
let buffer = "";
response.on("data", chunk => {
buffer += chunk;
});
response.on("end", () => {
resolve(buffer);
});
response.on("error", error => {
reject(error);
});
}
);
});
}
asyncClient("https://jsonplaceholder.typicode.com/posts")
.then(data => {
console.info(data);
})
.catch(error => {
console.error(error.message);
});
Modules
ES Modules are the ECMAScript standard for working with modules.
The standardization process completed with ES2015 and browsers started implementing this standard, working all in the same way, and now ES Modules are supported in all modern browsers.
ES Modules are in the process of becoming a stable feature in Node.js too?! Although it is already possible to use ES modules outside your browser with TypeScript and libraries like ESM or transpilers.
The ES Modules?Syntax
The syntax to import modules is:
import defaultExport from 'module-name';
while CommonJS uses
const package = require('module-name');
Basically;a module is a JavaScript file that exports one or more values (objects, functions, variables or even literal value types), using the exportkeyword. For example, this module exports a function that returns a string trimmed from spaces before and after?:
trimmer.js
export default strInput => strInput.trim();
The module defines a single, default export. The default export can be an anonymous function. Otherwise it would need a name to distinguish it from other exports (aka named exports).
HTML pages can import an ES module by using a `<script>` tag with the special type=”module” attribute:
<script type="module" src="index.js"></script>
Note: this module import behaves like a `defer` script load.
It’s important to note that any script loaded with modules is loaded in strict mode even if not explicitly declared as such.
领英推荐
import trim from './trimmer.js';
trim(' mtihani '); //'mtihani'
You can also use an absolute path for module imports, to reference modules defined on another domain:
import trim from 'https://sub.mydomain.dev/trimmer.js';
// This is also valid import syntax:
import { trim } from '/trimmer.js'; // absolute path
import { trim } from '../trimmer.js'; // relative path
// This is NOT valid syntax in pure JavaScipt:
import { trim } from 'trimmer.js'
import { trim } from 'utils/trimmer.js'
The path of the import must be either relative or absolute, that is start with?./ or /. Of course, with the use bundlers like Webpack, the rules about import path get more flexible and confusing. The confusion appears from deviation from standard JavaScript (because it follows Node’s module path resolution algorithm in most cases — which is different from ES modules) by allowing all kinds of eccentricities. Read the documentation to avoid confusion.
Other import/export options
A module can export multiple things, by using this syntax:
const adin = 1;
const series = ['hc1','hc2','hc3','hc4','hc5'];
const cpu = 3;
export { adin, series, cpu };
// equivalent to
export const adin = 1;
export const series = ['hc1','hc2','hc3','hc4','hc5'];
export const cpu = 3;
Another module can import all those exports as a single object using
import * from 'module';
You can import just a few of those exports, using the destructuring assignment:
import { adin } from ‘module’;
import { adin, cpu } from ‘module’;
You can rename any import, for convenience, using as:
import { adin, series as sequence } from 'module';
You can import the default export, and any non-default export by name, like in this common React import:
import React, { Component } from 'react';
CORS
Modules are fetched using CORS. This means that if you reference scripts from other domains, they must have a valid CORS header that allows cross-site loading (like Access-Control-Allow-Origin: *)
What about browsers that do not support modules? Use a combination of type=”module” and nomodule:
<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>
Dynamic imports
This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The import() function also supports await.
const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
link.addEventListener("click", e => {
e.preventDefault();
import('/modules/my-module.js')
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
});
}
ES Modules are one of the most importnat features introduced in modern browsers.
Bundlers like Webpack are still useful for performance issues when dealing with modules in browser. Writing modules “natively” (without frameworks) might not be as performant. For now, using these tools is still the best practice for user experience. Frameworks and bundlers abstract a lot of performance optimizations.
New String?methods
In ES2015, any string value have access to new instance methods:
repeat()
codePointAt()
repeat()
The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.
'Kuja'.repeat(3); //'KujaKujaKuja'
Returns an empty string if there is no parameter, or the parameter is 0. If the parameter is negative you’ll get a RangeError.
'moja'.repeat(-1); // RangeError
'moja'.repeat(0); // ''
'moja'.repeat(1); // 'moja'
'moja'.repeat(2); // 'mojamoja'
'moja'.repeat(3.5); // 'mojamojamoja' (count will be converted to integer)
'moja'.repeat(1/0); // RangeError
({ toString: () => 'moja', repeat: String.prototype.repeat }).repeat(2);
// 'mojamoja' (repeat() is a generic method)
codePointAt()
The codePointAt() method returns a non-negative integer that is the Unicode code point value. If there is no element at the specified position, undefined is returned. If no UTF-16 surrogate pair begins at pos, the code unit at pos is returned.
For example, this Chinese character “??” is composed by 2 UTF-16 (Unicode) parts:
"??".charCodeAt(0).toString(16); //d842
"??".charCodeAt(1).toString(16); //dfb7
If you create a new character by combining those unicode characters:
"\ud842\udfb7" //"??"
You can get the same result sign codePointAt():
"??".codePointAt(0) //20bb7
If you create a new character by combining those unicode characters:
"\u{20bb7}" //"??"
New Object?methods
ES2015 introduced several static methods under the Object namespace:
Object.is()
Object.assign()
Object.setPrototypeOf()
Usage:
Object.is(a, b)
The Object.is() method determines whether two values are the same value.
The result is always false unless:
Object.assign()
The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
By enumerable, it means the specified property in an object can be iterated/looped through by a for...in loop, with the exception of properties inherited through the prototype chain. Non-enumerable properties will be ignored in for...in loops.
Its primary use case is to create a shallow copy of an object.
const copied = Object.assign({}, original);
Being a shallow copy, values are cloned, and objects references are copied (not the objects themselves), so if you edit an object property in the original object, that modification also be applied in the copied object, since the referenced inner object is the same:
const original = {
jina: 'Camaro',
gari: {
color: 'brown'
}
};
const copied = Object.assign({}, original);
original.jina = 'Toyo';
original.gari.color = 'black';
copied.jina; // Camaro
copied.gari.color; // black
You can shallow copy one or more objects in a target object:
const mtuMwenyeBusara = {
isWise: true
}
const mpumbavu = {
isFoolish: true
}
const mtuMwenyeBusaraNaMpumbavu = Object.assign({}, mtuMwenyeBusara, mpumbavu)
console.log(mtuMwenyeBusaraNaMpumbavu)
//{ isWise: true, isFoolish: true }
Object.setPrototypeOf()
The Object.setPrototypeOf() method sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null. It is a very slow operation and creating a new object with the desired prototype is the best practice (use Object.create() for that).
Usage:
Object.setPrototypeOf(object, prototype);
Examples:
const mnyama = {
niMnyama: true
}
const mamalia = {
niMamalia: true
}
mamalia.__proto__ = mnyama
mamalia.niMnyama //true
const mbwa = Object.create(mnyama)
mbwa.niMnyama //true
console.log(mbwa.niMamalia) //undefined
Object.setPrototypeOf(mbwa, mamalia)
dog.niMnyama //true
dog.niMamalia //true
The spread?operator
Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
In simple terms, it allows you easier access the content of objects (remember everything is an object in *javaScript).
Let’s start with an arrays. Given
const nambari1 = [111, 222, 333];
you can create a new array using
const nambari2= [...nambari1, 444, 555, 666];
You can also create a copy of an array using
const nambari3 = [...nambari1];
This works for objects as well. Clone an object with:
const oldKitu = {
jina: "kitu kubwa"
};
const newKitu = { ...oldKitu };
Using strings, the spread operator creates an array with each character in the string:
const jambo = 'jambo';
const toArray = [...jambo]; // ['j', 'a', 'm', 'b', 'o']
A useful application is the ability to use a spread array as function argument:
const kazi = (moja, mbili) => { console.log(moja + mbili) };
const safu = [45, 51];
kazi(...safu);
Before ES2015, you could do this using:
kazi.apply(null, safu);
but that’s not as straightforward.
The rest element is useful when working with array destructuring:
const nambari = [11, 22, 33, 44, 55];
[kwanza, pili, ...wengine] = nambari;
console.log(wengine); // [33, 44, 55]
and spread elements:
const nambari = [11, 22, 33, 44, 55];
const jumla = (a, b, c, d, e) => a + b + c + d + e;
const jumla = jumla(...nambari);
// to create a function that accepts any numbers of arguments
const jumla = (...kitu) => kitu.reduce((acc, curr) => acc += curr, 0);
const nambari = [1,1,5,3,4,9,6,77,55,2,35,14,89,45,44,66,32,11,22,88,445,354,5546,9984,4564,645];
jumla(...nambari); // 22147
ES2018 introduces rest properties, which are the same but for objects.
Rest properties:
const { moja, pili, ...wengine } = {
moja: 1,
pili: 2,
chaTatu: 3,
nne: 4,
tano: 5
}
moja === 1; // true
pili === 2; // true
console.log(wengine); // { chaTatu: 3, nne: 4, tano: 5 }
Spread properties allow us to create a new object by combining the properties of the object passed after the spread operator:
const vitu = { moja, pili, ...wengine };
vitu; // { moja: 1, pili: 2, chaTatu: 3, nne: 4, tano: 5 }
Set
The Set object lets you store unique values of any type, whether primitive values or object references.
Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.
Initialize a?Set
A Set is initialized by calling:
const s = new Set();
Add items to a?Set
You can add items to the Set by using the add method:
s.add('moja');
s.add('mbili');
A set only stores unique elements, so calling s.add(‘moja’) multiple times won’t add new items.
You can add multiple elements to a set at the same time by iterating over the collection of items to add:
const seti = new Set();
const nambari = [11,22,33];
nambari.forEach(n => seti.add(n));
console.log(seti); // Set { 11, 22, 33 }
Check if an item is in the?set
Once an element is in the set, we can check if the set contains it:
seti.has('moja') === true;
seti.has('tatu') === false;
Delete an item from a Set by?key
Removes the element associated to the value and returns the value that Set.prototype.has(value) would have previously returned (true). Set.prototype.has(value) will return false afterwards.
const wasRemoved = seti.delete('moja');
wasRemoved === true;
Determine the number of items in a?Set
Returns the number of values in the Set object. Use the size property:
seti.size;
Delete all items from a?Set
Removes all elements from the Set object. Use the clear() method:
seti.clear();
Iterate over the items in a?Set
Use the keys() or values() methods — they are equivalent:
for (const k of seti.keys()) {
console.log(k)
}
for (const k of seti.values()) {
console.log(k)
}
The entries() method returns an iterator, which you can use like this:
const setiIterator = seti.entries();
console.log(setiIterator.next());
calling i.next() will return each element as a
{ value: someValue, done: false }
object until the iterator ends, at which point done will be true and value undefined.
You can also use the forEach() method on the set:
seti.forEach(v => console.log(v));
or you can just use the set in a for..of loop:
for (const k of seti) {
console.log(k);
}
Initialize a Set with?values
You can initialize a Set with a set of values:
const seti = new Set([11, 22, 33, 44]);
Convert the Set keys into an?array
You can convert a Set to an array using the spread operator:
const safu = [...seti.keys()];
// or
const safu = [...seti.values()];
// or simply
const safu = [...seti];
Removing duplicate values in?arrays
You can remove duplicate primitive values in arrays using sets like this:
const arrayWithDuplicates = [12, "rang", 12, true , true];
const seti = new Set(arrayWithDuplicates);
const arrayWithoutDuplicates = [...seti]; // [12, "rang", true]
A WeakSet
A WeakSet is a special kind of Set.
In a Set, items are never garbage collected. A WeakSet instead lets all its items be freely garbage collected. Every key of a WeakSet is an object. When the reference to this object is lost, the value can be garbage collected.
Here are the main differences:
A WeakSet is generally used by framework-level code, and only exposes these methods:
add();
has();
delete();
Map
The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
Before its introduction in ES2015, objects were used as maps, by associating some object or value to a specific key value:
const gari = {};
gari['rangi'] = 'nyekundu';
gari.owner = 'Tatu';
console.log(gari['rangi']); //nyekundu
console.log(gari.rangi); //nyekundu
console.log(gari.owner); //Tatu
console.log(gari['owner']); //Tatu
ES2015 introduced the Map data structure, providing us a proper tool to handle this kind of data organization.
A Map is initialized by calling the Map constructor:
const ramani = new Map();
Add items to a?Map
You can add items to the map by using the set method:
ramani.set('rangi', 'nyekundu');
ramani.set('umri', 212);
The set() method sets the value for the key in the Map object and returns the Map object.
Get an item from a map by?key
And you can get items out of a map by using get:
const rangi = ramani.get('rangi');
const umri = ramani.get('umri');
The get() method returns the value associated to the key, or undefined if there is none.
Delete an item from a map by?key
Use the delete() method:
ramani.delete('rangu');
Delete all items from a?map
Use the clear() method:
ramani.clear();
Returns true if an element in the Map object existed and has been removed, or false if the element does not exist. Map.prototype.has(key) will return false afterwards.
Check if a map contains an item by?key
Use the has() method:
const niRangu = ramani.has('rangu');
Returns a boolean asserting whether a value has been associated to the key in the Map object or not.
Find the number of items in a?map
Use the size property:
const size = ramani.size;
Initialize a map with?values
You can initialize a map with a set of values:
const ramani = new Map([['rangu', 'nyekundu'], ['owner', 'Tatu'], ['umri', 212]]);
Map keys
Just like any value (object, array, string, number) can be used as the value of the key-value entry of a map item, any value can be used as the key, even objects.
const ramani = new Map();
ramani.set(NaN, 'mtihani');
ramani.get(NaN); //mtihani
const ramani1 = new Map();
ramani1.set(+0, 'mtihani');
ramani1.get(-0); //mtihani
const arr = [1, 2, 3];
const mapi = new Map();
mapi.set(arr, "array of numbers");
mapi.get(arr) === "array of numbers";
To use a complex type as a key, you need to pass a reference to a variable containing a reference to that complex type in memory.
If you try to get a non-existing key using get() out of a map, it will return undefined.
Iterate over map?keys
Map offers the keys() method we can use to iterate on all the keys:
for (const k of ramani.keys()) {
console.log(k)
}
OR
ramani.forEach((_, key) => console.log(key));
Iterate over map?values
The Map object offers the values() method we can use to iterate on all the values:
for (const v of ramani.values()) {
console.log(v)
}
OR
ramani.forEach(value => console.log(value));
Iterate over map key, value?pairs
The Map object offers the entries() method we can use to iterate on all the values:
for (const [k, v] of ramani.entries()) {
console.log(k, v)
}
which can be simplified to
for (const [k, v] of ramani) {
console.log(k, v)
}
You can also use the forEach() method:
ramani.forEach((value, key) => console.log(`value is ${value} for key ${key}`));
Convert the map keys into an?array
const arr = [...ramani.keys()];
Convert the map values into an?array
const arr = [...ramani.values()]:
WeakMap
The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced. The keys must be objects and the values can be arbitrary values.
In a map object, items are never garbage collected. A WeakMap instead lets all its items be freely garbage collected. Every key of a WeakMap is an object. When the reference to this object is lost, the value can be garbage collected.
Here are the main differences:
A WeakMap exposes those methods, which are equivalent to the Map ones:
get(k)
set(k, v)
has(k)
delete(k)
WeakMap can be used to build a memory-sensitive cache that is not going to interfere with garbage collection, or for careful encapsulation and information hiding.
Generators
Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.
Generators in JavaScript — especially when combined with Promises — are a very powerful tool for asynchronous programming as they mitigate — if not entirely eliminate — the problems with callbacks, such as Callback Hell and Inversion of Control.
Calling a generator function does not execute its body immediately; an iterator object for the function is returned instead.
When the iterator’s next() method is called, the generator function's body is executed until the first yield expression, which specifies the value to be returned from the iterator or, with yield*, delegates to another generator function.
The next() method returns an object with a value property containing the yielded value and a done property which indicates whether the generator has yielded its last value, as a boolean.
Calling the next() method with an argument will resume the generator function execution, replacing the yield expression where execution was paused with the argument from next().
A return statement in a generator, when executed, will make the generator finish (i.e. the done property of the object returned by it will be set to true). If a value is returned, it will be set as the value property of the object returned by the generator.
Much like a return statement, an error thrown inside the generator will make the generator finished -- unless caught within the generator's body.
When a generator is finished, subsequent next calls will not execute any of that generator's code, they will just return an object of this form: {value: undefined, done: true}.
A generator can contain many yield keywords, thus halting itself multiple times, and it’s identified by the *function keyword, which is not to be confused with the pointer dereference operator used in lower level programming languages such as C, C++ or Go.
Generators enable whole new paradigms of programming in JavaScript, allowing:
2-way communication while a generator is running long-lived while loops which do not freeze your program Here is an example of a generator which explains how it all works.
function *kikokotozi(input) {
var doubleThat = 2 * (yield (input / 2))
var another = yield (doubleThat)
return (input * doubleThat * another)
}
We initialize it with
const calc = kikokotozi(10);
Then we start the iterator on our generator:
calc.next();
This first iteration starts the iterator. The code returns this object:
{
done: false
value: 5
}
What happens is: the code runs the function, with input = 10 as it was passed in the generator constructor. It runs until it reaches the yield, and returns the content of yield: input / 2 = 5. So we got a value of 5, and the indication that the iteration is not done (the function is just paused).
In the second iteration we pass the value 7:
calc.next(7);
and what we got back is:
{
done: false
value: 14
}
7 was placed as the value of doubleThat. Important: you might read like input / 2 was the argument, but that’s just the return value of the first iteration. We now skip that, and use the new input value, 7, and multiply it by 2.
We then reach the second yield, and that returns doubleThat, so the returned value is 14.
In the next, and last, iteration, we pass in 100
calc.next(100);
and in return we got
{
done: true
value: 14000
}
As the iteration is done (no more yield keywords found) and we just return (input * doubleThat * another) which amounts to 10 * 14 * 100.
Iterating over generators with for…of?loops
function *rangiJenereta() {
yield 'nyekundu';
yield 'bluu';
yield 'kijani';
}
const rangiYangu = new Set();
for (let rangi of rangiJenereta()) {
rangiYangu.add(rangi);
}
rangiYangu.has('nyekundu')
As you can see in the above code, we don’t need to execute the next() function of the generator object to access the yielded value. The iterator (rangi) gives us the value.
To get more info about generators, look my deep dive for the confused.
Those were the features introduced in ES2015. Let’s now dive into ES2016 which is much smaller in scope.
My Packt courses: