ES6 for beginners - part 1 (Let, Const) 
Tags: es6, javascript, beginners, webdev
Published: 2019-03-28 15:43:28

---
title: ES6 for beginners - part 1 (Let, Const) 
published: true
description: 
tags: es6,javascript,beginners,webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dvbio7pgoh5l6epaoryp.png
canonical_url: https://www.2n.pl/blog/es6-part-1
---
*I want to present to you the first part of the blog posts series "ES6 for beginners" written by our dev, Bartosz. [Next parts coming soon!](https://www.2n.pl/blog).*


#**Introduction**

In the beginning, I would like to congratulate everyone who has read some of my posts about [JavaScript](https://www.2n.pl/blog?tag=JavaScript+for+beginners)!

Of course, there is nothing to prevent you from starting from here, but I think that understanding the [previous parts](https://www.2n.pl/blog?tag=JavaScript+for+beginners) is much more important than reading about the new features in ES6. However, if you would like to start right away from this place, nothing stands in the way


Topics that I will touch are:

 1. let / const
 2. arrow functions
 3. classes
 4. spread operator/rest parameter
 5. destructuring
 6. array helper methods
 7. promises/fetch
 
###**Ok, for starters, what ES6 is?**

ES6 is basically ECMAScript 6 / ECMAScript 2015. ECMAScript is not any scripting language instead of a standard that Javascript is based upon. So, ES6 is a new version or new standard of JavaScript. ES6 brings many new features like the concept of classes, arrow functions etc. Almost all the modern browsers support ES6 but for the old browsers, there are many transpilers e.g. Babel.js those we need to include at top of our code to transpile ES6 to ES5 (JavaScript with old standards). All of the popular JavaScript libraries and frameworks like Node.js, ReactJS follow ES6.

#**We will start with something very simple but also very useful. *Let* and *Const*.**
 
We all know what the *var* keyword is. We have used it many times. New variable? *var*, new Function Expression? *var* etc. ES6 introduces two additional keywords, which are *let* and *const*. This does not mean that *var* will stop working now, but you are very encouraged to use the new ones.

###**let**

Short, It is really a new *var*. Let is encouraged to be used everywhere instead of the mentioned *var*. By everywhere I mean anywhere except when we want to use *const* (explanation is few lines below). Use *let* for example if you want to create a simple variable.

![](https://thepracticaldev.s3.amazonaws.com/i/58ol6wi0g4sh2y8zc81q.png)

![](https://thepracticaldev.s3.amazonaws.com/i/794885u1gomqjrne1c5g.png)

As you can see in this example, there is no difference. A logical question now would be, if there is no difference, why was it introduced to JavaScript?

![](https://thepracticaldev.s3.amazonaws.com/i/t1hl9whtd88gzv7qtsbz.png)

Let's follow another example. Here we can see the function which contains two *for loops*. The only difference is exactly the *var* and the *let*. However, if we want to check the values of *I* and *j* in the console, outside the block where the code is executed, we will get two different results.

When *var i = 0*, our *i* variable will be visible.

![](https://thepracticaldev.s3.amazonaws.com/i/ruqflf769naut4b3uaww.png)

However, if we use *let j = 0*, our *j* variable will not be visible.

![](https://thepracticaldev.s3.amazonaws.com/i/s7t46nrvvdgj4aqz04nq.png)

###**const**

The main reason we want to use the *const* keyword is when we don't want a variable to be re-declared in later code. For example, I strongly recommend using treat *const* like an old *var* and change to let when it is needed. Let's see what will happen when we decide to change the variable that we declared using a *const* keyword.

![](https://thepracticaldev.s3.amazonaws.com/i/om6bpxlcjb273ckcxqj5.png)

![](https://thepracticaldev.s3.amazonaws.com/i/w4od0spc6huyq825nxvc.png)

Error :)

Of course, it is still possible to use methods such as *push* etc, but as shown above, any "manual" change of the previously declared value will end with an error.

![](https://thepracticaldev.s3.amazonaws.com/i/tiqgxfbxdb36uj0dsqxf.png)

![](https://thepracticaldev.s3.amazonaws.com/i/qjetksoce0l88flldmip.png)

Our array has been modified.

In the next article, we will discuss another topic from the list: Arrow Functions.

####[Next Post will be published soon!](https://www.2n.pl/blog)