Is A Web Learning

Is A Web Learning

Hoisting in Javascript

UpdatedOctober 15, 2021

•2 min read•View as Markdown

Hoisting in Javascript

Part of seriesJavascript

In JavaScript, variable can be declared after it has been used, so this means that a variable can be used before it has been even declared. As shown in the code below, the number of students can be printed onto console before it has been declared as the output appears to be 20.

students = 20;
console.log(students);
var students;

// Console
// 20

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Inevitably, this means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. Of note however, is the fact that the hoisting mechanism only moves the declaration. The assignments are left in place.

Hoisting with let and const does not work the same way as var, we have to declare our variable before actually initializing it as shown in the image below:

let hoisting.png

In the image below, it prints the output as 20 because the variable is declared before it is being used in the function displayNoOfStudents() i.e where the number of students has been initialized.

let hoisting.png

Be on safe guard

In JavaScript, the use strict directive can be used to execute the codes in strict mode. With strict mode, undeclared variables cannot be used, like in the image below which results in an error.

The following error will be displayed if strict mode is activated:

let hoisting.png

Comments

Join the discussion

No comments yet. Be the first to comment.

Javascript

Part 29 of 37

setTimeout and alert behaviour during Javascript execution

For setTimeout In the below code, we are going to change the value of a variable and see how the setTimeout behaves: let name = 'Shane'; setTimeout( function() { console.log(name); }, 1000); name = 'ShakeIt!'; // change the variable `name`. The...

More from this blog

Some, every and indexOf methods on arrays

Introduced in ES5, the only difference between Array.prototype.some() and Array.prototype.every() is the following: some() is used to check if at least one of the elements of the array passes the test implemented by the provided function; every() is...

Dec 14, 20213 min read

Some, every and indexOf methods on arrays

Sort method to sort arrays

The sort method sorts the elements of an array according to the callback function. For example on an array of numbers: function ascendingOrder(arr) { return arr.sort(function(a, b) { return a - b; }); } ascendingOrder([1, 5, 2, 3, 4]); // =>...

Dec 13, 20212 min read

Sort method to sort arrays

Use the reduce Method to Analyze Data in an array

The reduce() method allows for more general forms of array processing, and it's possible to show that both filter and map can be derived as special applications of reduce. The reduce method iterates over each item in an array and returns a single val...

Dec 13, 20212 min read

Use the reduce Method to Analyze Data in an array

Filter method to filter an array of objects

The filter() method creates a new array with all elements that pass the test implemented by the provided function. The filter() method calls a function on each element of an array and returns a new array containing only the elements for which that fu...

Dec 13, 20214 min read

Filter method to filter an array of objects

Map method to extract data from an array of objects

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. Example: let numbers = [1, 4, 9] let roots = numbers.map(function(num) { return Math.sqrt(num) }) // roots is no...

Dec 13, 20212 min read

Map method to extract data from an array of objects

I

Is A Web Learning

54 posts