Understanding JavaScript keyword var, let, const and hoisting.
sromelrey
Posted on May 26, 2024
Good day, everyone! Today, we'll explore how var
, let
, and const
work and how hoisting affects each.
Before we dive in, I recommend reading my blog on execution context for a deeper understanding of hoisting.
JavaScript Execution Context and JS Engine Components
Goals and Objectives in this topic:
- Understand how
var
,let
, andconst
works under the hood. - How hoisting affects each keyword.
- What is Temporal Dead Zone ?
The keyword var
, let
, and const
is what we use when declaring a variable in JavaScript.
Let's start with the var
keyword before ES6 declaring variable can only be done using var
the following are the features of this keyword:
var
keyword:
Function Scope: Variables declared with
var
are scoped to the function in which they are declared.Hoisting: Variables are hoisted to the top of their scope and initialized with
undefined
.Re-declaration: The same variable can be declared multiple times within the same scope without causing an error.
Global Object Property: If declared outside a function, var becomes a property of the global object (e.g., window in browsers).
The 'let' and 'const' keywords are features introduced in ES6, addressing the shortcomings of the 'var' keyword.
Here's a list of how and what you can use this keywords:
let
keyword:
Block Scope: Variables declared with
let
are scoped to the block in which they are declared (e.g., inside a{}
).Hoisting: Variables are hoisted but not initialized, leading to a temporal dead zone until the declaration is encountered.
Re-declaration: Cannot be re-declared within the same scope, preventing accidental redefinitions.
Temporal Dead Zone: Accessing the variable before its declaration results in a Reference Error.
const
keyword:
Block Scope: Variables declared with const are scoped to the block in which they are declared.
Hoisting: Variables are hoisted but not initialized, leading to a temporal dead zone until the declaration is encountered.
Re-declaration: Cannot be re-declared within the same scope, similar to let.
Immutability: Must be initialized at the time of declaration and cannot be reassigned. However, if the variable holds an object, the object's properties can still be modified.
Temporal Dead Zone: Accessing the variable before its declaration results in a Reference Error.
Understanding how hoisting works with different keywords
What is hoisting? Hoisting is a feature in JavaScript that allows you to use variables or invoke functions before they are declared. Here's a sample code to illustrate this concept:
Here's a sample code of hoisting using var
and function declaration
// * Accessing the 'age' variable before it is initialized
console.log(age);
// ? Will log undefined
var age = 12;
// * Invoking the 'logAge' function before it is declared
logAge(age);
// ? Will log AGE is 12
// * Invoking logAge Function Declaration before it's being declare
function logAge(ageArg) {
console.log(`log AGE is ${ageArg}`);
}
Here's a sample code of hoisting using let
and const
and function expression
// * Accessing let age before it's initialization
console.log(age);
let age = 12;
// * Invoking logAge Function Expression before it's being declare
logAge(age);
let logAge = function () {
console.log(`log AGE is ${ageArg}`);
};
I will write a separate blog post under the topic of functions to further explain how hoisting works with function expressions and function declarations when invoking a function.
Temporal Dead Zone
The temporal dead zone starts from the block until the let
or const
variable declaration is processed. In other words, it is the location where you cannot access the let variables before they are defined.
Here's a sample code to demonstrate the TDZ
console.log(myVar); // ReferenceError: Cannot access 'myVar' before initialization
let myVar = 10;
console.log(myVar); // Output: 10
Although 'let' and 'const' are hoisted, accessing them before their declaration results in a Reference Error, unlike 'var' which returns undefined. This behavior is known as the 'temporal dead zone."
Conclusion
Understanding how var, let, and const work and how hoisting affects each keyword is crucial for writing efficient JavaScript code.
-
var
is function-scoped, hoisted, and can be re-declared within the same scope, which can lead to unexpected behaviors. -
let
andconst
are block-scoped, also hoisted but not initialized until their declaration, leading to the temporal dead zone which prevents access before initialization. -
const
also enforces immutability, meaning it must be initialized during declaration and cannot be reassigned.
Hoisting allows functions and variables to be used before they are declared, but understanding the nuances between these keywords helps prevent common pitfalls, such as reference errors or unintended variable reassignments. For more details on hoisting with function expressions and declarations, stay tuned for my upcoming blog post.
Thanks for reading 😁😁😁😁
Posted on May 26, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 6, 2024