March 26, 2021
4 mins read
Since it’s release in 2015, Javascript ECMAScript 2015 (ES6) has brought modern programming concepts and paragigms to the language. Many usful additions have been added to JavaScript like optional chaining, spread operator, Promises, classes, and much more.
We will look at some of the new concepts introduced in ES6 and hopefully by the end of this article, you will have a better understanding of how to apply these concepts to your daily programming life. Let’s get started and dive into the things you need to know about Javascript ES6.
Prior to ES6, JavaScript utilized the var keyword to declare mutable and immutable variables. Using only the var keyword in ES5, this only allowed usage within functions and global scope. There was no block-level scope.
Block scoping in Javascript basically boils down to variables you have access to based on their declaration scope.
A block scope is the area between the if, switch conditions or for and while loops. Whenever you see curly brackets ({…}), it is a block.
Lets take this simple code snippet for example:
// ES5 Code
var sleep = true;
if(sleep) {
var hours = 8;
console.log('inside block: ', hours); // inside block: 8
}
console.log('outside block: ', hours); // outside block: 8
As you can see in the code above, when we declare a variable with the var keyword in ES5, it is available outside the if block also, even though we have declared the variable within the if statement.
In modern javascript the console would complain to us as we should not have access to the hours keyword since it was declared within the if statement.
// ES6 Code
let sleep = true;
if(sleep) {
let hours = 8;
console.log('inside block: ', hours); // inside block: 8
}
console.log('outside block: ', hours); // Uncaught ReferenceError: hours is not defined
````
As you can see in the code above, the hours variable when declared using the let keyword is only accessible inside of the if block. If you attempt to access the variable outside of the if block you will get a reference error when trying to retrieve the hours value.
In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block ({...}).
## How to use the let keyword in JavaScript
In javascript we can declare mutable variables using the let keyword. This means we can assign a new value to that variable when we first declare it but, cannot redeclare nor reassign it's initial value.
```javascript
// ES5 Code
var value = 10;
console.log(value); // 10
value = "hello";
console.log(value); // hello
var value = 30;
console.log(value); // 30
As you can see from above, we have redeclared the variable value using the var keyword multiple times without any errors. Since Javascript ES5 had no concept of the const and let keywrods, we were able to reassign and redeclare a variable that had already been declared. This would definitley caused great confusions to programmers who work across teams as you would have to debug why a particular variable value was changing and where the change was first ocurring.
In ES6 when you use the let keyword, you will get an error when you try to redeclare the variable with the same name. This would inform you that the variable has already been declared and assigned a value thus preventing you from overwriting that variables.
// ES6 Code
let value = 10;
console.log(value); // 10
let value = 100; // Uncaught SyntaxError: redeclaration of let value
To make the above code run without error we can simply declare the variable value and reassign it without using the let keyword.
But, the following code is valid:
// ES6 Code
let value = 10;
console.log(value); // 10
value = 100;
console.log(value); // 100
````
We know are good to go and do not receive an error since we are reassigning a new value to the initial variable.
## How to use the const keyword in JavaScript
The const keyword works exactly the same as the let keyword except it truly an immutable variable, meaning it's value will never change. So let's look at how they differ from each other.
When using the let keyword from the example above, we were able to declare a variable and later reassign it.
// ES6 Code
let value = 10;
console.log(value); // 10
value = 100; // reassign value
console.log(value); // 100
“`
With the const keyword once a variable has been declared we will not be able to change it’s value or declarations. Or can we?
There are many changes that have been incorporated into JavaScript starting from ES6 and while the syntax may be new the concepts are not. In this article we’ve discuessed how such variables are used and reasoning behind errors shown when using keywords such as let, const and var.