Variables in JavaScript

Variables play an important role in JavaScript. They are a solution to store and track information in an application, making it easier to manipulate and use data. In JavaScript, there are 3 variables in JavaScript that I will tackle in this article:

var, let, const. 3 Variables in JavaScript

Var.

The var keyword is used to declare a new variable and optionally assign a value to it. This variable can be updated, and it has scope and hoisting. Variables declared with var are function-scoped, meaning they exist within the function in which they are declared. The problem with global declarations is that they can also be accessed outside of the function if they are declared globally, causing confusion and problems.

Let.

On the other hand, let is block-scoped, which means that the variable is only accessible within the block in which it is declared. This block can be a function, loop, or conditional statement. The main difference between var and let is their scope, and while var is almost obsolete, let is the preferred way of declaring variables in modern JavaScript.

Const.

The const keyword, as its name implies, creates a constant variable that cannot be reassigned to a new value. Although the object properties can be updated or added, the general understanding is that the variable itself is immutable. This makes const a useful keyword for storing values that are intended never to change.

I want to point out that when a variable is declared inside a function, it can only be accessed within that function, creating a local scope. Variables declared inside curly braces, such as those in if statements, switch conditions, and/ or loops, are known as variables within block scope.

Block scope variables are not accessible outside the block in which they are declared.

Also, it is important to understand hoisting, which is JavaScript’s default behavior of moving all declarations to the top of the current scope.

In other words, JavaScript will “hoist” any variable declaration to the top of the function or script in which it appears, making it available throughout the scope.

Bonus: Hoisting

According to MDN web docs Hoisting in JavaScript refers to the behavior where the variables in JavaScript, and function declarations are moved to the top of their respective scopes at compile-time before the code is executed. This means that regardless of where a variable or function is declared in the code, it will be as if it was declared at the top of its scope.

Although the term “hoisting” is not officially defined in the ECMAScript specification, the concept is still widely used and discussed in the JavaScript community. The spec does define certain declarations, like function declarations and async function declarations, as hoistable declarations, meaning they can be moved to the top of their scope.

However, hoisting is also commonly associated with var declarations, even though they are not technically hoisted in the same way as function declarations. When a var declaration is hoisted, only the declaration itself is moved to the top of the scope, not the assignment or initialization of the variable. This can lead to unexpected behavior and errors if not handled properly.

Hoisting in JavaScript is the process of moving variable and function declarations to the top of their respective scopes before execution, although the term is not officially defined in the ECMAScript specification. It can be a useful feature, but it can also lead to confusion and errors if not understood properly.

If you are still scratching your head, like I did when I first bumped into the term of hoisting, I will bring a little more light. I like analogies, so I will use a plumber toolbox as an example.

Every time the plumber needs a tool, it reaches into the toolbox and grabs it. Similarly, every time JavaScript needs a variable or function, it looks in the current scope (the “toolbox”) and uses it if it’s available.

Let’s say that the plumber’s toolbox is a bit disorganized, and sometimes tools get hidden underneath others. When this happens, the plumber may not see the tool it needs and must search for tools.

Likewise, in JavaScript, if a variable or function is declared later in the code but used before its declaration, the interpreter may not recognize it. However, because of hoisting, the declaration is moved to the top of the scope, so the variable or function is still accessible.

In the same way as a plumber can use a tool from the toolbox even if it’s at the bottom, JavaScript can access a variable or function even if it’s declared later in the code.

As I pointed out in this article, these 3 variables in JavaScript are the existing ones, and the “var” is less used. If you are interested in seeing what else can you do in JavaScript, read this article.

Is this helpful for you? Why not subscribe to my newsletter and receive an email with all the articles I write about coding, and dev things, mainly Freelancing, and JavaScript? Subscribe to Newsletter!