Sunday, June 21, 2020

JavaScript ECMA Script 6

JavaScript ECMA Script 6 - ECMA Script 2015


JavaScript


JavaScript is a high-level, prototype-based, dynamic, and interpreted programming language designed originally for web browsers.

ECMAScript implementation


ECMA(stands for European Computer Manufacturers Association) is a non-profit standards organization working in the field of information and communication systems.

ECMAScript (ES) is a scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262. There various popular implementations of this language, such as JavaScript, JScript, and ActionScript having large acceptance for the client-side scripting on the Web.

ES2015 (ES6) is the latest version of ECMAScript.



ES6 Goals 


  • To fix some of the ES5 issues 
  • To provide backward compatibility (ES5 code is valid in ES6)
  • Modern syntax
  • Better suited for big applications(Scalability) 
  • New features in the standard library

ECMA Script New features


Several new features were introduced by the ES6. Some of them are

  • Introduced let
  • Introduced const
  • Introduced Arrow Functions
  • Introduced JavaScript Classes
  • Default parameter values(Extended parameter handling)
  • Introduced Array.find()
  • Introduced Array.findIndex()
  • Enhanced Regular expressions
  • Exponentiation (**) (EcmaScript 2016)

let


The "let" keyword helps us to enable the resolution between the two variables. We can declare variables with block scope.

const


The const keyword allows us to create JavaScript variables with constant values. A const cannot be reassigned and a const keyword creates the read the only reference to value. If we have assigned a primitive value to const than it can not be changed.


Arrow function


JavaScript arrow functions are like lambda functions in Python or blocks in Ruby. JavaScript arrow functions are anonymous functions having special syntax. JavaScript arrow functions accept a fixed number of arguments and operate in the function or block of code within which they are defined.

The basic syntax of an arrow function is

(arg1, arg2, ... argN) => { 

// body of the function

}

JavaScript Classes


Javascript classes are a syntactical wrapper around the existing prototype-based inheritance. The keyword class is used to create a class that is followed by the name of the class.

For example,

class Rectangle //class declaration
{//class body starts
    constructor(ht,wd)//Constructor
            {
                this.ht=ht;//class properties
                this.wd=wd;
            }
}//class body ends

Default Parameters


We can pass default parameters to the functions, for example

function add(a, b = 10) {
  // b is 10 if not passed or undefined
  return a + b;
}
add(7); // will return 17

Array.find() 


The Array.find() returns the value of the first array element that passes a test function. For example,

var nums = [14, 19, 16, 25, 29];
var fst = nums.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 20 is " + fst;

function myFunction(value, index, array) {
  return value > 20;
}
In the code above, 25 is the first number that is greater than 20.

Array.findIndex()


This method works similar to Array.find() except, it returns the index of the matched element. For example,

var nums = [14, 19, 16, 25, 29];
var fst = nums.findIndex(myFunction);

document.getElementById("demo").innerHTML = "First number over 20 has index " + fst;

function myFunction(value, index, array) {
  return value > 20;
}
// Output
//First number over 20 has index 3


Introduction to new properties and methods to the number object


Following new properties to JavaScript number object are  added in ECMA Script 6,

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER
The following new methods are added to the number object.

  • Number.isInteger()
  • Number.isSafeInteger()

Exponentiation Operator


The exponentiation operator (**) was introduced in ECMA Script 6. For example

let a = 4;
document.getElementById("demo").innerHTML = a ** 2;

//Output
//16

Improved Regular Expression 


Sticky Matching introduced with regular expression, that keeps the matching position sticky between matches and this way supports efficient parsing of arbitrary long input strings, even with an arbitrary number of distinct regular expressions.



By at
Labels: