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.

*  After using the Arrow function.


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  : –

See Below example of Class Expression : –


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: –

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:

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


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 ?

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: –

     

Before Assignment Declaring Variables : –

Before assignment we can declare the Variables.

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.

*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.

Let: –

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

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.


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.


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.


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.


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.

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 −

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

 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

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

About The Author