Stylish JavaScript with es6

ECMAScript is the Standard version of Javascript with a goal of unifying language specifications and features. All significant Browsers and JavaScript compilers support ECMAScript.

In this post, we will cover some major key points of es6 

Variable with es6
Objects with es6
Function with es6

Variable with es6

Variable Declaration with es6

In JavaScript for declaring a variable var keyword is used.

Example :



# comment line 
var someVariable ="Some thing";
console.log(someVariable)

Output:

javascript variable Decleration

But in case of es6 we have three keywords for Declaring a variable these are let, var , const.

Then question arises

Why es6 contains three keywords for declaring a variable?

 Or

What is the problem with ‘var’ keyword so that ECMAScript was needed to introduce two more keywords?

The biggest problem with var keyword is that we can overwrite a variable declaration without any error.

Example :



/**
* Overwrite a Variable
*/

var someVariable="Something";
var someVariable="Nothing";
console.log(someVariable);

Output:

overwrite variable with Javascript

But in case of Declaration with let keyword, we can’t do so.

Example :



/**
* Overwrite a variable with let keyword
*/

let someVariable="Something";
let someVariable="Nothing"; // throw error
console.log(someVariable);

OutPut:

Similarly, const keyword is used for declaring a constant variable inside the complete script.
Example:



/**
* Calculate Area of Circle
*/
Types of Joins
Const PI =3.14
let radius=12m;
console.log("Area of Circle is :: ",(PI*(radius*radius)));

Objects with es6

Objects are similar to Arrays. But in Objects, we can access and modify data with the help of their properties.
But in the case of Arrays, we use indexes to access and modify data.

Objects are Userful for Storing data

Data in a structural way looks like real-world data.



/**
  * Declaring an Object
*/


var book={
  "name":"IKIGAI",
   "author":"Hector Garcia & Francesc Meralies" ,
   "publication":"Penguin"
}

In the above example, Book is an Object and name, author and publication are its properties.

How to access JavaScript Objects?

For accessing JavaScript Object (Same for es6) we can follow these approaches :

  • Accessing JavaScript Object Properties using DotNotation
  • Accessing JavaScript Properties with Bracket Notation
  • Accessing JavaScript Properties with Variables
Accessing JavaScript Object Properties using DotNotation


/**
  *Accessing Javascript Object using DotNotation 
*/

var book={
  "name":"IKIGAI",
   "author":"Hector Garcia & Francesc Meralies" ,
   "publication":"Penguin"
}
//accesing book name
console.log(book.name);
//accessing book author
console.log(book.author);
//accessing book publication
console.log(book.publication);

Output:

Accessing JavaScript Properties with Bracket Notation

We can access the above values also using Bracket Notation.



/**
  *Accessing Javascript Object using BracketNotation 
*/

var book={
  "name":"IKIGAI",
   "author":"Hector Garcia & Francesc Meralies" ,
   "publication":"Penguin"
}
//accesing book name
 console.log(book["name"]);
//accessing book author
console.log(book["author"]);
//accessing book publication
 console.log(book["publication"])

Output:

Accessing JavaScript Properties with Variables

We can also access JavaScript Objet with help of Variables as shown below example. Again in case of Accessing JavaScript Properties with Variables, we are going to use Bracket Notation.



/**
  *Accessing JavaScript Properties with Variables
*/

var favourite = {
      game: "Cricket",  food: "Litti",  movieSeries: "X-man"
  };
  var myFavourite = "food";  //Declaring a new variable
  var myFavouriteFood = favourite[myFavourite];
  console.log("My favourite Food ::",myFavouriteFood); 

OutPut:

In this example, Object favorite contains a set of key-value pairs i.e properties and we will access properties of favorite objects on the basis of a variable myFavorite.

Function with es6

For Declaring a function in Javascript there are several ways.
Simplest way
Simplest way for declaring a function in Javascript is
Syntax:



/**
  *function declaration
*/


function function_name(){

 //function body 
}

Example: Add Two Numbers in JavaScript



/**
  * funtion decalartion
  */
 
 function addNum(a,b){
 
   return console.log("Addition of Two Numbers :: ",a+b);
 
 }
//calling function
 
 addNum(5,6);

OutPut:

Anonymous Function

A function which doesn’t contain its name is known as Anonymous function.
We can perform the same operation using the Anonymous function.
Syntax :



function (){
    //function body 
}

Example:



/**
  * Anonymous function declaration
  */

 
 var addNum =function (a,b){
   
   return console.log("Addition of Two Numbers :: ",a+b);
 }
//calling function
 addNum(5,6);

OutPut:

Arrow function

es6 introduces a new way for function declaration known as Arrow function.
Syntax:


()=>{

  //function body

}

Example:



/**
  * arrow funtion decalartion
  */

 let  addNum = (a,b) =>{
   return console.log("Addition of Two Numbers :: ",a+b);
 }
//call function
addNum(5,6);

OutPut:

Leave a Reply

Your email address will not be published. Required fields are marked *