Categories
Tutorials

Learning JavaScript es6

JavaScript is based on ECMAScript standards whose historical background is not the point of focus here but organization history can be found here. The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. It was the major revision in these standards and is now supported by all the browsers.

This new version has added some powerful features that will be covered in the later sections, including:

  • Let Keyword
  • Const Keyword
  • Arrow Functions
  • For/of loop
  • Map Objects
  • Set Objects
  • Promises
  • Spread Operator
  • String Templates
  • Destructuring
  • Classes

Let Keyword

As you might already know, scope block is the region in the program where certain entities (e.g. variable name) can be referred. Contrary to var keyword, let keyword is used to declare variables in block scope.

Here is the example:

{
   //variable declared with let keyword (block level)
   let x = 10;

   //variable declared with let keyword (accessed outside block too)
   var y = 10;
}

//following line will log the value
console.log(y)

//x cannot be accessed here
//console.log(x)

Const Keyword

Variables declared with const keyword are also at the block level (just like variables declared with let) but their value can never be changed once initialized.

{  
    //variable declared with let keyword (block level)
    const x = 10;
    //value of x can not be changed again
    //x=5
}
//x cannot be accessed here
//console.log(x)

Another example:

const b = "Constant variable";
b = "Assigning new value"; // shows error.

Arrow Functions

Functions in ES6 have changed a bit.

// Old Syntax
function oldOne(para1,para2) {
	console.log("Hello World..!");
}

// New Syntax
var newOne = (para1,para2) => {
	console.log("Hello World..!");
}

The new syntax is now called as Arrow functions. They enable developers to write functions quickly using short form like this:

const find_max = (x, y) => (x > y ? x:y);

As seen, return and function keywords are not required in this form. Here are some important points for arrow functions

  • They are not well suited for defining object methods as they don’t have their own ‘this’. (‘this’ is the keyword that refers to the object it belongs to)
  • They must be defined before they are used as they are not hoisted. (Hoisting for functions in JS is the process when compiler declares them before code execution)
  • Using const is safer than using var as functions are always a constant value.
  • Function body can also be specified using curly brackets if the function is more than one line. With this, the return statement cannot be omitted. For example: 
    const find_max = (x, y) => {
if (x > y) return x;
  else return y;
};

For/of loop

Loops are very important programming construct which can be used to iterate over an iterable entity (e.g. Arrays, Strings, Maps etc). It has the the following syntax

for (variable of iterable) {
  // code block to be executed
}

for..of is very similar to for..in with slight modification.

for..of iterates through list of elements (i.e) like Array and returns the elements (not their index) one by one.

Here variable is the declared variable using let, var or const which is used to access the value of iterable in the block.

And iterable is something being iterated.

Here is the example of iteration on loop:

const students = ["alex", "frank", "julia"];
for (let value of students) {
  console.log(value)
}

An example of iterating over a string:
const str_value = "test_string";
for (let value of str_value) {
  console.log(value)
}

Map Objects

As the name suggests, we can map objects to values using a map object and then these values can be accessed by providing that object as a key to map. Here is the example

Here is the map creation creation example

// Some example objects
const obj1 = {key: 'value};
const obj2= {key: 'value'};

// Creating a map object
const map_ex = new Map();

// Adding map values against the objects
map_ex.set(obj1, 10);
map_ex.set(obj2, 20);

A map identified as ‘map_ex’ is created in which ‘obj1’ object is mapped to value 10 and ‘obj2’ object is mapped to value 20.

Here is an example of accessing a map value by providing an object as key.

let val = map_ex.get(obj1);
console.log(val) //value 10 will be logged

Maps can also created by passing an array to constructor for example

const map_ex2 = new Map([;
  [obj1, 10],
  [obj2, 20],
]);

Set Objects

In mathematics, a set is defined as a collection of unique objects. We can use this feature in JS by using Set Objects. A value can occur only once so duplicates are automatically ignored. A set object can hold values of any data types

Here is the basic example:

// Creating some example variables
const obj1 = "val1";
const obj2 = "val2";
const c = "c";

// Creating a Set
const set_ex = new Set();

// Adding values to the Set
set_ex.add(obj1);
set_ex.add(obj1);

Set can also be created by passing an array to constructor for example

const letters = new Set(["val1","val1"]);

Promises

JavaScript Promises are the objects that are the combination of Producing code(code that takes some time to execute) and consuming code(code that waits for result) and promise links both of them.

Promises Syntax

const myPromise = new Promise(function(myResolve, myReject) {
//Producing Code
  myResolve(); // when successful
  myReject();  // when error
});

//Consuming Code 
myPromise.then(
  function(value) { /* if code is successful */ },
  function(error) { /* if code produces some error */ }
);

Promise Object Properties

Promise Object has 2 properties:

  • State
  • Result

After the execution of code, based on the state of Promise Object, result is obtained  i.e,

  • If the state of the promise object is “pending”, the result is “undefined”.
  • If the state of the promise object is “fulfilled”, the result is “some result value” as it will call myResolve(result value) callback.
  • If the state of the promise object is “rejected”, the result is “some error” as it will call myReject(error object) callback.

Note:

Callback for success and failure are arguments of Pomise.then().

Example:

function myfunc(param) {
   document.getElementById("demo").innerHTML = param;
}

let myPromise = new Promise(function(myResolve, myReject) {
let name = "Alia";

// The producing code
if (name.length != 0) {
   myResolve("Length of name is " + name.length );
} else {
   myReject("Error!! String is empty");
}
});

myPromise.then(
  function(value) {myfunc(value);},
  function(error) {myfunc(error);}
);

Spread Operator

To expand an iterable (Array etc.) to individual elements, Spread Operator is used. It is donated by 3 dots (…).

It has 3 major uses:

1. To copy one array to another array. (Any changes made to original array will not be reflected in copied array)

Example:

let colors1= ["Red", "Blue", "Yellow"];
let copiedcolors= [...colors1]; 
// copiedcolors= ["Red", "Blue", "Yellow"];

2. It can be also used to append elements of one array at any index of other array.

Example:

const colors1=["Red", "Blue"];
const colors2=[...colors1,"Pink","Yellow"]; 
// colors2=["Red","Blue","Pink","Yellow"];

3. For converting array to individual arguments and is used for passing arrays to function without specifying single element.

Example:

function add(num1, num2,) {
    console.log(num1 + num2);
}
let numArray= [1,2];
add(...numArray);
// output = 3;

String Templates

JavaScript Strings can also be defined by template literals. Template literals use (“) instead of quotes (“”) to define a string.

Some properties of template literals are:

Template literals allow you to include single and double quotes within strings without any restriction or modification.
Example:

let string1= `She's often called "Allie"`;

Major use of template literals is to define multiline strings easily (by just pressing enter key and a new line is created) without using escaping characters.

Example:

let string1=`My habit
is to do
gardening
after I finish
my school work`;

Template literals allow String Interpolation: Automatic replacing of variables and expressions in string with real values.

The syntax for String Interpolation is ${…}

Example-1 (Variable Substitution):

let name= "Alia";
let color = "Black";
let string1= `${name} favorite color is ${color}.`;

Example-2 (Expression Substitution):

let length= 5;
let width= 6;
let area= `Area: ${length * width}`;

Destructuring

Object Destructuring is a method to assign properties of an object to variables.

Syntax

let { property1: variable1, property2: variable2,.... } = object;

Example

let person = {
    Name: 'Alia',
    Age: 20
};

let { Name: Personname, Age: PersonAge } = person;

/* If you print personName and PersonAge they will contain:
personName = Alia
PersonAge = 20 */

Classes

As most of the programming languages (C++,Java etc.) have classes that are objects, JavaScript es6 also has classes that are templates for JavaScript Objects.

Class Syntax

Syntax to create a class in JavaScript es6 is defined as:

class ClassName {
  constructor() { ... }
  methodName() { ... }
}

Where ,

  • Keyword “class” is used to create class
  • “constructor” defines a method that is automatically executed when an object is created.
    • If the constructor is not defined JavaScript by default adds an empty constructor method.
    • Constructor can be parameterized or non-parameterized
  • Other methods can also be defined as shown in above syntax.
    •  Methods can  also be parameterized or non-parameterized

Class Properties

Class properties(Public properties) can be directly passed as parameters to the constructor and can also be declared before defining characters(For Public and private properties).

Creating Class objects

After defining class, class objects can be created as:

//If class has non-parameterized constructor
let className = new className(); 

OR

//If class has parameterized constructor
const className = new className(param1,"param2",...); 

Example:

//Creating class named "Person"
class Person { 

//Creating parameterized constructor
constructor(name, age) { 
  this.name = name;
  this.age = age;
}

//Creating class method named "age"
age() { 
  return this.age;
}

}
//Creating class Object
let myPerson= new Person("Alia", 21);

Getters and Setters

Getters and setters and one of the useful feature introduced in ES6. It will come in handy if you are using classes in JS.

Example without getters and setters:

class People {
	
	constructor(name) {
		this.name = name;
	}

	getName() {
		return this.name;
	}
	
	setName(name) {
		this.name = name;
	}
	
}

let person = new People("Jon Snow");
console.log(person.getName());

person.setName("Dany");
console.log(person.getName());

Output:
Jon Snow
Dany

I think the above example is self-explanatory. We have two functions in class People that helps to set and get the name of the person.

Example with getters and setters

class People {
	constructor(name) {
		this.name = name;
	}
	
	get Name() {
		return this.name;
	}
	
	set Name(name) {
		this.name = name;
	}
}

let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);

In the above example, you can see there are two functions inside class People with ‘get’ and ‘set’ properties. The ‘get’ property is used to get the value of the variable and ‘set’ property is used to set the value to the variable.

And you can see that getName function is called without parenthesis. And setName function is called without parenthesis and it’s just like assigning a value to the variable.