Hoisting in JavaScript

Hoisting in JavaScript

Hoisting is a JavaScript behavior commonly known for making variables and functions available for use before the variable is assigned a value or the function is defined. In effect, it puts variable, function and class declarations to the top of their scope (the global scope or a function) before execution.In this article, we'll learn about hoisting and how it affects variables, functions and classes.

Introduction

Hoisting is a JavaScript behavior commonly known for making variables and functions available for use before the variable is assigned a value or the function is defined. In effect, it puts variable, function and class declarations to the top of their scope (the global scope or a function) before execution.

In actuality, JavaScript does not move or add code to hoist declarations. These declarations are put into memory during the compile phase of the interpreter - making them available before the code is executed.

In this article, we'll learn about hoisting and how it affects variables, functions and classes.

Hoisting Variables

One of the key aspects of hoisting is that the declaration is put into memory - not the value.

Let's see an example:

console.log(name); // Prints undefined, as only declaration was hoisted
var name = "John";
console.log(name); // Prints "John" 

This happens because JavaScript sees that we have a variable name in the scope and puts it into memory. Variables declared with var are given a value of undefined until they are assigned something else.

Variable Hoisting with let and const

JavaScript developers seldom use var in favor of the let and const keywords introduced in ECMAScript 2015 (commonly referred to as ES6). Variables declared with let and const are hoisted. However, they are not initialized with undefined, or any value. Therefore, if they are used before they initialized, we will get a ReferenceError.

Let's re-use the same example, but use let instead of var:

console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
let name = "John";
console.log(name);

The above code throws a ReferenceError in the first line and ends execution.

The const keyword was added to introduce immutable values in JavaScript - values which cannot be changed after it was initialized. As such, when using const we must declare and assign a value to the variable. If we do not, we'll get a SyntaxError:

console.log(name); // Uncaught SyntaxError: Missing initializer in const declaration
const name;

And like let, we get a ReferenceError when we try to use a constant before it was initialized:

console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
const name = "John";
console.log(name);

javascript node

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JavaScript Full Course - Beginner's Guide to JavaScript on Node.js

This complete 51-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript on Node.js. JavaScript Full Course - Beginner's Guide to JavaScript on Node.js

Introduction to Electron: Build Desktop App using Node and JavaScript

Introduction to Electron: Build Desktop App using Node and JavaScript. In this Electron tutorial, Felix will give a technical introduction to Electron. He’ll cover the basics and explain both benefits and challenges of using Node.js and JavaScript to build major desktop applications. How to build your first Desktop App with JavaScript using Electron.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

How to SETUP a WEB SERVER in Node.js, Express, JavaScript & HTML

Hey guys and gurls. I'll be showing you how to create a simple server using express in node.js. This is a super simple concept I believe everyone who's down

Need to Node – Volume 65

Volume 65 of Need to Node, a weekly collection of Node.js news, articles, tutorials and more.