Monday, August 30, 2021

JavaScript ES6 Syntax.

 ECMAScript or ES as abbreviated is a JavaScript standard that ensures sharing the information across other different browsers. It is standardized by ECMA international according to the document ECMA-262.

ECMAScript 2015 or ES2015 was the major revision edition of ECMAScript after ECMAScript 2009 called ES6.

Here we learn different sections of ES6. Following are the detail note on those different sections accordingly.


1. Section 1: New Syntax

  1. let keyword:
    1. These variables are not attached to global object.
    2. variables declared with let keyword are blocked-scoped.
    3. These variables cannot be redeclared.

Variables are not attached to global object.




Variables declared using let are blocked scope.





Variable declared using let cannot be redeclared.



        2. Const keyword:
    1. Const keyword provides read-only reference to a value.
    2. Const variable must be initialized while declaration.
    3. Like let keyword, const keyword also declares blocked-scoped variables.

The blocked-scope variable declared by const keyword are not reassign able.




The variable declared using const are "immutable". This means that the value once assigned cannot be changed.            
   


        3. Default Parameters: Basically we use the term parameters and arguments. And, most of gets confused in these two words while using. So by definition, parameters are what we specify in function declaration and arguments are what we pass into the function.

                    Arguments vs Parameters.


        Default parameters in JavaScript allows us to provide named parameter with default value, if there is no value or undefined value passed to the function.




    4. Object Literals: 
Object Literals in JS is quite popular pattern for creating object in JavaScript. They are very simple to learn and execute, so because of this reason it is used mostly. It uses comma-separated name-value pairs wrapped in curly braces. Object literals encapsulate within it in a tidy package which minimizes the use of global variables which can create problem when combining code.




 From above image we can see that, an object 'myDetail' is created that has enclosed some pairs of name-value. Now, any property name can be called to access its value using the object created.

5. for...of loop:
For loop is used to perform iterative steps as per logic provide.






Section 2: Destructuring

1. Array Destructuring:
This feature in es6 helps us to destructure properties of an object or element of an array into individual variable.

As we can see that we have a structure of array that is returned by a funtion getScores. Now, we need to destucture it in such a way that each value of the array must be assigned to particular variable. So this is shown in above picture.


Another example of array destructuring is shown below.



2. Object Destructuring:
Object destructuring concept is similar to that of array destructuring. Only difference here in object desctructuring is it deals with the objects. Therefore, properties of an object will be assigned as individuals here.



Section 3: Class

1. Class:
A JavaScript Class is blueprint for creating objects. A class encapsulates data and functions that manipulate data. 


No comments:

Post a Comment

IIFE(Immediately Invoked Function Expression) & Arrow function

 Immediately Invoked Function Expression(IIFE) is an anonymous function which gets invoked immediately. It is anonymous because it does not ...