Hello guys! Here the first part of a courses serie about the modern Javascript. Today, the subject will be really basic, so, really important : the variable declaration with last ES6 keywords : const and let.
LET’s go
Let specificities
- It has a block scope
- And it can be declared only one time except in another block
Simple use of the let keyword
let a = 1;
// here a equals 1
let a = 2;
// -> error, because a is already declared
if (true) {
let a = 2; // this will work, because we are inside a block
}You can do the following
let a = 1; // a = 1 a = 2; // a = 2 a = 3; // a = 3
And you can also declare without value :
let a; // a = undefined a = 2; // a = 2
Difference between var and let
- var has a function scope
- var can be re-declared
As we saw before, this will trigger an error :
let a = 'hello'; let a = 'bye'; // ERROR : a is already declared
But, this will work :
var a = 'hello'; var a = 'bye'; // It works, a = 'bye'
So, as you can see, you can declare a variable with let only one time inside a block, then, you can only change its value. That is the main difference with the var keyword.
Let’s CONST
specificities of the keyword
- It has a block-level scoping , as let
- And it can’t be redefined or re-declared
How to use const?
const a = 1; // here a equals 1 a = 2; // -> error, because a is already declared
Indeed, a const can have only one initialization.
However, a thing you must to know about const : a value is required. So, you can’t write this :
const a; // ERROR
When to use const ?
The answer is : as much as possible!
In the most of cases, you can use const. Even if you have an object, or an array, you can use it.
Example :
const object = {};
object.property = "hello";
// It's work perfectly because the reference has not changed.With an array :
const object = {};
object.property = "hello";
// It's work perfectly because the reference has not changed.A little bit of hoisting
What is hoisting? It’s a Javascript behavior about declaration. Declarations are “moved” internally during javascript execution. So, in some cases, you can access variables before initialization.
The var case
console.log(test); // ERROR : test is not defined
But if you define the test variable after the console.log(), like :
console.log(test); // undefined var test = 'value';
NO ERROR! Indeed, the declaration has been moved before. When I say “declaration”, I mean only “declaration” -> the variable has not its value yet! The equivalent code might be :
var test; console.log(test); test = 'value';
What about let and const?
Let and const are not hoisted! What does it mean? Simple : if you try to use a var declared with let or const before initialization, you will have a javascript error
In the future, I will write a more advanced article about hoisting, and only hoisting, so be patient 😉
What you need to remind…
If you need to memorize something, it’s :
- var – has a scope of function
- let – has block level scoping
- const – same as let, but can have only one value
AND, prefer use of const when it’s possible.
That’s it for let and const. Thank you for reading, and see you for the next part of my Javascript Modern guide 😉
