New syntax in JavaScript ES6
Tags: coding, tutorial, javascript, es6
Published: 2019-12-02 12:07:40

---
title: New syntax in JavaScript ES6
published: true
date: 2019-05-06 09:25:45 UTC
tags: coding, tutorial, javascript, ES6
canonical_url: https://www.girikon.com/blog/girikon-salesforce-consultant-explain-new-syntax-in-javascript-es6/
---

According to **[Girikon’s Salesforce Consulting Services Team](https://www.girikon.com/salesforce-consulting-services/)** JavaScript has progressed very rapidly in recent years and is still a very powerful programming language that runs on various platforms. If you’re learning JavaScript in 2017 and you haven’t touched ES6, you’re missing out on an easier way to read and write JavaScript.

[![SALESFORCE CONSULTANTS](https://www.girikon.com/wp-content/uploads/2019/05/img1.png)](https://www.girikon.com/wp-content/uploads/2019/05/img1.png)

ES6 refers to version 6 of the ECMA script programming language. ECMA script is the standardized name for JavaScript and version 6 is the next version coming after version 5 which is a major enhancement of JavaScript.

**Let’s start**

Before ES6, the only way that we could declare a Variable in JavaScript was using the var keyword. When we declared a variable using var Keyword inside a Function. This means that the Scope of that variable would exist only within the Function in which it was declared. And it still makes sense if we declared global variable (outside of a function).

Let’s see this example:

[![code](https://www.girikon.com/wp-content/uploads/2019/05/img2.png)](https://www.girikon.com/wp-content/uploads/2019/05/img2.png)

What do you think it will print? 1 or 2?

It will print both value (1 and 2) in the function, firstly 2 and then 1. This is because function scope 2 is printed when the function is called and because of the global scope, 1 is displayed the second time.

Most of you would have get this easily and everything is great until we encounter code inside an if Statement like the example below:

[![ES6](https://www.girikon.com/wp-content/uploads/2019/05/img3.png)](https://www.girikon.com/wp-content/uploads/2019/05/img3.png)

The code print 2, twice because the var keyword does not support block scope. This example makes no sense to you. A block is any code within curly braces. Block scoping ensures that any variable defined within those braces don’t become global instead they have local scope this type of control prevent you from unexpected behaviour in your code.

**“Let” Is the new Var**

The lack of block scoping has caused many headaches for JavaScript developers especially during variable declaration in for loops. So, for this ES6 introduced Let Keyword any Variable assigned with let always have block scope and cannot be hoisted. If we will use let keyword instead of var then it will be less error prone and avoid all the confusing bugs.

**Const**

ES6 also introduced another keyword const this can be useful when you need to declare a variable that cannot be redeclared. Const keyword are also blocked scope and cannot be hoisted. However, there are couple of things to be aware of when using the const keyword since const value cannot be reassigned, they must be initialized at the time they are declared.

Just don’t forget that constants are immutable so when dealing with objects or arrays, only the object itself cannot be reassigned. Property within that object or array can be changed example:

[![Function](https://www.girikon.com/wp-content/uploads/2019/05/img4.png)](https://www.girikon.com/wp-content/uploads/2019/05/img4.png)

We can execute the following code and the name property will be reassigned without throwing an error.

**Why type the same thing twice?**

Developers are always trying to get data in and out of arrays or objects so for this they use code where the property of an object are initialized using variables like:

[![object](https://www.girikon.com/wp-content/uploads/2019/05/img5.png)](https://www.girikon.com/wp-content/uploads/2019/05/img5.png)

In ES6 you no longer must repeat yourself if the variables and object property names are the same. This code accomplishes the same thing:

[![salesforce consulting](https://www.girikon.com/wp-content/uploads/2019/05/img6.png)](https://www.girikon.com/wp-content/uploads/2019/05/img6.png)

All we did here was remove the repeating variable name and colon (:). This is very useful when we have objects containing many fields.

ES6 also provide a simpler way of getting out of array or objects. This helps reduce repetitive lines of code example:

[![consulting](https://www.girikon.com/wp-content/uploads/2019/05/img7.png)](https://www.girikon.com/wp-content/uploads/2019/05/img7.png)

You can now access the data through the variable names. So here the number 1 would be Printed to the console. But instead of this you can use another shortened method known as array DE structuring.

[![structuring](https://www.girikon.com/wp-content/uploads/2019/05/img8.png)](https://www.girikon.com/wp-content/uploads/2019/05/img8.png)

The bracket on the left side of the assignment are part of the new DE structuring syntax. So, this is something like four variables named one, two, three, and four and assign the first value in the numbers array to variable one, the second value to variable two, and so on. Shorter, sweeter, great.

We think that once you start working with ES6, you will come to love them as much as we do.


The post [Girikon Salesforce Consultant explain New syntax in JavaScript ES6](https://www.girikon.com/blog/girikon-salesforce-consultant-explain-new-syntax-in-javascript-es6/) appeared first on [Salesforce Consulting Company | United States | Phoenix, Arizona](https://www.girikon.com/).