JavaScript : Variables & Scope
Tags: javascript, webdev, programming
Published: 2021-07-16 18:51:59

Variable is a fundamental concept of programming. A variable is a container that stores a value or data. It is a named unit of data that is assigned a value.

Variables in JavaScript are different compared to other programming languages such as C and C++.

JavaScript is a ***weakly typed language***. It means that you do not have to specify the type for a variable declaration.

The scope is a policy that manages the availability of variables throughout the program.

In JavaScript, variables can be created in three ways, these are:

- var
- let
- const

## var

Before let and const were introduced there was only one method for variable declarations i.e var. Var is a keyword that is used to declare or *optionally* initialize a variable.

e.g: `var name;`

When a variable is **declared** using var then by default *undefined* is assigned to that variable. In this case, the name contains a value undefined. If you initialize a variable then it will contain the assigned value.

e.g: `var character = "Joseph Joestar"`
In the above example, the variable character contains a string value i.e *"Joseph Joestar"*

Var statement declares a **globally scoped variable**. This means that a variable declared using var is available in the global context i.e throughout the program.

![var](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6qa9ch2kmz6yclybpn5.png)

In the above example, we initialized the var variable with value as *Joseph Joestar*. This variable is now available in the global context of the program. We have also created a function *changeCharacter* that reassigns the value to the variable and then outputs it to the console. After executing the function, the value that will be printed to the console is *Dio Brando*.

Now, if we print the variable outside the function, it will still print *Dio Brando* instead of *Joseph Joestar*. Even though we have changed the value **only inside the function** still is printing the same value **outside the function scope**. This happens because **var creates a globally scoped variable**. The change is reflected globally thus we get this output.

This type of situation may create confusion while writing large components so you should avoid using var as much as possible. So what should we use instead of var?
ES6 introduced two new ways to create variables i.e using let and const.

## let & const

As we saw earlier that var declares globally scoped variables which may lead to issues if not used properly. This problem can be solved using *let* & *const*.

The variables created using let and const are **block-scoped**. A block is everything inside two curly braces i.e {}.

e.g: `let name` or `let name = "JOJO"`

![let](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv438byprxkwhzegukeh.png)

In the above example, we have created a new variable inside a function using the let keyword. This **name** variable is now block-scoped hence exists only inside that function. If we print it outside the function it will output **Reference Error: name not defined** to the console because name variable is not present in the global scope.

**const** is similar to let. It creates a block-scoped variable. The only difference is that you cannot reassign a new value to the const variable. The variable declared using const has a constant value. You cannot re-assign or re-declare value to the const variable, otherwise, it will throw **Type Error: assignment to constant variable** error.

![const](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j309yiyiwz29bl87ys19.png)

var is always hoisted in JavaScript. You can use the variable declared using var before its actual declaration.

let and const are also hoisted but they are not initialized.