Variables in JavaScript

Variables are the fundamentals part of the JavaScript. A variable is a container which stores the data. You can reuse and manipulate that data via variable.

Dynamic Typed Language

In JavaScript, type of the variable ( integer, string, boolean ) is known at runtime. In JavaScript, a variable can be assigned different type of data in its lifetime. That is why, JavaScript is Dynamic Typed Language.

E.g. Suppose you create a vairable var c = 10;. In the life time of this c variable, you can assign string c = "string" or boolean c = true. There are no restrictions.

Static Typed Language

In Java, C, C++, you need to define type of variable while creating it. Like int c = 10;. Now c variable can not be assigned any string value.

Types of Variables in JavaScript

Have a look at following points to understand variable.

  • A variable is just a name given to memory location, in which data is stored. So it is just an address to that memory location.
  • In JavaScript, Type of the value stored in a variable can be changed. The value of a variable also can be changed.
  • In JavaScript, you need to declare a variable before using it.

There are three ways to declare a variable in JavaScript.

  • var keyword
  • let keyword
  • const keyword
The behaviour of the variable changes by how it is declared.
let and const keywords are introduced in EcmaScript 2015 ( EcmaScript 6 ).

var keyword

There were time when var was only way to create variables. Let us have a look at an example first.


var message;
var firstNumber;
                    

As you can see from above example, To create a variable, write var keyword followed by name of the variable and then semi-colon.

In above code, we have not assigned any value to the variable. Its value is undefined. Let us assign value to the variable.


var message;
var firstNumber;

message = "This is message";
firstNumber = 12;
                    

In above code, we defined the variable and then assigned values to those variables.
You can declare multiple variables with single line of code.


var message, firstNumber;

message = "This is message";
firstNumber = 12;
                    

You can directly assign variable when you declare it.


var message = "This is message";
var firstNumber = 12;

//OR
var message = "This is message", firstNumber = 12;
var message1 = "This is message1", firstNumber;
//firstNumber is undefined. 
                    

let keyword

let keyword was introduced in EcmaScript 6. You can use let keyword to declare variable. Following is the code snippet to declare a variable.


let message;
let firstNumber;
                    

To assign data to a variable, please have a look at following code snippet.


let message;
let firstNumber;
// Assign the variable
message = "This is the first value assign to variable";
firstNumber = 123;

// Use the variable
console.log(message, firstNumber);
                    

In the above code snippet, "This is the first value assign to variable" string is stored to message variable and 123 number is stored to firstNumber variable.

You can assign the value to a variable as per following.


// Assign value as per following
let secondNumber = 12;
                    

Multiple variables are declared as per following.


// You can declare multiple variables
let message, firstNumber;
                    

Assign the single value to multiple variables.


// assign the data to multiple variables
let thirdNumber = fourthNumber = 12;
console.log(thirdNumber); // 12
console.log(fourthNumber); // 12
                    

You can declare multiple variables and assign a value to one of them.


// assign value to single variable
let message2 = "This is new value", message3, startingNumber = 32;
                    

const keyword

Variable defined by const cannot be changed once value is assigned.
If you try to change the constant, then error will be generated.
Most of the times, programmers user UPPERCASE for naming constants.


const PI = 3.141593;
const LINE_COLOR; // Declare the const.
LINE_COLOR = "#0F10FF"; 
// Once assigned, you cannot change the value of the const.
                    

You should always use const for the values that are not going to change.
There are several benefits of using constants.

  • Sometimes, variables are easy to remember then the value. e.g const LINE_COLOR = "#0F10FF"
  • Values can be typed wrong. So code becomes more error-prone. e.g 3.141593 can be wrongly typed. But PI is easy to type.
  • While reading the code, it is easy to read the const name instead of the value.

Programming Scenario

When you will start programming, you will be assigning new values to variables. Please have a look at the following code.


let message = "This is first message";

console.log(message);
//output: "This is first message"

message = "This is second message";

console.log(message);
//output: "This is second message"
                    

In above example, after declaring message, you can reassign new value to same variable. In that case you don't have to use let or var keyword for the same variabel.

Loosely Typed

As we had discussed, JavaScript is loosely typed ( dynamically typed ) language. That means you can assign assign string to a variable and after that you can assign integer to the same variable.


let message = "This is string";
// assign number to message
message = 12;
// assign obj to message
message = {
    a: 12
};
                    

Right now, please don't worry about the object. You will be learning about objects in the coming chapters.

Conclusion

In this section, you learned about the variables in JavaSript. Variables are used to manipulate the data. You learned about let, var and const.
In next section, you will learn about the naming conventions of a variable in JavaScript..