Understanding Variables, Scope, and Hoisting in JavaScript

Variables are one of the fundamental blocks of any programming language, the way each language defines how we declare and interact with variables can make or break a programming language. Thus any developer needs to understand how to effectively work with variables, their rules, and particularities. In today’s tutorial, we are going to learn how to declare, interact, and scope variables in JavaScript. We will introduce new concepts and important JavaScript keywords like var, let and const.

---

Declaring variables

Nowadays JavaScript has three different keywords to declare a variable, var, let and, const. Each with its own properties and particularities. Let’s start by making a simple comparison table of the 3 and then getting into the details.

KeywordScopeHoistingCan be reassignvarFunctionYesYesletBlockNoYesconstBlockNoNo

Don’t worry if for now, you are not sure what we mean by scope, hoisting, or any of the other attributes. We are going to cover them in detail next.

---

Variable Scope

Scope in JavaScript refers to context (or portion) of the code which determines the accessibility (visibility) of variables. In JavaScript, we have 2 types of scope, local and global. Though local scope can have different meanings.

Let’s work out through the definitions by giving some examples of how scoping works. Let’s say you define a variable message:

const message = 'Hello World'
console.log(message) // 'Hello World'

As you may expect the variable message used in the console.log would exist and have the value Hello World. No Doubts there, but what happens if I change a bit where I declare the variable:

if (true) {
    const message = 'Hello World'
}
console.log(message) // ReferenceError: message is not defined

Ups… Looks like we broke it, but why? The thing is that the if statement creates a local block scope, and since we used const the variable is only declared for that block scope, and cannot be accessed from the outside.

Let’s talk a bit more about block and function scopes.

Block Scope

A block is basically a section of code (zero or more statements) which is delimited by a pair of curly braces and may optionally be labeled.

As we already discussed the use of let and const allows us to define variables that live within the block scope. Next, we’ll build very similar examples by using different keywords to generate new scopes:

const x1 = 1
{
    const x1 = 2
    console.log(x1) // 2
}
console.log(x1) // 1

Let’s explain this one as it may look a bit strange at first. In our outer scope, we are defining the variable x1 with a value of 1. Then we create a new block scope by simply using curly braces, this is strange, but totally legal within JavaScript, and in this new scope, we create a new variable (separate from the one in the outer scope) also named x1. But don’t get confused, this is a brand new variable, which will only be available within that scope.

#javascript #programming

What is GEEK

Buddha Community

Understanding Hoisting in JavaScript

In JavaScript, Hoisting is the default behavior where variables and function declarations are moved to the top of their scope before code execution.

No Matter where function and variable are declared, it moved up top on their own scope. Doing this, it allows us to call functions before even writing them in our code.

How interpreter sees the above code:

We Know, In JavaScript, when we have a variable that is not defined then it occurs an undefined error. So in the above example, JavaScript only hoists the declarations part and we got an undefined error.

It’s important to keep in mind that, JavaScript only hoists declarations, not the initializations.

let us take another example,

why this time we got a ReferenceError? Because of trying to access a previously undeclared variable And remember JavaScript only hoists declarations. So Initialisation can’t be hoisted and we got an error.

ES6: Let Keyword

Like before, for the var keyword, we expect the output to be undefined. But this time we got a reference error. That Means let and const variables not hoisted? The answer is Variables declared with let are still hoisted, but not initialized, inside their nearest enclosing block. If we try to access it before initializing will throw ReferenceError due being into Temporal Dead Zone.

Hoisting functions

Like variables, the JavaScript engine also hoists the function declarations. And it allows us to call functions before even writing them in our code.

#javascript-hoisting #understanding #js-hoisting #javascript #hoisting

Scope of a Variable In Java [With Coding Example]

Introduction

Programmers define the scope of a Variable in Java that tells the compiler about the region from where a variable is accessible or visible. The scope of a variable in Java is static by nature. It means we have to declare it at compile time only. In this article, you will learn about the scope of a Java variable along with its types

What is the Scope of a Variable in Java?

Salient Points About the Scope of a Variable in Java

Conclusion

#full stack development #java variable #scope of a variable in java #variable #scope of a variable #scope

Variable Hoisting in Javascript

Introduction:

This article is in continuation of my previous article: Javascript Variable Scopes

Hoisting is a tricky and very important topic in javascript. Lot of questions asked in javascript interviews are based on hoisting.

In this article, we will go through variable hoisting in javascript and see how it affects the desired output.

So, let’s not wait further and dive into concept of hoisting.

What is Variable Hoisting?

Hoisting is a JavaScript mechanism where variables declarations are moved to the top of their scope before code execution.

This means when javascript engine compiles your code, all variable declarations using var are lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made.

Basically, it gives us an advantage that no matter where variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. It allows us to use variables before it is declared in our code.

The following example declares variable studentName and assign value John to it:

console.log(studentName);  // usage
var studentName = 'John';  //declaration & assignment

#es6 #hoisting #js-hoisting #javascript #variables

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

JavaScript Variables Hoisting in Details

The class is declared with a variable statement var Square = class {…}. The variable Square is hoisted to the top of the scope, but has an undefined value until the class declaration line. So the execution of var mySquare = new Square(10) before class declaration tries to invoke an undefined as a constructor and JavaScript throws TypeError: Square is not a constructor.

#javascript #variable #hoisting #es2015