Youtube LinkScope, Hoisting and Reassignment in JavaScript
Table of Contents
1. Understanding Scope, Hoisting and Reassignment
Let's embark on a journey to explore the fundamental concepts of scope, hoisting, and variable reassignment in JavaScript. By understanding these concepts, we can easily grasp the differences between var, let, and const declarations, comprehend their scoping rules, examine how hoisting impacts variable declarations, and determine whether reassignment is allowed. So, let's dive right in and unravel the mysteries of these essential JavaScript concepts!
Scope
In JavaScript, there are three types of scope:
- Global Scope
- Function Scope
- Block Scope
- Global Scope: The global scope is the outermost scope in JavaScript and is accessible throughout the entire codebase. Variables declared in the global scope are accessible from any part of the code, including inside functions and blocks.
Example:
var x = 10;
function example() {
console.log(x); // Output: 10
}
example();
In the above example, x is declared in the global scope and can be accessed both inside the function example() and outside of it.
- Function Scope: Variables declared inside a function have function scope. They are accessible only within the function in which they are defined, and they are not accessible from outside the function.
Example:
function example() {
var x = 10;
console.log(x); // Output: 10
}
example();
console.log(x); // Output: ReferenceError: x is not defined
In the above example, x is defined inside the example() function and is accessible only within that function. Attempting to access x outside the function will result in a ReferenceError.
- Block Scope: Block scope was introduced in ECMAScript 2015 (ES6) with the introduction of
letandconstkeywords. Variables declared withletandconsthave block scope, which means they are only accessible within the block in which they are defined. A block is typically delimited by curly braces{}.
Example:
function example() {
if (true) {
let x = 10;
const y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: ReferenceError: x is not defined
console.log(y); // Output: ReferenceError: y is not defined
}
example();
In the above example, x and y are declared inside the if block and are accessible only within that block. Attempting to access x or y outside the block will result in a ReferenceError.
Reassignment
Variable reassignment refers to the act of assigning a new value to an already declared variable.
Here's an example in JavaScript:
let count = 5; //Assign
console.log(count); // Output: 5
count = 10; //Reassign
console.log(count); // Output: 10
count = count + 2; //Reassign
console.log(count); // Output: 12
In this example, the variable count is initially assigned a value of 5. Then, it is reassigned to a value of 10 and later updated by adding 2 to its current value, resulting in a final value of 12.
Variable reassignment allows for dynamic and flexible programming by allowing variables to store different values at different points in the program's execution. It enables the modification and manipulation of data throughout the program to reflect changing conditions or calculations.
Hoisting
- Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase.
- This means that regardless of where variables and functions are declared in the code, they are conceptually moved to the top of their respective scopes.
Here's a simplified example to illustrate hoisting:
The reason why variables and functions behave differently when hoisted in JavaScript is due to how they are initialized during the hoisting process.
1. In Case of Variable
- Variable declarations are hoisted but not their assignments.
- When a variable declaration is hoisted, it is moved to the top of its scope, but its assignment remains in place.
This is why variables declared with var are initially assigned a default value of undefined before the actual assignment statement is reached in the code.
2. In Case of function
- On the other hand, function declarations are hoisted along with their complete definition, including the function body.
This means that the entire function, including its code, is moved to the top of its scope during the hoisting process. As a result, functions can be called and executed before their actual declaration in the code, without any undefined value.
To illustrate with an example:
var a = 20; // Initialize a
var b; // Declare b
console.log(x); // Output: undefined
var x = 5;
foo(); // Output: "Hello!"
function foo() {
console.log("Hello!");
}
In this code, the variable x is hoisted to the top of its scope, resulting in undefined when accessed before its assignment. On the other hand, the function foo() is hoisted along with its definition, so it can be called and executed without any undefined value.
It's important to note that this behavior applies specifically to function declarations and variables declared with var.
Other forms of variable declaration, such as let and const, do not exhibit hoisting in the same way and will result in a ReferenceError if accessed before their declaration.
To avoid confusion caused by hoisting, it is generally recommended to declare variables at the beginning of their scope, rather than relying on hoisting to bring them to the top.