let and const keywords illustration

Modern Javascript, part 1 : unavoidable keywords : let and const

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.


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;

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;
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 😉

Go to Modern Javascript PART 2 : arrow functions