var, let, and const are three keywords you’ll encounter from the very beginning of your JavaScript journey and continue to use throughout. It’s important to understand their differences in order to write clean, reliable code. All 3 keywords are used to declare variables.
Before jumping into variables themselves, let's understand what does variable mean and why it is needed. Variables are used for storing data. And when you mature as a developer, you will realize that variables are nothing but getting a space in the memory. Primitives data are stored by value whereas non-primitive data are stored as reference (we'll learn more on data types in this article).
Var: It has functional scope. The important thing to note about var is that the values assigned can be re-assigned and same variable can be redeclared which results in lack of control over our code , resulting in bugs and other problems. Therefore in modern projects/products we rarely see the use of var. It is advisable to never use var unless dealing with legacy code.
// declaration
var a;
// redeclaration allowed
var a = 50;
console.log(a) // 50
// reassignment is also allowed
a = 60;
console.log(a) // 60
let: It is of block-scope. Variable declared with let keyword can be reassign but can not be redeclared. let be like “ let this variable change its value but don’t let it redeclared).
// declaration
let b;
// redeclaration not allowed
let b = 10; // SyntaxError: Identifier 'b' has already been declared
// assignment allowed
b = 20; // ✔️
// reassignment allowed
b = 30 ; // ✔️
const: Now if we talk about const it is just like its name (const = constant) . It can neither be re-assigned AND redeclared once it is declared. When we declare a variable with const keyword it is mandatory to initialize it at the time of declaration.
// Initialization at the time of declaration.
const c = 10
// Only declaration of const variable is not allowed
const d; // ❌
// Reassignement is not allowed
c = 20 // ❌
Important Notes About var, const and let
Aways use let and const not just over ‘var’ but never use it in the first place.
It is important to understand the concept of hoisting.
Hoisting is the default behaviour of javascript where variable declaration are hoisted on the top.
To understand it more clearly we can use an example to our cause :-
// In case of var
console.log(x) // undefined
var x = 10
This code is seen by javaScript in this format :
var x;
console.log(x)
x = 10;
So here we are accessing variable x before it is initialized resulting in undefined which is the default value for var.
Now before we jump to the let and const examples which gives us our 3rd important point, let’s discuss TDZ in 3 point.
- TDZ stands for Temporal Dead Zone , in this concept although
let and const do get hoisted they stays in TDZ resulting in reference error.
console.log(y) // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(z) // ReferenceError: Cannot access 'z' before initialization
const z = 20;
- Scope matters a lot when we deal with these 3 keyword( though not
var , it won’t hurt to know more.)
{
var a = 10;
let b = 20;
let c = 30;
}
console.log(a); // 10
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined
const does not mean frozen value its just constant binding. In other words if we declare objects and arrays using const variable it does not mean that we can not change the values inside of objects and arrays. It simply means that we cannot redeclare the same variable.
// array
const arr = [1,2,3,4,5]
arr.push(6)
console.log(arr) // 1,2,3,4,5,6
// object
const obj = { a:1, b:2, c:3 }
obj.c = 300
console.log(obj) // { a:1, b:2, c:300 }
const stop us to reassigning the variable not from mutating the object or array.
Primitive Data Types in JavaScript
In JavaScript, data stored in variables can belong to different data types. The simplest types of data are called primitive data types. These values are stored directly in memory and represent a single value.
JavaScript has several primitive data types, but the most common ones beginners should know are string, number, boolean, null, and undefined.
1. String
A string represents text. Strings are written inside quotes.
let name = "Alex";
let language = 'JavaScript';
console.log(name); // Alex
console.log(language); // JavaScript
Strings are commonly used to store things like names, messages, or any textual data.
2. Number
A number represents numeric values. In JavaScript, both integers and decimal numbers are considered numbers.
let age = 25;
let price = 99.99;
console.log(age); // 25
console.log(price); // 99.99
Numbers are used for calculations, counts, prices, and other numerical values.
3. Boolean
A boolean represents a logical value that can be either true or false.
let isLoggedIn = true;
let hasPermission = false;
console.log(isLoggedIn); // true
console.log(hasPermission); // false
Booleans are commonly used in conditions and decision-making in programs.
4. Undefined
When a variable is declared but not assigned a value, JavaScript automatically assigns it the value undefined.
let score;
console.log(score); // undefined
This simply means that the variable exists, but no value has been given to it yet.
5. Null
The null value represents an intentional absence of value. It is used when we want to explicitly indicate that a variable should contain no value.
let user = null;
console.log(user); // null
Developers often use null when they want to clear a variable or indicate that data is not available yet.
Summary
Writing code requires a lots of effort and knowledge therefore resulting in the need of polished knowledge. To know where and which keyword to use to store values inside variables and what will that result in gives us hold on our code. It improves code readability and maintenance.
