JavaScript Variables: Declaration and their Scopes

“The basis of programming is to define the data and then manipulate the defined data.” This statement defines that every programming language requires data to be processed. There is nothing in programming without the data. So, JavaScript also defines their data using the variables. Here is the post from our experts on the topic: “JavaScript Variables: Declaration and their Scopes” where we will see different ways of declaring JavaScript variables and their scopes. This topic seems to be very simple, but there are subtle nuances in declaring and defining scopes of variables in JavaScript that are most important to know.

JavaScript Variables: Declaration and their Scopes

What are JavaScript variables?

In JavaScript, variables are the containers which hold the re-usable data. It is just like “named storage” for the data. In lemon terms, we can say that variable is like a “box” for data with a uniquely named sticker on it and defined value inside it. Also, the containers/box value can be changed as many times as needed. When the value is changed, the old value is removed from the container/box and the new value is stored in it.

For example, there is a box named as “Language” having value “English” which can be represented in JavaScript as:

var Language = "English";

Now if the value in the box is changed, then the old value will be removed and the new value will store in it. If the value of Language is changed to “Java”, then the old value “English” will be removed and the new value will be stored like this:

var Language = "Java";

JavaScript variables are defined data in three different parts:

  1. Variable Declaration: This is the first step where the variable registers it’s scope i.e. where it can be used.
  2. Variable Initialization:  This is done after declaration where the javascript engine assigns some space or memory to the variable. By default, the declared variable will take a value of “undefined” before assignment.
  3. Variable Assignment: This is done at last where the variable is assigned some value based on the standard javascript data types using assignment “=” operator.

Here are some of the examples:

Ways to declare a variable in JavaScript : 

Using “var” keyword: Before ES2015/ES6, JS variables were solely declared using the “var” keyword. It is generally not used in ES2015/ES6 javascript version. Here is the simple example of variable declaration using “var” keyword in a single line.

var user="Joe", age=25, isMarried=false;

Using “let” and “const” keyword: To create a variable in JavaScript ES2015/ES6 version, we need to use “let” for the variable whose value can be changed and “const” for those variables whose values remain same or cannot be changed. Creating variable using “let” keyword is almost same as “var” but it only differs with their scopes.

Here is the simple example of variable declaration using “let” and “const” keyword.

Also, a variable declared with “const” must be initialized.

const user; //SyntaxError: missing initializer

If you declare an object using the “const” keyword, you are allowed to change their properties.

Scope a variable in JavaScript : 

The scope of a variable means “where the variable or defined data can use its value”. In JavaScript, scopes are of two types:

  1. Global scope.
  2. Local scope.

The below example defines the types of scopes:

But the scope of the variables in JavaScript can also be referred as “function scope” and “block scope”.

Function scope: Creating a variable inside the function creates a new local scope as function scope.

Block Scope: It will be scope like a variable inside “if”, “‘for”, “foreach”, or normal “{ }” block.

“Var” scope:

Before the introduction of ES2015/ES6, the variable declared using “var” keyword were scoped only to the function (local scope) and the global scope i.e. they are visible through blocks. The code inside { } does not necessarily have a local scope.

Note: “var” declaration is hoisted (processed) at the start of the function but the assignments are not. This means that the variable declared using “var” are processed at the start of the function i.e. it doesn’t matter whether they are declared at the end or at the start of the function, they will be processed at the beginning of the function but their assignments are processed at the place where the assignment is done.

Let’s understand the same through an example:

“let” scope:

The scope of the variable changed after the introduction of the JavaScript version ES2015/ES6 when the variables are declared using “let” and “const”. They are followed globally as well as locally with function and local scopes.

Let’s understand the same with an example using “let” and “var” keyword:

That’s it for now. Hope you understood the basics concepts of JavaScript Variables: Declaration and their Scopes now which has always been a sort of confusion for javascript beginners.

Print Friendly, PDF & Email


Read more on Computer Programming articles:-

 Computer Programming Articles

Contribute to EduTechLearners:-

Please write comments if you want to share more information regarding the above notes. If you want some more notes/books on any of the topics please mail to us or comment below. We will provide you as soon as possible and if you want your’s notes to be published on our site then feel free to contribute on EduTechLearners or email your content to (The contents will be published by your Name).

Leave a Reply