Open In App

JavaScript Variables

Improve
Improve
Like Article
Like
Save
Share
Report

Variables are used to store data in JavaScript. Variables are used to store reusable values. The values of the variables are allocated using the assignment operator(“=”).

Examples of JavaScript Variables

JavaScript Assignment Operator

JavaScript assignment operator is equal (=) which assigns the value of the right-hand operand to its left-hand operand.

y = "Geek"

JavaScript Identifiers

JavaScript variables must have unique names. These names are called Identifiers.

Basic rules to declare a variable in JavaScript:

  • These are case-sensitive
  • Can only begin with a letter, underscore(“_”) or “$” symbol
  • It can contain letters, numbers, underscore, or “$” symbol
  • A variable name cannot be a reserved keyword.

JavaScript is a dynamically typed language so the type of variables is decided at runtime. Therefore there is no need to explicitly define the type of a variable. We can declare variables in JavaScript in three ways:

Note: In JavaScript, variables can be declared automatically.

Syntax

// Declaration using var
var geek = "Hello Geek"
 
// Declaration using let      
let $ = "Welcome"                  
 
// Declaration using const   
const _example = "Gfg"       

All three keywords do the basic task of declaring a variable but with some differences Initially, all the variables in JavaScript were written using the var keyword but in ES6 the keywords let and const were introduced.

Example 1: In this example, we will declare variables using var.

JavaScript
let a = "Hello Geeks";
let b = 10;
let c = 12;
let d = b + c;

console.log(a);
console.log(b);
console.log(c);
console.log(d);

Output
Hello Geeks
10
12
22

Example 2: In this example, we will declare variables using let.

JavaScript
let a = "Hello learners"
let b = "joining";
let c = " 12";
let d = b + c;

console.log(a);
console.log(b);
console.log(c);
console.log(d);

Output
Hello learners
joining
 12
joining 12

To learn more about JavaScript let check this article JavaScript Let

Example 3: In this example, we will declare the variable using the const keyword.

JavaScript
const a = "Hello learners"
console.log(a);

const b = 400;
console.log(b);

const c = "12";
console.log(c);
// Can not change a value for a constant
c = "new"
console.log(c)

Output:

using const example output

Explanation: const keyword is used when we assign a value permanently to a variable. So when we try to change the value of a variable declared with the const keyword it will throw an error. The variables declared with var and let are mutable that is their value can be changed but variables declared using const are immutable. 

To learn more about JavaScript const check this article JavaScript Const

Note: The newly introduced keywords let and const are block scoped whereas var is function scoped. 

Let us see an example to understand the difference:

Example: In this example, we are trying to access the block scoped variables outside the block that’s why we are getting error.

JavaScript
{
    let a = 2;
    var b = 4;
    const c = "Hello";
    console.log(a);
    console.log(b);
    console.log(c);
}

console.log(b);
console.log(c);
console.log(a);

Output:

const, var and let example

Explanation: Since variables “a” and “c” are block scoped so we were not able to access them outside their block.

When to Use var, let, or const

  • We declare variables using const if the value should not be changed
  • We use const if the type of the variables should not be changed such as working with Arrays and objects
  • We should use let if we want mutable value or we can not use const
  • We use var only if we support old browser.

To learn more about the scope of variables refer to this article Understanding variable scopes in JavaScript

Comparison of properties of let, var, and const keywords in JavaScript:

Property

var

let

const

ScopeFunction scopedBlock scopedBlock scoped
UpdationMutableMutableImmutable
RedeclarationCan be redeclaredCannot be redeclaredCannot be redeclared
HoistingHoisted at topHoisted at topHoisted at top
OriginsPre ES2015ES2015(ES6)ES2015(ES6)
SupportSupported in the old version of BrowserNot supported in the old version of the BrowserNot supported in the old version of the Browser


Last Updated : 26 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads