ECMAScript and Its Features That Have Come With ES5 And ES6 Versions

ECMAScript and Its Features That Have Come With ES5 And ES6 Versions

What is ES?
In the year 1996, a standards organization called ECMA (European Computer Manufacturers Association) International carved out standard specification called ECMAScript (ES) which all browser vendors could implement. And Javascript is the most well-known implementations of ES.

ECMA Script's first three versions- ES1, ES2, ES3 were yearly updates whereas, ES4 was never released due to political disagreements. ES5 was eventually released with several additions. ES has published nine versions and the latest one (9th version) was published in the year 2018.

*ES5:- ES5 was released in 2009, ten years after the release of its previous version. Here is a list of features that have come with the es5 version.

1. ‘USE STRICT' DIRECTIVE:- In the previous version, JS allows the usage of undeclared variables. But when the es5 ‘use strict' feature is used, an error is reported.

Ex:- 'use strict'
	  x=22; //leads to an error, ie uncaught referenceError: x is not defined

2. NEW METHODS IN AN ARRAY
  2.1. isArray(): This method checks if the object is an array or not and returns the result in true or false.

Ex:- let arr=[3,3,5,6];
	 console.log(isArray(arr)); //returns true

  2.2. forEach(): It executes the function for every element found in the array.

Ex:- let arr=[3,5,6];
	 arr.forEach(function(ele){ 
      console.log(ele); //prints all the element of the array 
     });

  2.3. map():  This method creates a new array by mapping every element of the array (on which the map is used).

Ex:- let arr=[3,5,6];
	 let newArr = arr.map(function(e){ return e  * e});

  2.4. filter(): It creates a new array that contains elements that got filtered by making array elements pass some condition.

Ex:- let arr=["tenis","cricket","football","golf","running"];
	 const newArr = arr.filter(arr => arr.length >6 );
	 concole.log(newArr); // ["cricket","football","running"];

  2.5. reduce(): It applies a function to each element in an array and reduces the array to a single element.

Ex:- let arr=[3,5,6];
	 let newArr = arr.reduce(function(total, currentval) => {
		console.log(currentval); //3,5,6
		return total + currentval;
	 });
	 console.log(newArr)//14

3. JSON SUPPORT

  3.1. parse(): It parses a JSON string that is like an object.

Ex:- let arrString = '{"a": 1, "b": 2}';
	 let obj = JSON.parse(arrString);
	 console.log(obj.a); //1

  3.2. stringify(): This method converts an object to a JSON string.

Ex:- console.log(JSON.stringify({x:5, y:6})); //"{"x":5, "y":6}"

4. NEW METHODS IN A DATE

  4.1. now(): This method returns the number of milliseconds elapsed since 01-Jan-1970 UTC.

Ex:- var date = Date.now(); //display the number of milliseconds since midnight

  4.2. valueOf(): It returns the primitive value of a date object.

Ex:- var date =  new Date();
	 var d = date.valueOf(); // display the print value of a date obj.

5. GETTERS AND SETTERS:- The get method returns the value of a variable, and the set method sets the value of the variable.

6. PROPERTY METHODS:- Object.defineProperty(): This method lets the user define the property of an object and/or change its value.

*ES6:- JS has shown great progress in recent years starting from 2015 by releasing the ES6 version. With this release, Javascript has made a big achievement in making a developer's life easy and reached the expectations of a modern programming language. Even after 4 years of release, many newbies to JS are not so familiar with all the versions.

Below is a list of the features that have come with ES6 version:

1. LET & CONST:- Till ES5, JS has only function scope and global scope with the introduction of let keyword in ES6, JS can now have block scope.

Ex:- var v=10;
	 fun();
	 function fun(){
	  console.log("v",v);
	  let l=20;
	  console.log("l",l);
	 }
	  console.log("v",v);
	  console.log("l",l); //error: l is not defined

2. FOR...OF:- for...of are an alternative for both for...in and forEach() and loops iterable data structures like Arrays, Maps, Sets, and strings.

Ex:- const arr = ["one", "two", "three"];
	 for(const a of arr){
	   console.log(a);
	 }

3. DEFAULT PARAMETERS:- Provides default values to function parameters if no value or undefined is passed.

Ex:- function fun(a,b,c=8){
	  console.log('a:');
	  console.log('b:');
	  console.log('c:');
	}
	fun(2,3);  //print a:2 b:3 c:0
	fun(2,3,1); //print a:2 b:3 c:1

4. REST OPERATOR:- Rest Operator is used to handle function parameters. Three dots are use to represent the rest operator.

Ex:- function fun(x,..y){
	   console.log('x:'+x+'y:'+y); //a:1 b:2,3,4
	}
	fun(1,2,3,4);

5. SPREAD OPERATOR:- Spread Operator is used with arrays and its syntax is exactly the same as that of Rest Operator (ie …). It is used to split the contents of an array.

Ex:- let arr1 = [1,2,3];
	 let arr2 = [4, 5];
	 let newArr = [..arr1,..arr2];
	  console.log(newArr); //[1,2,3,4,5]

6. DESTRUCTURING:- Destructuring helps in unpacking values from an array or an object.

Ex:- const arr = [1,2];
	 const [x,y] = arr;
	 console.log('x:'+x+'y:'+y);

7. TEMPLATE LITERALS/STRINGS:- It allows embedded expressions, which makes print statements easy.

Ex:- let a =1, b= 2, c= 3;
	 console.log('a:'+a+'b:'+b+'c:'+c); //a:1 b:2 c:3 
	 console.log('a: ${a} b: ${b} c: ${c}); //a:1 b:2 c:3 

8. ARROW FUNCTIONS: Arrow Functions use => as its token and so are also called as Fat Arrow Functions. They are one line functions and are much like Lambda functions in programming languages like Java 8 and Python. Prior to =>, JS has a function keyword.

Ex:- const val = (x,y) => { return x * y };
	 console.log(val(2,3)); 

9. PROMISES:- Promises are introduced in ES6 to handle Asynchronous Programming in a more elegant way. Before Promises, async calls were handled by Callbacks. Promises resolved the Call Back Hell.

Ex:- let myPromise = new Promise((resolve, reject) => {
	 let theDecider = true;
	 if(theDecider){
	   resolved("success");
	 }else{
	   reject("failure");}
	 });

10. CLASSES:- The Objects in Javascript are based on Prototypes and follow Prototypal Inheritance. In ES6 we use the keyword class which makes the approach very easy.

Ex:- class Demo {
	  construtor(msg){
	    this.msg = msg;
	  }
	  demoMethod(){
	    console.log(this.msg);
	  }
	}
	let user = new Demo("ES6 classes");
	user.demoMethod();