What are variables in JavaScript?

Variables in JavaScript

A JavaScript variable is a named location that stores data. We use some reserved keywords to declare JavaScript variables. A variable should have a unique name. Some rules need to be followed while naming a variable in JavaScript. They are:

• They are case-sensitive. It means that a variable named with ”m” is different from a variable named with ”M”.
• There are some reserved words in JavaScript. These reserved words cannot be used to name a variable. Ex: var, let, const cannot be variables in JavaScript.
• A name cannot start with a number. It can only start with a letter(capital or small), underscore( _ ), or a dollar( $ ).

Global variable and Local variable

We can declare a JavaScript variable in the local scope and global scope. Therefore, variables are of two types.

1) Local Variable

A variable that is declared in the local scope is called a local variable. They are only defined within a function or a block. Variables having the same name can be used in different functions.

2) Global Variable

A variable that is declared in global scope is called a global variable. They are defined outside a function. They are accessible from any function. Variable having the same name can be used in all the functions.

Let us understand the working of a local variable and global variable with the help of an example.

var salutation = "Hi"    // global variable
Function myfunction(){
  var message = “People!”;
  alert(salutation + message);    //can access global and local variable
  }
myfunction();
alert(salutation); //can access global variable
alert(message); //can’t access local variable

Types of variables

Let us discuss some of the variable data types that can be stored inside a variable

1) Number

We can store all numbers that include whole numbers and decimals in variables. There is no need of declaring the type of variable. We can directly enter the number without quotes.

Example: Height = 178

2) Strings

We can store simple text in variables. We have to include them in quotes. It is because that JavaScript takes it as a continuation to the variable name if the quotes are not put.

Example: name = ‘CODEDAMN’

3) Boolean

The boolean values are generally used to test a condition. It declares true or false.

Example: apple = true

4) Arrays

They are single objects that contain multiple values which are separated by commas and included in square brackets. We can access each of the values by their location inside the array.

Example: fruits = [ ‘apple’, ‘mango’, ‘banana’, ‘water melon’ ]

5) Objects

Objects are models of code that contain information about a real-life object. For an instance, we can consider a box containing all the details of a person as shown below.

let man = { name = ‘Rahul’, height = ‘179cm’, weight = ‘78kg’ }

We can access the name, height, and weight of the man in the given box by using the following syntax –

man.name

man.height

man.weight

Ways to declare a JavaScript Variable

There are many keywords with which we can declare a variable in JavaScript. Different keywords are used under different circumstances. Let us discuss some of the keywords with which we can declare a variable in JavaScript.

1) Using var keyword

We use this keyword when declaring a variable in a global scope. The variables that are declared by the var keyword are defined outside the function. They are accessible from any function. We can change the value of the variable declared by the var keyword if at all we want to change it. There are high chances of confusion when using this keyword for long codes.

Example:

<script>
var codelearning = "Codedamn";
console.log(codelearning);
</script>

We will get the output as shown below:

Codedamn

2) Using the let keyword

This keyword is used when declaring a variable in a local scope. The variables declared with the let keyword are solely defined inside a function or a block. We can use variables with different names in different functions. We can change the value of the variable declared by the let keyword if at all we want to change it.

Example:

<script>  
  {   
    let number = 2;   
    document.write("The number inside the function = " + number);   
  }   
  document.write("The number outside the function = " + number);   
</script>  

We will get the output as given below.

The number inside the function = 2

With this, it gets clear that the let variable is only defined within a block. The code written outside the block is not executed.

3) Using the const keyword

This keyword is used when declaring a variable in a local scope. The variables declared with this keyword are only defined within a block or a function like that of a variable declared using the let keyword. We cannot reassign the value given to a variable declared with the const keyword but by using the let keyword we can reassign the value of a declared variable. However, we can alter the contents inside the object box declared using the const keyword. Once the name of the variable is declared with the const keyword, we cannot use the same name to declare using the other keywords.

const x = 2; // Allowed
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
const x = 2; // Not allowed

Example:

const age = 18;
try {
  age = 25;
} catch (err) {
  console.log(err);
}
console.log(age);

You will get the output as shown below

> object { }
> 18

Differences between var keyword and let keyword

• The variables declared using the var keyword can be accessed before their declaration. JavaScript moves all the variables declared using the var keyword to the top of the function. This process is known as var hoisting.
• The variables declared using the let keyword cannot be accessed before their declaration. They are not hoisted.
• A variable declared using the var keyword has function scope. It means that if it is used inside a function, it is available throughout the function and if it is used outside the function, it is available globally.
• A variable declared using a let keyword is only available inside a function. It does not act as a global object even if it is declared outside a function.
• The variables declared with the var keyword can be redeclared in the same scope but it is not possible for the variables declared using the let keyword.

This was all about variables in JavaScript. You can check out our courses on Codedamn of javascript. 

Do check out our blog on the Filter method in JavaScript.