Scope and hoisting
Scope and hoisting are important programming concepts in JavaScript web development that control or manage the default variable accessibility and program behavior of user-defined program variables, data types, functions, and data objects in a JavaScript webpage source code. Understanding and understanding these concepts is crucial for any JavaScript web developer to create bug-free and predictable program source code.
So, let’s explore the scope and hoisting concepts in JavaScript web development.
Scope features in JavaScript web development.
Scope in a JavaScript web development script refers to the web script context within which a variable or function in a web development script is accessed or controlled. There are primarily three types of program variable scopes defined in JavaScript programming.
JavaScript global program variable scope.
All program variables or functions declared outside of any JavaScript web development script function or block have global scope. This means that these JavaScript user-defined variables are accessible or manageable from anywhere in the program source code.
let globalVariable = “This is a global variable defined”;
function checkGlobal() {
console.log(globalVariable); // here it is accessible inside the global function
}
checkGlobal(); // Result – “This is a global variable defined”
console.log(globalVariable); // Result – “This is a global variable defined”
In the example above.
- globalVariable is accessible both inside and outside the function because the scope of globalVariable is defined as global.
JavaScript function program variable scope.
User-defined variables declared inside a JavaScript web script program function are function-based scoped. This means that these functions can only be accessed or managed from within the declared function.
function localFunction() {
let localVariable = “This is a local variable scope”;
console.log(localVariable); // here it is only accessible inside the declared function
}
localFunction(); // Result is – “This is a local variable scope”
console.log(localVariable); // it displays an error – ‘localVariable’ is not defined
In this program.
- localVariable is only accessible from within the localFunction and cannot be accessed from outside the function. However, if it is accessed, it displays an error.
JavaScript block program variable scope.
With the introduction of the let and const data type variable methods in ES6, program variables declared within a curly block (surrounded by {}) are defined as block-scoped, meaning they can only be accessed and controlled from within that program block.
if (true) {
let blockVariable = “This is a block-scoped program variable defined”;
console.log(blockVariable); // here it is only accessible inside the defined program block
}
console.log(blockVariable); // Display error – ‘blockVariable’ is not defined
In this example.
- blockVariable can only be accessed and managed from within the if block where it was declared with an if statement. It cannot be accessed from outside the program block.
Hoisting concept in JavaScript.
Hoisting is a concept in JavaScript web development or programming where variables and user-defined function declarations declared in a program are moved to the top of their defined variable scope during the program compilation phase, before the user-created program source code is executed. This is known as “hoist” behavior in JavaScript.
JavaScript Variable Hoisting Concept.
With var in JavaScript programs, variables are hoisted to the top of their defined scope. But until their actual program declaration is executed, those variables are initialized to undefined.
console.log(sampleVar); // Result is – undefined (because it’s hoisted but not initialized yet in the program)
var sampleVar = “Vcanhelpsu”;
console.log(sampleVar); // Result is – Vcanhelpsu
Here in this example.
- The sampleVar variable is hoisted to the top of its scope, but the value of sampleVar remains set to undefined until the line where it is assigned “Vcanhelpsu” is executed and the program proper executes.
Hoisting concept with let and const in JavaScript.
The let and const data type declaration methods are also hoisted in JavaScript programs, but they function differently from var variables.
They are hoisted at the top of the program block, but are not initialized until program execution reaches the declaration line. This means that accessing them before their declaration in the program results in a ReferenceError.
console.log(testLet); // Display Error: Cannot access ‘testLet’ before initialization
let testLet = “Vcanhelpsu”;
console.log(sampleConst); // Display Error: Cannot access ‘sampleConst’ before initialization
const sampleConst = “Education Platform”;
Here in this program example.
- Here, both testLet and sampleConst variables are hoisted into the program, but they are stored in the “temporal dead zone” (TDZ) until they are initialized. This results in a ReferenceError being displayed if the program attempts to access them before they are declared.
Function Hoisting Concept in JavaScript.
In JavaScript programs, user-defined function declarations are hoisted to the top of their scope, which includes the function body. This means that JavaScript user programs can call a function before its declaration in the source code.
sampleFunction(); // Result – “Welcome to, Vcanhelpsu”
function sampleFunction() {
console.log(“Welcome to, Vcanhelpsu”);
}
In this program example.
- In this program, the function sampleFunction() can be called before its declaration because the function declaration is hoisted to the top of the program’s scope.
For example. functions are not hoisted to a program expression (assigned to a variable) in the same way.
sampleFunc(); // Error: sampleFunc is not a function
var sampleFunc = function() {
console.log(“Welcome to, Vcanhelpsu”);
};
In this program.
the sampleFunc() function is hoisted to a function, but it is hoisted as a program variable declaration (with the value undefined) instead of a function declaration. The function is defined just after the line where sampleFunc() is assigned to the function, which is why calling it before the assignment in the program results in an error.
Examples of variable hoisting and variable scope in JavaScript.
Example of variable hoisting with var.
console.log(sample); // Outputs: undefined (hoisted, but not initialized yet)
var sample = “Vcanhelpsu”;
console.log(sample); // Result – Vcanhelpsu
Example of hoisting with JavaScript let and const.
console.log(info); // Error: Cannot access ‘info’ before initialization
let info = “Vcanhelpsu”;
console.log(info1); // Error: Cannot access ‘info1’ before initialization
const info1 = “Vcanhelpsu”;
JavaScript function hoisting example.
hiVcanhelpsu(); // Outputs: Vcanhelpsu
function hiVcanhelpsu() {
console.log(“Vcanhelpsu”);
}
Example of function expression/not hoisted.
welcome(); // Error: welcome is not a function
var welcome = function() {
console.log(“How are you”);
};
Main Differences between Scope and Hoisting in JavaScript.
| Aspect | Var data type element | let and const data type element |
| Variable Scope | Function based variable scoped define in program | Block based variable scoped define in program |
| Variable Hoisting | It Hoisted to the top and initialized as undefined in program | it Hoisted, but not initialized (temporal store in dead zone) |
| Redeclaration features | Yes, the Can be redeclared in the same program scope | No they Cannot be redeclared in the same program scope |
| Reassignment features | This Can be reassigned in variable | This Can be reassigned (let), but not for const data type |
The result of Scope and hoisting in JavaScript.
- Scope in JavaScript programs indicates where and how variables and functions can be accessed in your program source code. This can include global, function, or block scopes, function variables, or method definitions.
- In JavaScript variable hoisting, variable and function declarations are moved to the top of their scope during program compilation. With var, initialization occurs on the declaration line. With let and const data type variables, these variables are stored in a temporal dead zone until they are initialized in the program.
