JavaScript Variables Overview

What is a Variable?

In very simple words, variable is a container that can store values and when we need that value we call that container.

Don't we do in mathematics like value of a is 10 and value of b is 20 and the sum of both is 30. These a, b and sum are the variables and 102030 are the values that are stored in that variables.

If you are already from programming background then you know what is it, if not then I have told you already.

Variables declaration in JavaScript

we can declare a variable using three keywords i.e. varletconst . Everyone has its own advantages and here we will learn all of them in detail. we can store any type of value in a javascript variable that means we do not need to write the value's datatype along with variable declaration.

Rules for declaring a variable

only letters, digits and underscore are allowed
variable must begin either with a letter, $ or _
Variable cannot begin with a number
Reserved words are not allowed to be used as variables (Reserved words are those which are predefined and have special meaning and usage and scope, they can only be used for the purpose they are made for)
upper case variables and lower case variables are different even if they are made up of with same material (ab_c is not equal to AB_C) (in programming this behaviour is known as case-sensitive)

var

First one to introduced in JavaScript
It is globally scoped

variable declared using var can be updated and re-declared within its scope

console.log() is used to print the values on console. If you haven't read my previous blog "Introduction to JavaScript" then I recommend to read after this blog

https://developermohit.hashnode.dev/introduction-to-javascript

//declaration
var a = 10
console.log(a) // 10

// re declaraing the same
var a = 100
console.log(a) // 100

// variable in scope
{
    var a = 55
    console.log(a) // 55
}

var a = 60
console.log(a) // 60

let

let was introduced in ECMAScript 6
It is block scoped that means the variable declared outside a block and inside a block are different
It can not be re-declared
It can be updated

// declaration
let a = 10
console.log(a) // 10

// re declaring the same
// let a = 100
// console.log(a) error

// variable in scope
{
    let a = 55
    console.log(a) // 55
}

// updating
a = 100
console.log(a) // 100

const

It was introduced in ECMAScript 6
It is block scoped
It can not be updated
It cannot be re-declared

// declaration 
const a = 10
console.log(a) // 10

// re-declaring the same
// const a = 100
// console.log(a) error

// variable in scope
{
    const a = 55
    console.log(a) // 55
}

// updating
// a = 100 
// console.log(a) error

Difference

var	let	const
• Globally Scoped	• Block Scoped	• Block Scoped
• can be re-declared	• cannot be re-declared	• cannot be re-declared
• can be updated	• can be updated	• cannot be updated
• can be hoisted	• cannot be hoisted	• cannot be hoisted

Summary

Usevar: Rarely recommended, due to its function-level scope and lack of constraints on re-declaration.
Uselet: When you need a variable that can be reassigned and you want to limit its scope to a specific block.
Useconst: When you want a variable whose value does not change after declaration, providing an extra level of immutability and helping prevent accidental reassignments.

For now, it's sufficient. I will see you in the next article, hope this article adds value in you. If you want more such content then make sure to following me on all available platform

Instagram

LinkedIn

Hashnode

Thank you for reading 🤍

Written By Mohit Soni

Mastering Variables in JavaScript: A Comprehensive Overview

Table of contents