MAQ Learning

JavaScript Variables

In this tutorial:

What is variable?
How to declare variable in JavaScript
How to declare variables of different Data Types
Can we change type of a variable?
Declaring variables using var keyword
Declaring variables using const keyword
When to use var, let or const

 

What is Variable?

  • The Variable is an identifier used to refer to some memory location to store data.
  • The data stored at the location is called the value of that variable.
  • The value of a variable is not fixed and you can change the value during the execution of a program.

How to Declare Variable in JavaScript

In JavaScript you can create (or declare) a variable using let keyword.

let age;

In the above example, "age" is the name or identifier of the variable. Once a variable is declared, you can assign value to it by using assignment operator =.

age = 20; 

In the above line of code, value 20 is stored in the memory area associated with the variable "age".

You can access the value by calling variable name. The following example, will print the value of variable "age" on console.

console.log(age);
// Output: 20

You can also declare and assign value to a variable in one line. 

let age = 20;

The value of a variable can be changed later.

age = 30;

Here is the complete code, so far:

//Declare a variable
let age;
//Assign a value to variable
age=20;
//print value of variable on console
console.log(age);
//Change value of variable
age=30;
//print value of variable on console, after changing its value
console.log(age);

How to Declare Variables of Different Data Types

The variables are used to store values that have different data types.

To store value as a string, enclose it in single or double quotes. Both works.

// Storing string value with double quotes
let firstName = "John";

//Storing string value with single quotes
let myCity = 'New York';

The following code shows how to store a Number value. Only numeric values can be stored as Number, No single or double quotes are used.

let mPrice = 300;

let mDistance = 10.5;

To store Boolean type data, we can use the keywords true or false. As true and false are keywords, these are not enclosed in single or double quotes.

//store Boolean value true
let isActive = true;

//Store Boolean value false
let isEmpty = false;

To store Array.

let prices = [100,200,300];

let fruits = ["Orange", "Apple", "Banana" ];

Can We Change Type of a Variable?

In the above examples, you noticed the data type of variable is not mentioned during its declaration. This is because JavaScript is a dynamically typed language. All type checks are performed at runtime during execution of the program. This means you can assign and re-assign any type of data to a variable and it will work.

For example, you can define a variable storing a numeric value as follow:

let myVar = 20;

Later, you can assign a string value to the same variable and it will work and not give any error.

myVar = "Welcome";

The following is the legal JavaScript code.

//Declare a variable
let mVar;
//Assign a numeric value
mVar = 10;
console.log(mVar); // 10
//assign a new value of type string
mVar = "Welcome";
console.log(mVar); // Welcome

If needed, at any stage, you can use the typeof operator to find the data type of a JavaScript variable.

//Declare a variable
let mVar;
//Assign a numeric value
mVar = 10;
console.log(typeof mVar); // number
//assign a new value of type string
mVar = "Welcome";
console.log(typeof mVar); // string

Declaring Variables using var Keyword

In the above sections you learned that variables can be declared using let keyword.  The let keyword was added to JavaScript in 2015 with ES6.

Before ES6, from 1995 to 2015, variables were declared using var keyword.

We will recommend declare variables using let keyword and only using var if you have to support old browsers. The syntax of declaring variables with var is more or less similar to let. The var is just for backward compatibility. You can also change value of a variable later, declared with keyword var.

var age = 20;

var city = "New York"

var isActive = true;

Declaring Variables Using const Keyword

The const keyword is also used for declaring variables. The main difference is that variables declared with const are constant values and can not be changed.

const age = 20;
age = 30;

// TypeError: Assignment to constant variable.

In the above example, changing the value of a const variable gives an error.

You should declare variables with const keyword, if you don't want to change the value of a variable and treat them as constant values.

When to Use var, let or const?

  • Use let to declare variables when you want to change the values of a variable later during execution of a program.
  • Use var for old browsers those does not support ES6 or above.
  • Use const when the value should not be changed and a variable needs to be treated as a constant value.