Click ★ if you like the project. Your contributions are heartily ♡ welcome.
- Introduction
- ES6 New Features
- Destructuring
- ES6 Modules
- ES6 Classes
- Symbol
- Iterators & Generators
- Promises
- ES6 Collections
- Array Extensions
- Object Extensions
- String Extensions
- Proxy & Reflection
- Miscellaneous Features
JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of JavaScript that was introduced in 2015.
ECMAScript is the standard that JavaScript programming language uses. ECMAScript provides the specification on how JavaScript programming language should work.
ES6 provides a new way of declaring a variable by using the let keyword. The let keyword is similar to the var keyword, except that these variables are blocked-scope.
Syntax:
let variable_name;In JavaScript, blocks are denoted by curly braces {} , for example, the if else, for, do while, while, try catch and so on.
Example:
let x = 10;
if (x === 10) {
let x = 20;
console.log(x); // 20: reference x inside the block
}
console.log(x); // 10: reference at the begining of the script
// Output:
20
10Because the let keyword declares a block-scoped variable, the x variable inside the if block is a new variable and it shadows the x variable declared at the top of the script. Therefore, the value of x in the console is 20.
⚝ Try this example on CodeSandbox
The var variables belong to the global scope when you define them outside a function. When you declare a variable inside a function using the var keyword, the scope of the variable is local. For example:
function increase() {
var counter = 10;
}
console.log(counter); // cannot access the counter variable here
// Output
// ReferenceError: counter is not definedHere, the counter variable is local to the increase() function. It cannot be accessible outside of the function.
The following example displays four numbers from 0 to 4 inside the loop and the number 5 outside the loop.
for (var i = 0; i < 3; i++) {
console.log("Inside the loop:", i);
}
console.log("Outside the loop:", i);
// Output:
Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Outside the loop: 3Here, the i variable is a global variable. Therefore, it can be accessed from both inside and after the for loop.
The following example uses the let keyword instead of the var keyword:
for (let i = 0; i < 3; i++) {
console.log("Inside the loop:", i);
}
console.log("Outside the loop:", i);
// Output
Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Uncaught ReferenceError: i is not definedHere, the variable i is blocked scope. It means that the variable i only exists and can be accessible inside the for loop block.
⚝ Try this example on CodeSandbox
ES6 provides a new way of declaring a constant by using the const keyword. The const keyword creates a read-only reference to a value.
const CONSTANT_NAME = value;Like the let keyword, the const keyword declares blocked-scope variables. However, the block-scoped variables declared by the const keyword can't be reassigned.
const RATE = 0.1;
RATE = 0.2; // TypeErrorThe const keyword ensures that the variable it creates is read-only. However, it doesn’t mean that the actual value to which the const variable reference is immutable. For example:
const person = { age: 20 };
console.log(person.age); // 20
person.age = 30; // OK
console.log(person.age); // 30Even though the person variable is a constant, you can change the value of its property.
However, you cannot reassign a different value to the person constant like this:
person = { age: 40 }; // TypeErrorIf you want the value of the person object to be immutable, you have to freeze it by using the Object.freeze() method:
const person = Object.freeze({age: 20});
person.age = 30; // TypeErrorNote: Object.freeze() is shallow, meaning that it can freeze the properties of the object, not the objects referenced by the properties.
⚝ Try this example on CodeSandbox
The Arrow function provides a more concise syntax for writing function expressions by opting out the function and return keywords using fat arrow(=>) notation.
Syntax:
let myFunction = (arg1, arg2, ...argN) => expression// Function Expression
let add = function (x, y) {
return x + y;
};
console.log(add(10, 20)); // 30The above function can be written as
// Arrow functions
let add = (x, y) => x + y;
console.log(add(10, 20)); // 30Example 01: Arrow Function with No Argument
If a function doesn't take any argument, then you should use empty parentheses.
let greet = () => console.log('Hello');
greet(); // HelloExample 02: Arrow Function with One Argument
If a function has only one argument, you can omit the parentheses.
let greet = x => console.log(x);
greet('Hello'); // Hello Example 03: Arrow Function as an Expression
You can also dynamically create a function and use it as an expression.
let age = 25;
let welcome = (age < 18) ?
() => console.log('Baby') :
() => console.log('Adult');
welcome(); // AdultExample 04: Multiline Arrow Functions
If a function body has multiple statements, you need to put them inside curly brackets {}.
let area = (r) => {
const pi = 3.14;
return pi * r * r;
}
let result = area(10);
console.log(result); // 314Note: Unlike regular functions, arrow functions do not have their own this. The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.
⚝ Try this example on CodeSandbox
Default parameters allow named parameters of a function to be initialized with default values if no value or undefined is passed.
Syntax:
function fn(param1=default1, param2=default2,..) {
// ...
}Prior to ES6, you need check for undefined values and provide the default value for undefined values using if/else or ternary operator
function sum(a, b) {
a = (typeof a !== 'undefined') ? a : 10;
b = (typeof b !== 'undefined') ? b : 20;
return a + b;
}
console.log(sum()); // 30
console.log(sum(20)); // 40In ES6, these checks can be avoided using default parameters
function sum(a = 10, b = 20) {
return a + b;
}
console.log(sum()); // 30
console.log(sum(20)); // 40
console.log(sum(20, 30)); // 50⚝ Try this example on CodeSandbox
The rest parameter is used to represent an indefinite number of arguments as an array. The important point here is only the function's last parameter can be a "rest parameter".
This feature has been introduced to reduce the boilerplate code that was induced by the arguments.
Example:
function sum(...args) {
return args.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(10)); // 10
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60⚝ Try this example on CodeSandbox
The spread operator allows you to spread out elements of an iterable object such as an array, map, or set.
Example:
const odd = [1, 3, 5];
const combined = [2, 4, 6, ...odd];
console.log(combined); // [ 2, 4, 6, 1, 3, 5 ]JavaScript spread operator and array manipulation
1. Constructing array literal:
The spread operator allows to insert another array into the initialized array when you construct an array using the literal form.
let initialChars = ['A', 'B'];
let chars = [...initialChars, 'C', 'D'];
console.log(chars); // ["A", "B", "C", "D"]2. Concatenating arrays:
let numbers = [10, 20];
let moreNumbers = [30, 40];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [10, 20, 30, 40]3. Copying an array:
let scores = [80, 70, 90];
let copiedScores = [...scores];
console.log(copiedScores); // [80, 70, 90]⚝ Try this example on CodeSandbox
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.
It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.
Syntax:
for (variable of iterable) {
// ...
}Example 01: Iterating over an Array
const iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// Output
10
20
30Example 02: Iterating over a String
const iterable = 'Hello';
for (const value of iterable) {
console.log(value);
}
// Output
"H"
"e"
"l"
"l"
"o"Example 03: Iterating over a Map
const iterable = new Map([['A', 10], ['B', 20], ['C', 30]]);
for (const [key, value] of iterable) {
console.log(key + " -> " + value);
}
// Output
A -> 10
B -> 20
C -> 30Example 04: Iterating over a Set
const iterable = new Set([10, 10, 20, 20, 30, 30]);
for (const value of iterable) {
console.log(value);
}
// Output
10
20
30⚝ Try this example on CodeSandbox
ES5 provided numeric literals in octal (prefix 0), decimal (no prefix), and hexadecimal ( 0x) representation. ES6 added support for binary literals and improvements on octal literals.
1. Binary literals:
Prior to ES5, JavaScript didn't provide any literal form of binary numbers. So you need to use a binary string with the help of parseInt()
const num = parseInt('111', 2);
console.log(num); // 7Whereas ES6 added support for binary literals using the 0b prefix followed by a sequence of binary numbers (i.e, 0 and 1).
const num = 0b111;
console.log(num); // 72. Octal literals:
In ES5, to represent an octal literal, you use the zero prefix (0) followed by a sequence of octal digits (from 0 to 7).
const num = 055;
console.log(num); // 45
// Note: Legacy octal literals are not allowed in strict modeES6 represents the octal literal by using the prefix 0o followed by a sequence of octal digits from 0 through 7.
let num = 0o10;
console.log(num); // 8⚝ Try this example on CodeSandbox
Template literals allows you to work with strings in a new way compared to ES5. These are just string literals allowing embedded expressions denoted by the dollar sign and curly braces ${expression}. These literals are enclosed by the backtick character instead of double or single quotes.
Example:
let str = "World";
let message = `Hello ${str}`;
console.log(message); // Hello WorldMultiline Strings:
let msg = 'Multiline \n\
string';
console.log(msg);
// Multiline
// stringTagged Templates:
A template tag carries the transformation on the template literal and returns the result string.
It can be used in creating components in CSS-In-JS styled components to use across the application
function tag(strings) {
console.log(strings.raw[0]);
}
tag`Hello World`;
// Output
Hello World⚝ Try this example on CodeSandbox
The object literal is one of the most popular patterns for creating objects in JavaScript. Object literals are extended to support setting the prototype at construction, defining methods, making super calls, and computing property names with expressions
The important enhancements of object literals are,
Property Shorthand:
Object's properties are often created from variables with the same name.
Let's see the ES5 representation
var a = 1, b = 2, c = 3;
var obj = {
a: a,
b: b,
c: c
};
console.log(obj);
// Output
{a: 1, b: 2, c: 3}and it can be represented in a shorter syntax as below,
let a = 1, b = 2, c = 3;
let obj = {
a,
b,
c
};
console.log(obj);
// Output
{a: 1, b: 2, c: 3}Method Shorthand:
Prior to ES6, when defining a method for an object literal, you need to specify the name and full function definition
let server = {
name: "Server",
restart: function () {
console.log("The" + this.name + " is restarting...");
}
};
server.restart();
// Output
The Server is restarting... This can be avoided in ES6,
let server = {
name: "Server",
restart() {
console.log("The " + this.name + " is restarting...");
}
};
server.restart();
// Output
The Server is restarting... Computed Property Names:
In ES5, it wasn't possible to use a variable for a key name during object creation stage.
var key = "three",
obj = {
one: 10,
two: 20
};
obj[key] = 30;Object keys can be dynamically assigned in ES6 by placing an expression in square brackets([])
const key = "three",
computedObj = {
one: 10,
two: 20,
[key]: 30
};
console.log(computedObj.one);
// Output
10⚝ Try this example on CodeSandbox
ES6 provides a new feature called destructing assignment that allows you to destructure properties of an object or elements of an array into individual variables.
Basic variable assignment:
const keys = ["one", "two", "three"];
const [red, yellow, green] = keys;
console.log(red); // one
console.log(yellow); // two
console.log(green); // threeAssignment separate from declaration:
const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20Array destructuring and Default values:
const [x = 10, y = 20] = [30];
console.log(x); // 30
console.log(y); // 20Swapping variables:
let a = 10,
b = 20;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10Assigning the rest of an array to a variable:
const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]Functions that return multiple values:
function calculate(a, b) {
return [a + b, a - b, a * b];
}
let [sum, difference, multiplication] = calculate(20, 10);
console.log(sum, difference, multiplication); // 30, 10, 200⚝ Try this example on CodeSandbox
ES6 introduces the object destructuring syntax that provides an alternative way to assign properties of an object to variables.
Syntax:
let { property1: variable1, property2: variable2 } = object;Simple assignment:
const num = { x: 10, y: 20 };
const { x, y } = num;
console.log(x); // 10
console.log(y); // 20Basic Object destructuring assignment:
const employee = {
eId: "12345",
name: "Dushyant Meena",
email: "dushyant.meena@email.com"
};
const { eId, name, email } = employee;
console.log(eId); // 12345
console.log(name); // Dushyant Meena
console.log(email); // dushyant.meena@email.comObject destructuring and default values:
const { q = 10, w = 20 } = { e: 30 };
console.log(q); // 10
console.log(w); // 20Assigning new variable names:
const number = { x: 10, y: 20 };
const { x: val1, y: val2 } = number;
console.log(val1); // 10
console.log(val2); // 20Assignment without declaration:
let firstName, lastName;
({ firstName, lastName } = { firstName: "Gauri", lastName: "Pratima" });
console.log(firstName); // Gauri
console.log(lastName); // PratimaObject destructuring and rest operator:
let { a, b, ...args } = { a: 10, b: 20, c: 30, d: 40, e: 50 };
console.log(a);
console.log(b);
console.log(args);
// Output
10
20
{ c: 30, d: 40, e: 50 }Assigning new variable names and providing default values simultaneously:
const { a: num1 = 10, b: num2 = 20 } = { a: 30 };
console.log(num1); // 30
console.log(num2); // 20⚝ Try this example on CodeSandbox
An ES6 module is a JavaScript file that executes in strict mode only. It means that any variables or functions declared in the module won't be added automatically to the global scope.
ES6 has provided the built-in support for modules. Everything inside a module is private by default. Public variables, functions and classes are exposed using export statement and import the same using import statement.
Export Statement:
There are two types of exports:
1. Named Exports:
You can export each element or a single export statement to export all the elements at once
// module "my-module.js"
const PI = Math.PI;
function add(...args) {
return args.reduce((num, tot) => tot + num);
}
function multiply(...args) {
return args.reduce((num, tot) => tot * num);
}
// private function
function print(msg) {
console.log(msg);
}
export { PI, add, multiply };2. Default Exports:
If we want to export a single value, you could use a default export
// module "my-module.js"
export default function add(...args) {
return args.reduce((num, tot) => tot + num);
}Import Statement:
The static import statement is used to import read only live bindings which are exported by another module.
There are many variations of import scenarios as below,
// 1. Import an entire module's contents
import * as name from "my-module";
//2.Import a single export from a module
import { export1 } from "my-module";
//3.Import multiple exports from a module
import { export1 , export2 } from "my-module";
//4.Import default export from a module
import defaultExport from "my-module";
//5.Import an export with an alias
import { export1 as alias1 } from "my-module";ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. It support prototype-based inheritance, constructors, super calls, instance and static methods.
Example:
/**
* ES6 Class
*/
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
let person = new Person("Prasad Shashi");
console.log(person.getName()); // "Prasad Shashi"⚝ Try this example on CodeSandbox
The accessor properties are methods that get or set the value of an object. For that, we use these two keywords:
get- to define a getter method to get the property valueset- to define a setter method to set the property value
Example:
/**
* Getters and Setters
*/
class Person {
constructor(name) {
this.name = name;
}
get name() {
return this._name;
}
set name(name) {
this._name = name;
}
}
let person = new Person("Mala Amar");
console.log(person.name); // "Mala Amar"Note: These setter and getter allow you to use the properties directly ( without using the parenthesis )
⚝ Try this example on CodeSandbox
A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. However, it can be accessed via the name property.
Example:
/**
* Unnamed Class
*/
let Person = class {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
};
let person = new Person("Anjali Durga");
console.log(person.getName()); // "Anjali Durga"⚝ Try this example on CodeSandbox
The static keyword defines a static method or property for a class, or a class static initialization block. Neither static methods nor static properties can be called on instances of the class. Instead, they're called on the class itself.
Static methods are often utility functions, such as functions to create or clone objects, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.
Example:
/**
* Static methods
*/
class Person {
constructor(name) {
this.name = name;
}
static staticMethod(gender) {
let name = gender === "male" ? "Aryan Sarin" : "Manju Soni";
return new Person(name);
}
}
let anonymous = Person.staticMethod("male");
console.log(anonymous); // Person {name: "Aryan Sarin"}⚝ Try this example on CodeSandbox
Like a static method, a static property is shared by all instances of a class. To define static property, you use the static keyword followed by the property name like this:
Example:
/**
* Static Properties
*/
class Item {
constructor(name, quantity) {
this.name = name;
this.quantity = quantity;
this.constructor.count++;
}
// Static Properties
static count = 0;
// Static Method
static getCount() {
return Item.count++;
}
}
let pen = new Item("Pen", 5);
let notebook = new Item("notebook", 10);
console.log(Item.getCount()); // 2⚝ Try this example on CodeSandbox
ES6 "Computed Property" feature allows you to have an expression in brackets [] (a piece of code that results in a single value like a variable or function invocation) be computed as a property name on an object.
Example:
/**
* Computed Property
*/
let propName = "fullName";
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get [propName]() {
return `${this.firstName} ${this.lastName}`;
}
}
let person = new Person("Sharma", "Peri");
console.log(person.fullName);
// Output
Sharma Peri⚝ Try this example on CodeSandbox
To create a class inheritance, use the extends keyword. A class created with a class inheritance inherits all the methods from another class. The super() method in the constructor is used to access all parent's properties and methods that are used by the derived class.
Example:
/**
* Inheritance
*/
// Parent Class
class Vehicle {
constructor(name, type) {
this.name = name;
this.type = type;
}
getName() {
return this.name;
}
getType() {
return this.type;
}
}
// Child Class
class Car extends Vehicle {
constructor(name) {
super(name, "car");
}
getName() {
return "It is a car: " + super.getName();
}
}
let car = new Car("Tesla");
console.log(car.getName()); // It is a car: Tesla
console.log(car.getType()); // car⚝ Try this example on CodeSandbox
The new.target pseudo-property lets you detect whether a function or constructor was called using the new operator. In constructors and functions invoked using the new operator, new.target returns a reference to the constructor or function. In normal function calls, new.target is undefined.
Example:
/**
* new.target
*/
class Person {
constructor(name) {
this.name = name;
console.log(new.target.name);
}
}
class Employee extends Person {
constructor(name, title) {
super(name);
this.title = title;
}
}
let person = new Person("Tara Mishra"); // Person
let employee = new Employee("Aditya Kala", "Programmer"); // Employee⚝ Try this example on CodeSandbox
The JavaScript ES6 introduced a new primitive data type called Symbol. Symbols are immutable (cannot be changed) and are unique. Symbols are often used to add unique property keys to an object that won't collide with keys any other code might add to the object
Creating Symbols:
Example 01:
// Two symbols with the same description
const sym1 = Symbol("Hi");
const sym2 = Symbol("Hi");
console.log(sym1 === sym2); // falseSharing Symbols:
ES6 provides you with the global symbol registry that allows you to share symbols globally. If you want to create a symbol that will be shared, you use the Symbol.for() method instead of calling the Symbol() function.
The Symbol.for() method accepts a single parameter that can be used for symbol's description
Example 02:
let ssn = Symbol.for("ssn");
let citizenID = Symbol.for("ssn");
console.log(ssn === citizenID); // true
console.log(Symbol.keyFor(ssn)); // ssnThe Symbol.for() method first searches for the symbol with the ssn key in the global symbol registry. It returns the existing symbol if there is one. Otherwise, the Symbol.for() method creates a new symbol, registers it to the global symbol registry with the specified key, and returns the symbol.
Add Symbol as an Object Key:
You can add symbols as a key in an object using square brackets [].
Example 03:
let id = Symbol("id");
let person = {
name: "Anjali Mistry",
// adding symbol as a key
[id]: 10 // not "id": 10
};
console.log(person); // {name: 'Anjali Mistry', Symbol(id): 10}Symbol Methods:
| Method | Description |
|---|---|
| for() | Searches for existing symbols |
| keyFor() | Returns a shared symbol key from the global symbol registry. |
| toSource() | Returns a string containing the source of the Symbol object |
| toString() | Returns a string containing the description of the Symbol |
| valueOf() | Returns the primitive value of the Symbol object. |
⚝ Try this example on CodeSandbox
Iterator is an object which allows us to access a collection of objects one at a time. ES6 provides built-in iterators for the collection types String, Array, Set, and Map.
In JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination.Specifically, an iterator is any object which implements the Iterator protocol by having a next() method that returns an object with two properties:
value: The next value in the iteration sequence.done: This is true if the last value in the sequence has already been consumed. If value is present alongside done, it is the iterator's return value.
Example:
The following code creates a Sequence object that returns a list of numbers in the range of ( start, end) with an interval between subsequent numbers.
/**
* Iterators
*/
class Sequence {
constructor(start = 0, end = Infinity, interval = 1) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return {
next: () => {
if (nextIndex <= this.end) {
let result = { value: nextIndex, done: false };
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
}
};
}
}The following code uses the Sequence iterator in a for...of loop:
let evenNumbers = new Sequence(2, 10, 2);
for (const num of evenNumbers) {
console.log(num);
}
// Output
2
4
6
8
10⚝ Try this example on CodeSandbox
A generator is a function that can stop or suspend midway and then continue from where it stopped while maintaining the context(saved across re-entrances). It can be defined using a function keyword followed by an asterisk (function* ()).
This function returns an iterator object and this iterator's 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.
/**
* Generators
*/
function* myGenerator(i) {
yield i + 10;
return i + 20;
}
const myGenObj = myGenerator(10);
console.log(myGenObj.next().value); // 20
console.log(myGenObj.next().value); // 30
console.log(myGenObj.next().value); // undefined⚝ Try this example on CodeSandbox
The yield keyword allows you to pause and resume a generator function (function*).
The yield keyword causes the call to the generator's next() method to return an IteratorResult object with two properties: value and done. The value property is the result of evaluating the yield expression, and done is false, indicating that the generator function has not fully completed.
/**
* Yield
*/
function* counter() {
yield 1;
yield 2;
yield 3;
}
let count = counter();
console.log(count.next()); // {value: 1, done: false}
console.log(count.next()); // {value: 1, done: false}
console.log(count.next()); // {value: 1, done: false}⚝ Try this example on CodeSandbox
A promise is an object which represent the eventual completion or failure of an asynchronous operation.
It is in one of these states:
- pending: Represents initial state, neither fulfilled nor rejected.
- fulfilled: Indicates that the operation is completed successfully.
- rejected: Indicates that the operation is failed.
In the beginning, the state of a promise is pending, indicating that the asynchronous operation is in progress. Depending on the result of the asynchronous operation, the state changes to either fulfilled or rejected.
The fulfilled state indicates that the asynchronous operation was completed successfully:
The rejected state indicates that the asynchronous operation failed.
Creating a Promise:
The promise constructor accepts a callback function that typically performs an asynchronous operation. This function is often referred to as an executor.
In turn, the executor accepts two callback functions with the name resolve and reject.
/**
* Promise
*/
const promise = new Promise((resolve, reject) => {
// contain an operation
// ...
// return the state
if (success) {
resolve(value);
} else {
reject(error);
}
});If the asynchronous operation completes successfully, the executor will call the resolve() function to change the state of the promise from pending to fulfilled with a value.
In case of an error, the executor will call reject() function to change the state of the promise from pending to rejected with the error reason.
1. The then() method:
The then() method accepts two callback functions: onFulfilled and onRejected.
The then() method calls the onFulfilled() with a value, if the promise is fulfilled or the onRejected() with an error if the promise is rejected.
promise.then(onFulfilled,onRejected);2. The catch() method:
If you want to get the error only when the state of the promise is rejected, you can use the catch() method of the Promise object. Internally, the catch() method invokes the .then(undefined, onRejected) method.
promise.catch(onRejected);3. The finally() method:
The .finally() method returns a Promise. When the promise is finally either fulfilled or rejected, the specified callback function is executed. This provides a way for code to be run whether the promise was fulfilled successfully, or instead rejected.
This helps to avoid duplicating code in both the promise's .then() and .catch() handlers.
const render = () => {
//...
};
getUsers()
.then((users) => {
console.log(users);
render(); // Duplicate Method
})
.catch((error) => {
console.log(error);
render(); // Duplicate Method
});This can be avoided by using .finally()
const render = () => {
//...
};
getUsers()
.then((users) => {
console.log(users);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
render();
});Example:
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("Promise started...");
resolve("Promise resolved");
}, 300);
})
.then((value) => {
console.log("OK: " + value);
})
.catch((value) => {
console.log("ERROR: " + value);
})
.finally(() => {
console.log("Final Block");
});⚝ Try this example on CodeSandbox
A common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the result from the previous step. We accomplish this by creating a promise chain.
Example:
/**
* Promise Chaining
*/
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 1
return result * 2;
}).then(function(result) { // (***)
alert(result); // 2
return result * 2;
}).then(function(result) {
alert(result); // 4
return result * 2;
});The idea is that the result is passed through the chain of .then handlers.
Here the flow is:
- The initial promise resolves in 1 second (*),
- Then the .then handler is called (**), which in turn creates a new promise (resolved with 2 value).
- The next then (***) gets the result of the previous one, processes it (doubles) and passes it to the next handler.
- …and so on.
As the result is passed along the chain of handlers, we can see a sequence of alert calls: 1 → 2 → 4.
⚝ Try this example on CodeSandbox
The Promise.all() method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises.
It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.
Syntax:
Promise.all(iterable);Example:
/**
* Promise.all()
*/
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("The first promise has resolved");
resolve(10);
}, 1 * 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("The second promise has resolved");
resolve(20);
}, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("The third promise has resolved");
resolve(30);
}, 3 * 1000);
});
Promise.all([p1, p2, p3]).then((results) => {
const total = results.reduce((p, c) => p + c);
console.log(`Results: ${results}`);
console.log(`Total: ${total}`);
});⚝ Try this example on CodeSandbox
The Promise.race() static method accepts a list of promises as an iterable object and returns a new promise that fulfills or rejects as soon as there is one promise that fulfills or rejects, with the value or reason from that promise.
Syntax:
Promise.race(iterable)Example:
/**
* Promise.race()
*/
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("The first promise has resolved");
resolve(10);
}, 1 * 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("The second promise has resolved");
resolve(20);
}, 2 * 1000);
});
Promise.race([p1, p2])
.then((value) => console.log(`Resolved: ${value}`))
.catch((reason) => console.log(`Rejected: ${reason}`));⚝ Try this example on CodeSandbox
The .catch() method returns a Promise and deals with rejected cases only. It internally calls obj.then(undefined, onRejected)).
Inside the promise, the .catch() method will catch the error caused by the throw statement and reject(). If an error occurs and you don't have the .catch() method, the JavaScript engine issues a runtime error and stops the program.
Example:
const promise = new Promise((resolve, reject) => {
throw "An Error Occured!";
}).catch((error) => {
console.error(error);
});
// Output:
An Error Occured!⚝ Try this example on CodeSandbox
ES6 provides a new type named Set that stores a collection of unique values of any type.
The Set constructor also accepts an optional iterable object. If you pass an iterable object to the Set constructor, all the elements of the iterable object will be added to the new set:
Syntax:
let setObject = new Set(iterableObject);Set Methods:
The Set object provides the following useful methods:
| Sl.No. | Methods | Description |
|---|---|---|
| 01. | add(value) | appends a new element with a specified value to the set. It returns the Set object, therefore, you can chain this method with another Set method. |
| 02. | clear() | removes all elements from the Set object. |
| 03. | delete(value) | deletes an element specified by the value. |
| 04. | entries() | returns a new Iterator that contains an array of [value, value] . |
| 05. | forEach(callback [, thisArg]) | invokes a callback on each element of the Set with the this value sets to thisArg in each call. |
| 06. | has(value) | returns true if an element with a given value is in the set, or false if it is not. |
| 07. | keys() | is the same as values() function. |
| 08. | [@@iterator] | returns a new Iterator object that contains values of all elements stored in the insertion order. |
Example 01: Create a new Set from an Array
let numbers = new Set([10, 20, 20, 30, 40, 50]);
console.log(numbers); // Set(5) {10, 20, 30, 40, 50}
console.log(typeof numbers); // ObjectExample 02: Get the size of a Set
let size = numbers.size;
console.log(size); // 5Example 03: Add elements to a Set
numbers.add(60);
console.log(numbers); // Set(6) {10, 20, 30, 40, 50, 60}Example 04: Check if a value is in the Set
let isTrue = numbers.has(10);
console.log(isTrue); // trueExample 05: Remove elements from a set
numbers.delete(60);
console.log(numbers); // Set(5) {10, 20, 30, 40, 50}Example 06: Looping the elements of a Set
for (let number of numbers) {
console.log(number);
}
// Output
10
20
30
40
50⚝ Try this example on CodeSandbox
The WeakSet store a collection of objects. It adapts the same properties of that of a set i.e. does not store duplicates. However, WeakSet can only contain objects whereas a Set can contain any data types such as strings, numbers, objects, etc. Since objects in a WeakSet may be automatically garbage-collected, a WeakSet does not have size property.
Example: WeakSet Methods
WeakSets have methods add(), delete(), and has().
/**
* Weakset
*/
const weakSet = new WeakSet();
let obj = {
message: 'Hi',
sendMessage: true
}
// adding object (element) to WeakSet
weakSet.add(obj);
// check if an element is in Set
console.log(weakSet.has(obj)); // true
console.log(weakSet); // WeakSet {{message: "Hi", sendMessage: true}}
// delete elements
weakSet.delete(obj);
console.log(weakSet); // WeakSet {}⚝ Try this example on CodeSandbox
A Map object holds key-value pairs where values of any type can be used as either keys or values. In addition, a Map object remembers the original insertion order of the keys.
Syntax:
let map = new Map([iterable]);Map methods:
| Sl.No. | Methods | Description |
|---|---|---|
| 01. | clear() | removes all elements from the map object. |
| 02. | delete(key) | removes an element specified by the key. It returns if the element is in the map, or false if it does not. |
| 03. | entries() | returns a new Iterator object that contains an array of [key, value] for each element in the map object. The order of objects in the map is the same as the insertion order. |
| 04. | forEach(callback[, thisArg]) | invokes a callback for each key-value pair in the map in the insertion order. The optional thisArg parameter sets the this value for each callback. |
| 05. | get(key) | returns the value associated with the key. If the key does not exist, it returns undefined. |
| 06. | has(key) | returns true if a value associated with the key exists, otherwise, return false. |
| 07. | keys() | returns a new Iterator that contains the keys for elements in insertion order. |
| 08. | set(key, value) | sets the value for the key in the map object. It returns the map object itself therefore you can chain this method with other methods. |
| 09. | values() | returns a new iterator object that contains values for each element in insertion order. |
Initialize a map with an iterable object:
let lalit = { name: 'Lalit Ranganathan' },
jayesh = { name: 'Jayesh Ray' },
sarvesh = { name: 'Sarvesh Tripathi' };
let userRoles = new Map([
[lalit, 'admin'],
[jayesh, 'editor'],
[sarvesh, 'subscriber'],
]);
// Get an element from a map by key
userRoles.get(john); // admin
// Check the existence of an element by key
userRoles.has(lily); // trueIterate over map keys:
/**
* Map
*/
let lalit = { name: 'Lalit Ranganathan' },
jayesh = { name: 'Jayesh Ray' },
sarvesh = { name: 'Sarvesh Tripathi' };
let userRoles = new Map([
[lalit, 'admin'],
[jayesh, 'editor'],
[sarvesh, 'subscriber'],
]);
for (const user of userRoles.keys()) {
console.log(user.name);
}⚝ Try this example on CodeSandbox
A WeakMap is similar to a Map except the keys of a WeakMap must be objects. It means that when a reference to a key (an object) is out of scope, the corresponding value is automatically released from the memory.
A WeakMap only has subset methods of a Map object:
- get(key)
- set(key, value)
- has(key)
- delete(key)
/**
* Weakmap
*/
var weakMap = new WeakMap();
var obj1 = {};
var obj2 = {};
weakMap.set(obj1, 10);
weakMap.set(obj2, 20);
weakMap.set({}, { four: 4 });
console.log(weakMap.get(obj2)); // 20
/**
* Return false even though empty object exists as key.
* Because the keys have different references
* */
console.log(weakMap.has({}));
weakMap.delete(obj1);
console.log(weakMap.get(obj1)); //undefined⚝ Try this example on CodeSandbox
The Array.of() method creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.
The difference between Array.of() and the Array constructor is in the handling of integer arguments: Array.of(3) creates an array with a single element, 3, whereas Array(3) creates an empty array with a length property of 3 (Note: this implies an array of 3 empty slots, not slots with actual undefined values).
Syntax:
Array.of(element0, element1, /* ... ,*/ elementN)Example:
/**
* Array.of()
*/
// Array Method
let number = Array(3);
console.log(number.length); // 3
console.log(number[0]); // undefined
console.log("Array of Method");
// Array of() Method
let numbers = Array.of(3);
console.log(numbers.length); // 1
console.log(numbers[0]); // 3⚝ Try this example on CodeSandbox
The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object.
Syntax:
Array.from(target [, mapFn[, thisArg]])Create an array from an array-like object:
console.log(Array.from('Hello'));
// Output
["H", "e", "l", "l", "o"]Array.from() with a mapping function:
function addOne() {
return Array.from(arguments, (x) => x + x);
}
console.log(addOne(10, 20, 30));
// Output
[20, 40, 60]⚝ Try this example on CodeSandbox
The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
Syntax:
find(callback(element[, index[, array]])[, thisArg])Example:
let arr = [2, 4, 5, 6, 7, 10];
function findFirstOdd(i) {
return i % 2 !== 0;
}
console.log(arr.find(findFirstOdd)); // 5⚝ Try this example on CodeSandbox
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
Syntax:
findIndex(testFn(element[, index[, array]])[, thisArg])Example:
let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex((rank) => rank === 7);
console.log(index); // 2⚝ Try this example on CodeSandbox
The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.
The Object.assign() invokes the getters on the source objects and setters on the target. It assigns properties only, not copying or defining new properties.
Example: Object.assign() to clone an object
let widget = {
color: "red"
};
let clonedWidget = Object.assign({}, widget);
console.log(clonedWidget);
// Output
{ color: 'red' }Example: Object.assign() to merge objects
let box = {
height: 10,
width: 20
};
let style = {
color: "Red",
borderStyle: "solid"
};
let styleBox = Object.assign({}, box, style);
console.log(styleBox);
// Output
{
height: 10,
width: 20,
color: "Red",
borderStyle: "solid"
}⚝ Try this example on CodeSandbox
The Object.is() method determines whether two values are the same value.
The Object.is() behaves like the === operator with two differences:
- -0 and +0
- NaN
Example: Evaluation result is the same as using ===
Object.is(null, null); // true
Object.is(undefined, undefined); // true
Object.is(window, window); // true
Object.is([], []); // false
var obj1 = { a: 1 };
var obj2 = { a: 1 };
Object.is(obj1, obj1); // true
Object.is(obj1, obj2); // falseExample: Negative zero
The === operator treats -0 and +0 are the same value:
let amount = +0,
volume = -0;
console.log(volume === amount); // true
let amount = +0,
volume = -0;
console.log(Object.is(amount, volume)); // falseExample: NaN
The === operator considers NaN and NaN are different values. The NaN is the only number that does not equal itself.
console.log(Object.is(NaN, 0 / 0)); // true
console.log(Object.is(NaN, Number.NaN)); // true⚝ Try this example on CodeSandbox
The startsWith() method determines whether a string begins with the characters of a specified string, returning true or false as appropriate.
Syntax:
String.startsWith(searchString [,position])Example:
let text = "Hello World, Welcome to the JavaScript ES6.";
let isTrue = text.startsWith("Hello");
console.log(isTrue); // true⚝ Try this example on CodeSandbox
The endsWith() method determines whether a string ends with the characters of a specified string, returning true or false as appropriate.
Syntax:
String.endsWith(searchString [,length])Example:
let text = "Hello World, Welcome to the JavaScript ES6";
let isTrue = text.endsWith("ES6");
console.log(isTrue); // true⚝ Try this example on CodeSandbox
The includes() method determines whether a string contains another string:
Syntax:
string.includes(searchString [,position])Example:
let email = 'admin@example.com';
console.log(email.includes('@')); // true
let str = 'JavaScript String';
console.log(str.includes('Script')); // true⚝ Try this example on CodeSandbox
The Proxy object allows you to create an object that can be used in place of the original object, but which may redefine fundamental Object operations like getting, setting, and defining properties. Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.
The proxy object is created with two parameters:
let proxy = new Proxy(target, handler)- target: the original object which you want to proxy
- handler: an object that defines which operations will be intercepted and how to redefine intercepted operations.
Example:
/**
* Proxy object
*/
const user = {
name: "Rishima Karpe",
email: "rishima.karpe@email.com"
};
const handler = {
get(target, property) {
console.log(`Property ${property}:`);
return target[property];
}
};
const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name);
console.log(proxyUser.email);
// Output
Property name: Rishima Karpe
Property email: rishima.karpe@email.com⚝ Try this example on CodeSandbox
Reflection is the ability of a code to inspect and manipulate variables, properties, and methods of objects at runtime.
JavaScript already provides Object.keys(), Object.getOwnPropertyDescriptor(), and Array.isArray() methods as classic refection features.
ES6 introduces a new global object called Reflect that allows you to call methods, construct objects, get and set properties, manipulate and extend properties.
Example: Creating objects using Reflect.construct()
/**
* Reflect
*/
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
let args = ["Abhilash", "Bhasin"];
let abhilash = Reflect.construct(User, args);
console.log(abhilash instanceof User); //true
console.log(abhilash.fullName); // Abhilash BhasinExample: Get property of an object using Reflect.get()
const user = {
name: 'Abhilash',
age: 28
};
console.log(Reflect.get(user, 'age')); // 33Example: Calling a function using Reflect.apply()
const max = Reflect.apply(Math.max, Math, [10, 20, 30]);
console.log(max);Example: Delete property using Reflect.deleteProperty()
const user = {
name: 'Abhilash',
age: 28
};
console.log(Reflect.deleteProperty(user, 'age')); // true
console.log(user.age); // undefined⚝ Try this example on CodeSandbox
Prior to ES6, JavaScript strings are represented by 16-bit character encoding (UTF-16). Each character is represented by 16-bit sequence known as code unit.
ECMAScript 6 added full support for UTF-16 within strings and regular expressions. It introduces new Unicode literal form in strings and new RegExp flag \u mode to handle code points, as well as new APIs(codePointAt, fromCodePoint) to process strings.
Example:
/**
* Unicode
*/
let str = '𠮷';
// new string form
console.log('\u{20BB7}'); // "𠮷"
// new RegExp u mode
console.log(new RegExp('\u{20BB7}', 'u'));
console.log(/^.$/u.test(str)); // true
//API methods
console.log(str.codePointAt(0)); // 134071
console.log(str.codePointAt(1)); // 57271
console.log(String.fromCodePoint(134071)); // "𠮷"⚝ Try this example on CodeSandbox
Proper tail call ( PTC ) is a technique where the program or code will not create additional stack frames for a recursion when the function call is a tail call.
For example, the below classic or head recursion of factorial function relies on stack for each step. Each step need to be processed upto n * factorial(n - 1)
function factorial(n) {
if (n === 0) {
return 1
}
return n * factorial(n - 1)
}
console.log(factorial(5)); //120But if you use Tail recursion functions, they keep passing all the necessary data it needs down the recursion without relying on the stack.
The browsers which supports PTC do not generate stack overflow instead shows Infinity with below inputs,
function factorial(n, acc = 1) {
if (n === 0) {
return acc;
}
return factorial(n - 1, n * acc);
}
console.log(factorial(5)); //120
console.log(factorial(10)); // 3628800
console.log(factorial(100)); // 9.332621544394418e+157
console.log(factorial(1000)); // Infinity
