What's new with ECMAScipt 6?

Hello! I hope you had a good day and an awesome week. 😊

So, I started my journey of learning JavaScript frameworks and libraries and I came across something called ECMAScript.

What is ECMAScript? It is a standard for scripting languages introduced by Ecma International (European Computer Manufacturers Association). JavaScript is one of the scripting languages based on ECMAScript standard. The most stable and latest version is ECMAScript 6 (ES6) also known as ECMAScript 2015 was released on June 2015.

ES6 is not compatible with most browsers as it is still new. So, to convert the ES6 code we write, to browser readable ES5, a transpiler will be needed. A transpiler is a type of a compiler which translate a source code of a program written in one programming language to another programming language. Some of the transpiling tools available are Babel.js, Traceur and Closure.
In this post, I’ll discuss some features of ES6 which differentiate it from ES5, its previous version.

‘let’ Keyword 

‘let’ keyword is used to declare variables. It will help to create block scope variables in places where we couldn’t do so before.



The output of the above code will be 10 as the value of the global variable is replaced with the value of the local variable.



If we replace the second ‘var’ with ‘let’ as above, the output will be 5 as the variable declared with ‘let’ can only be accessed within the block scope. If we put ‘Console.log(a);’ inside the ‘if’ statement, it will output 10.  



           ‘const’ Keyword

‘const’ is short for constant and is used to declare constants.



If we declare another variable with the same name, it will give a ‘Duplicate declaration’ error.



 Template Strings 

Template Strings help to format the code by embedding variables in expressions.



The same thing can be written in ES6 as follows.



     Default Parameters

Another feature of ES6 is using default parameters in a function. So if the function is called without passing any arguments, it will use the default parameters to give a value. The output of the following code snippet is 10.


Destructuring Assignment 

This provides an easy way to extract data from arrays and objects and assign them into variables.



Rather than accessing an array by index, we can assign values straightaway to the variables at the time of declaration of the array. The above code will give the output ‘A’ and ‘B’. If we want the first and the fourth element, we must separate our variables by commas corresponding to each element of the array as below.



This is how it happens in arrays, it can be used for objects as well.


Arrow Functions 

Arrow functions also known as fat arrow functions is an abbreviated syntax for functions. Here ‘=>’ is used to represent an arrow. Do not confused it with equal or greater than, as they do something completely different. Following code shows a traditional function,



Now let’s convert this into arrow notation.


Parenthesis of ‘city’ was removed as it is the only one argument, but if there are more than one argument, parenthesis needs to be maintained. A function with no arguments needs to have just the parenthesis.

I really hope you learnt something from this. I wish you all an amazing week ahead. Adios 😊

Comments

  1. TejutejuNovember 19, 2018 at 10:38 PM

    Really nice blog post.provided a helpful information.I hope that you will post more updates like this AngularJS 5 Online Training India

    ReplyDelete

Post a Comment

Popular posts from this blog

Double Submit Cookies Pattern - Node.js

Image
Hello! I hope you had a good day and an awesome week. 😊 In this post, we are going to talk about how to prevent Cross-site Request Forgery (CSRF) using Double Submit Cookies Pattern and its Node.js implementation. If you are unaware of CSRF, I recommend you to read my previous post here as it is crucial to understand Double Submit Cookies Pattern. Prerequisites are the knowledge about cookies, CSRF and Synchronizer Token Pattern. As discussed earlier, there are some drawbacks of Synchronized Token Pattern, namely, The requirement of excessive storage space in the server due to the fact that all the CSRF tokens are stored. Useless if the server supports cross-domain AJAX requests. To overcome the aforementioned reasons and to prevent CSRF, Double Submit Cookies Pattern can be used . Double Submit Cookies Pattern Double Submit Cookies Pattern When Harry signs in to the bank’s website using his username and password, the bank’s server would create a ses...
Read more

Setting up the Environment with Node.js

Image
Hello! I hope you had a good day and an awesome week. 😊 As I promised on the previous post, in this one we’ll do some coding using Node.js. But before we jump into coding, we need to set up a proper environment. Setting up the Environment Before working with Node.js, it should be installed to your machine. So, to install, you can follow the link given below, https://nodejs.org/en/download/ There, select the setup according to the operating system of your machine. When installing go with the default options. After the installation, open command prompt and type ‘node --version’ as below, If the version is shown, Node.js is successfully installed to your machine. If not, it should be reinstalled. Let’s Code Let’s start small. First, we’ll see how to print something in the command prompt. A JavaScript file (a file with .js extension) should be created. Let’s call it ‘Hello.js’. This can be done using a simple text editor or using and IDE (Integra...
Read more

Synchronizer Token Pattern - Node.js

Image
Hello! I hope you had a good day and an awesome week. 😊 With the advancement of technology in information and communication sectors, millennials are electronics-filled, increasingly online and socially networked, which is exactly why everything can be done once you are connected to the internet. Doing online transactions have become so much easy making it is just a button click but, can we guarantee the safety of these transactions? Cross-site Request Forgery (CSRF) is a type of attack which targets such online transactions. You’ll need to have the knowledge of cookies as a prerequisite to fully understand CSRF. What is Cross-site Request Forgery? Cross-site Request Forgery (CSRF) is a malicious exploit of a website where unauthorized commands are sent from a user the website trusts, without this particular user’s knowledge. This is a vulnerability found in websites. Let’s see the below example to understand CSRF. Cross-site Request Frogery When Harry ...
Read more