UI Development, Uncategorized

ECMA Script programming language -ES6

DEFINITION :-

ES6, was published in June 2015. It was Renamed to ECMAScript 2015 major web browsers supports some features of ES6. it is possible to use software known as a Transpiler to convert ES6 code into ES5, which is better supports on Most browsers.

Here’s the List of Best ES6 Features: – 

     Arrow function: –

*  Arrow function is introduced in ES6 .it is used to make syntax short

*  Before the not using Arrow function.

  Hello = function () {
    return "Hello World" 
   }

*  After using the Arrow function.

  Hello = () ⇒ { 
    return "Hello World!";  
    }

CLASSES :- 

*  This classes are defined into two functions

1) Function expression

2) Function declaration

*   And this two-class syntax has two components

1) Class Expression.

2) Class Declaration.

See Below example of Class Declaration  : –

 class Rectangle { 
         constructor (height, width) { 
            this.height = height; 
             this.width = width; 
        } 
      }

See Below example of Class Expression : –

let Rectangle = class { 
        constructor (height, width) { 
        this.height = height; 
        this.width = width; 
        } 
     }; 

     console.log (Rectangle.name); 
      output: "Rectangle"

Default Parameters :

Default parameters is a feature of ES6. It Allows you to set default values for function parameters. if no value is passed it will show NaN.

Example: –

function multiply (a, b) { 
       return a * b 
      } 

      multiply (5, 2) // 10 
      multiply (5)   // NaN !

To control against this, When second line would be used, we have to defined b set to 1 if multiply is called with only one argument:

 function multiply (a, b) { 
       b = (type of b! == 'undefined')?  b: 1 
       return a * b 
      } 


      multiply (5, 2) // 10 
      multiply (5)   // 5

Default parameters in ES2015, we can assign 1 as the default value for b in the function head Atomically it will show default value.

  function multiply (a, b = 1) { 
       return a * b 
      } 

 
      multiply (5, 2) // 10 
      multiply (5)   // 5

Destructuring Assignment: –

It is a best feature came along with ES6. It used to makes unpack values from arrays (or) properties from objects, Into distinct variables.

we can assign to variables from extract data from arrays and objects.

If we want to do extract a data from an Array. Previous time, how will be done this ?

var introduction = ["Hello", "I", "am", "Sarah"];     
var greeting = introduction [0];     
var name = introduction[3];     

console.log(greeting); // "Hello"     
console.log(name); // "Sarah"

We have to do same thing over and over again. ES6 Destucturing Assignment makes it easy to extract this data.

Basic Destructuring:-

If we want extract data using arrays in destructuring assignment: –

var introduction = ["Hello", "I", "am", "Sarah"]; 
var [greeting, pronoun] = introduction; 

console.log(greeting); // "Hello"   
console.log(pronoun); // "I"

     

Before Assignment Declaring Variables : –

Before assignment we can declare the Variables.

var greeting, pronoun; 
[greeting, pronoun] = ["Hello", "I", "am", "Sarah"];     

console.log(greeting);// "Hello" 
console.log(pronoun);// "I"

Skipping Items in an Array:-

Instead of the first and second item and we want to assign only two variables ,if we want to get the first and last item on our array  ,This can also be done.

var [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; 

 console.log(greeting);//"Hello" 
 console.log(name);//"Sarah"

*So, the comma separator does the magic. So just do this if we want to skip all items . *


Const and Let keywords: –

   Difference between Var, Const and Let?

We can use Variable before it has been declared. let variables and constants have block cope (surrounded by {}) cannot be used before declaration.

Var: –

There are two types of scope for variable. Global scope where we would place a variable if we define the variable with var outside of any function.

And there is function scope for variable defined inside of a function.

var x = 1; 
if (x === 1) { 
  var x = 2;   
  console.log(x); 
  // expected output: 2 
}  

console.log(x); 

// expected output: 2

Let: –

Let variables have block scope and we cannot use before Declaration.

let x = 1; 
if (x === 1) { 
  let x = 2; 
  console.log(x); 
  // expected output: 2 
} 

console.log(x); 

// expected output: 1

Const: –

Const will have block scoping just like let keyword. The value of a constant can not change through re-assignment and it can’t be re-declared.

const number = 42; 
try { 
  number = 99; 
} catch(err) { 
  console.log(err); 
} 

console.log(number); 
// expected output: 42

Promises: –

Promise has two channels -first one is for results, the second for is potential errors.

*  To Get the result, you have to provide the callback function as the ‘then’ function parameter.

*  To Handle errors, you have to provide the callback function as the ‘catch’ function parameter.

function parameter() { 
    return New promise ((resolves, rejects) => { 
        set Timeout (() => { 
          const result = Math. Random (); 
          result > 0.5? resolve(result) : reject('I cannot calculate') 
        }, 1) 
    }); 
} 

 
for (let i=0; i<10; i++) { 
    parameter() 
        .then (result => console.log('Result is: ' + result)) 
        .catch (result => console.log('Error: ' + result)) 
} 


 Output :-

Result is: 0.7930997430022211  
Error: I cannot calculate  
Result is: 0.6412258210597288
Result is: 0.7890325910244533  
Error: I cannot calculate  
Error: I cannot calculate  
Result is: 0.8619834683310168  
Error:I cannot calculate  
Error:I cannot calculate  
Result is: 0.8258410427354488

Template strings: –

ES6 introduces Easy to use string templates with placeholders for variables.

*  Multi-line text we can write .

*  we have to use Back ticks instead of Apostrophes for wrap the text.

function hello(firstName, lastName) { 
  return `Good morning ${firstName} ${lastName}!  
How are you? ` 
} 

console.log (hello ('Jan', 'Kowalski')) 

//output 
Good morning Jan Kowalski!  
How are you?

Enhanced object literals: – 

*  we have to define fields with variable assignment of the same name.

*  we should define functions.

*  we have to define dynamic (calculated) properties.

const color = 'red' 
const point = { 
  x: 5, 
  y: 10, 
  color, 
  toString() { 
    return 'X=' + this.x + ', Y=' + this.y + ', color=' + this.color 
  }, 
  [ 'prop_' + 42]: 42 
} 
 
console.log ('The point is ' + point) 
console.log ('The dynamic property is ' + point.prop_42)

//output: -
The point is X=5, Y=10, color=red  
The dynamic property is 42

Module system :-

ES6 Modules are one of the Best features introduced in Present browsers. Present JavaScript frameworks like Vue JS and React JS use this feature.

You should also know that ES6 modules are not Supports in all browsers. For applications, transpilers like Babel are used to

converts code from ES6 to ES5 to ensure cross browser Compatibility.

With ES6 modules, we can Add all scripts in one main script by making them as exports,

and other modules can Import them.

*   inside ES6 Module Everything should private by default, and runs in strict mode.

*  Public variables, functions and classes are exposed while using export.

*  Modules must be included in your HTML with type = module  which can be inline or external script tag.

<script type="module" src="main.js"></script>
<script type="module">
// or an inline script
</script>

Some Advantages of using modules

Code can be split into small files of self-contained functionality.  

 Exporting a Module  

Export keyword is to Export components in a module. Exports in a module can be classified into two Types :-

  • Named Exports
  • Default Exports

Named Exports :-

Named Exports are authoritative by their Names. There are several named Exports in a module. A module can export selected components.

     *  Create a file app1.js  and add the following code −

let company = "name"
let getCompany = function(){
   return company.to-uppercase()
}
let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}
import {company,getCompany} from './app1.js'

console.log(company)
console.log(getCompany())

*  Create a file app2.js. This file consumes components defined in the app1.js file. Use any approaches to import the module.

Add This script tag in index.html  <script src="./app2.js" type="module"></script>

  Output:-  
  name 
  NAME

 Default Exports:-

Modules that need to export only single value should use Default Exports. Can be only one default export per module.

*  Create a file app1.js and add the following code

let name = 'Name'
let company = {
   getName: function(){
      return name
   },
   setName: function(newName){
      name = newName
   }
}

export default company
import c from './app1.js'
console.log(c. getName())
c. setName('Google Inc')
console.log(c. getName())

Create a file app2.js. This file consumes the components defined in the app1.js file.

Add This script tag in index.html  <script src="./app2.js" type="module"></script>

  Output:-  
  Name
  Google Inc

About The Author