ES6 JavaScript: Understanding Let & Const
There were many updates brought by ES6. One of the Syntax updates introduced was the concept of declaring variables with let
andconst
instead of var
To understand whylet
& const
were introduced, we must first understand how var
works & the concept of hoisting → That being said, here are the 5 questions we will cover in order:
- HOW DOES VAR WORK?
- WHAT IS HOISTING
- WHAT IS LET & CONST?
- WHY WERE LET & CONST ADDED IN ES6?
- WHEN SHOULD YOU USE LET & CONST?
1. How does Var work?
- Prior to ES6,
var
was the main way to declare variables.
Ex.var name = "Linda";
- One of the things that made Javascript confusing prior to ES6 was how it determines variable scope. Scope refers to when and where within your code a variable exists.
- To Understand the scoping issue
var
has, we must understand the difference between…
BLOCK SCOPE vs. FUNCTION SCOPE
- In most programming languages variables have a block scope → variables created in a code block or inside curly braces {}. They cease to exist outside of them → they are scoped to the block.
- BUT
var
in javaScript has function scope → variables live within functions & are scoped to the function. Any variable you create with the keyword VAR is local to the function that they were created in. A variable that was created in a parent function lives also in the child function. - Let’s clarify by looking at an example:
FUNCTION SCOPELocal JS Variables
Variables declared within a JavaScript function, become LOCAL to the function.example:// code here CANNOT use petNamefunction myPet() {
var petName = “Domino”;// code here CAN use petName}Global JS Variables
A variable declared outside a function, becomes GLOBAL.A global variable has global scope: All scripts and functions on a web page can access it.example:var petName = “Domino”; // code here can use petName function petName() { // code here can also use petName }---------
--> the examples above show that var is not limited to the curly brackets. It is the function which defines the scope.
You might be wondering ..ok this is nice but why is function scope a problem… I have one word for you:
HOISTING
→var
uses something called ‘hoisting’, which can lead to unexpected results.
2. What is Hoisting?
- Variable declarations are one of the most basic aspects of any programming language. One thing that can be dangerous in JavaScript is that variable definitions are hoisted.
- Javascript actually rearranges your variable declarations during the browser processing phase and moves them to the top of their functional scope. This means that variables can actually exist before you use them.
- Here’s an example:
Let’s see what happens if I put the variable after the console.log…
function myCourse() {
console.log(courseName + " is a great class");
var courseName = “JavaScript”;
}myCourse();
This will output: undefined
What we get is kind of strange. The reason this happened is because before it ran any of the code javaScript did this..
function myCourse() {
var courseName;
console.log(courseName + " is a great class");
courseName = “JavaScript”;
}myCourse();
This will output: undefined is a great class
The variable is actually sitting there but it doesn’t have a value yet and this can cause problems when you create more complex applications. → Hoisting can turn an innocent looking declaration into a subtle bug.
Let’s see what happens if we put a variable outside of the function..
var courseName = “Intro to JavaScript";function myCourse() {
console.log(courseName + " is a great class");
var courseName = “JavaScript”;
}myCourse();
This will output: undefined is a great class
Why? because the variable of courseName is still appearing prior to the console.log since it is being hoisted, but it is not defined till after.
Now that we understand var
, let’s walk through what Let & Const are, why they were added & when you should use them:
3. What is Let & Const?
let
allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike thevar
keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
Example:
- The
const
declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. Here is an example:
- Variables declared with
let
can be reassigned, but can’t be redeclared in the same scope. Here is an example:
- Variables declared with
const
must be assigned an initial value, but can’t be redeclared in the same scope, and can’t be reassigned.
4. Why were Let & Const added?
- Solves issues caused by Hoisting →
- Hoisting means “moving to the beginning of a scope.” In JS, function declarations are hoisted completely, variable declarations only partially. Javascript actually rearranges your variable declarations during the browser processing phase and moves them to the top of their functional scope. (check out my blog on hoisting)
- Variables declared with
let
andconst
eliminate this specific issue of hoisting because they’re scoped to the block, not to the function.
5. When should you use Let & Const?
- use
let
when you plan to reassign new values to a variable, and - use
const
when you don’t plan on reassigning new values to a variable. - ***Is there any reason to use
var
anymore? Not really.
Hope this helped clarify why Let & Const were introduced. Please feel free to message me with any questions in the comments below or via my IG:
https://www.instagram.com/lindavivah
XOXO & Happy Coding!