Did you know?
Six different versions of ECMAScript were released before ES6 (Yes, there was a version 5.1 too)!
So, what makes ES6 different from the other ECMAScript versions?
Block Scope in ES6 | const and let
- Function scope: when the variable is declared within the parenthesis of a function
- Global scope: when the variable is declared outside of the parenthesis or at the top of the overall program code
To solve the issue of function and global scope in a variable, let and const were introduced in ES6. Both let and const are block-scoped variables and can only be accessed within the given block or parentheses that they are declared in.
Before ES6 – Variable Declaration using var
- Code became hard to maintain
- Collision with variables from different libraries
- Variable could be accidentally re-declared and re-assigned
Take an example of two donut variables declared and assigned using var. Both variables are declared with the name donut but the value of the donut inside the eatDonut function has been reassigned from ‘chocolate glazed’ to ‘chocolate-filled’.
In the example below, you can access the variable donut even outside of the block scope.
How Did Let Solve the Issue of Global and Local Variables?
Let’s expand the concept using the donut problem from the previous example. If your donut is declared with let and assign the value ‘chocolate-filled’. Assign a new value to your donut variable within the same block. An error will be thrown that ‘the identifier has already been declared’.
If you declare a variable using let, assign it a value, and try to access it outside of the scope. You’ll get the same error: ‘Identifier donut is not defined’.
We have a Block-scoped Variable! Now, Why do we Need Const?
Const is also a block-scoped variable but that’s not all. Once you’ve declared a variable using const and assigned a value, it cannot be re-assigned. The value is now constant hence the name const!
To understand this, take the donut shop example again. If you declare a variable donut using const then once the value has been assigned, there’s no changing it. If you try to assign a new value to the variable donut, then you’ll get the error: ‘assignment to constant variable’
Arrow Functions in ES6
The arrow functions also handle ‘this’ keyword differently as compared to the regular functions. In a regular function, ‘this’ keyword refers to the object that is called the function. This object can be anything, for example, a button or a document. In the arrow functions, ‘this’ keyword ALWAYS refers to the object that called the function.
Arrow Function with Two Parameters
With the arrow function, we can define the function from the regular function example in a single line!
Arrow Function with One Parameter
In an arrow function with only one parameter, we can also eliminate the round parenthesis.
Arrow Function with No Parameter
In the arrow function below, there are no parameters. We’ve also eliminated the curly braces and returned a string directly.
ES6 has many more cool features. We’ll discuss these features in the upcoming articles. In the meantime, try using let, const, and arrow functions in your code and comment down below if you have any questions.
This post was written by Nearly Done