Beginners Guide to ES6 (ECMAScript 6)

Sandhya M

13 May 2022

INTRODUCTION TO ES6.
ECMAScript is a JavaScript standard meant to ensure the interoperability of webpages across different web browsers
ES6 stands for ECMAScript 6.
It is the second major revision to JavaScript.
ES6 is also called as ECMAScript 2015.

ECMAScript Editions

ECMAScript(ES1) was released in 1997 and it was the first edition.

ES2 was released in 1998 with an editorial changes. ES3 in 1999 with additional features like regular expression,try-catch,switch etc..,

ES5 in 2009 with addition of array, JSON support, Strict mode, etc.,

ES6 in 2015 and continuously got updated every in 2016,2017 and 2018 with more additional features

ES6 New Features

The let Keyword
The const Keyword
Arrow Functions

The let Keyword

The let keyword is used to declare a variable.

syntax:  let variable_name;
Example:  let a = 20;
// 20 is assigned to variable a

The variables that are defined using let cannot be redeclared.

Example: let a = 20;
         let a = 50; // not allowed   Syntax error

The variables must be declared first before use.

Example: a = 30; // not allowed
         let a = 10;
           


Example: let a = 10;
         let b = 20;
         let c = a + b;  //allowed

The variables declared with let have Block Scope

Example: function FirstName(){
         let name = "sandy"
         }
         document.write(name);   //cannot be accessed here


Example:  function FirstName(){
          let name = "sandy";
          documet.write(name);   //allowed 
          }

Redeclaring Variables

Example1:  let fav_fruit = "apple";
           {
              let fav_fruit = "orange";
              // here the value of fav_fruit will be "orange"
           }
         // here the value of fav_fruit will be apple.

Example2:  let fav_color = "black";
           {
              let fav_color = "red";
              let fav_color = "green";  //not allowed SyntaxError
            }
           let fav_color = "blue";    //not allowed SyntaxError

The variables declared with let are hoisted to the top of the block but not initialized

The const Keyword

The word const doesn't define a constant value , it defines a constant reference to a value.
Variables declared with const cannot be redeclared.

Example:  const name = "sandy";
          const name = "Sandhya"    //not allowed Error

Variables declared with const cannot be reassigned.

Example: const name = "sandy";
         name = "sandhya"  //not allowed Error

Variables defined with const have block Scope

Example: const n = 20;
         {
            const n = 10;// allowed
            // here the value will be 10.
         }
         //here the value will be 20.

Variables with const keyword must be assigned with values when the are defined.

Example: const name;
         name = "sandy";   // not allowed


Example: const name = "sandy";  //allowed

const Objects and Arrays

Elements of const array can be changed, but we cannot reassign the array

Example1: const colors = ["red", "white", "blue"];
           colors[0] = "black";  //allowed the output will be   black, white, blue 
           colors.pop(); //allowed the output will be black, white

Example2:  const items = ["rice", "ragi", "wheat"];
            items = ["milk", "juice", "curd"];  // reassigning not allowed

Properties of the const objects can be changed, but cannot reassign the object

Example1: const details = "{name: "Sandhya", age: "23", Salary: "15000"};
         details.salary = "20000";  //the value of salary will be changed to 20000 
         details.city = "Bangalore"; //new property will be added to the details variable


Example2: const details = {name: "Sandhya", age: "23", Salary: "15000"};
        details = {name: "chaith", age: "22", Salary: "10000"}; //reassigning not allowed

Arrow Functions

Arrow function is a short syntax for writing function Expression.

Example with function Expression
   
var add = function(a, b) {
return a + b;
}
console.log(add(10,20));   //returns 30

Example with arrow function


var add = (a, b) => a + b;
console.log(add(10,20));   //returns 30