Understanding Variables in JavaScript: Beginner's guide

In JavaScript, a variable is a named storage location in the computer's memory that holds a value. They allow us to store, receive and manipulate data dynamically as our program runs. Key uses of variables: Storing Data: The primary use of variables is to hold different types of information that our program needs to work with. Referencing Data: Instead of typing the same data repeatedly, we can use variable name. Manipulating Data: Variables allow us to perform operations on the stored data (e.g. calculations, string modifications etc.) Different ways to declare variables in JavaScript: JavaScript provides three ways to declaring variables: var, let and const. While they all serve the purpose of creating variables, they have important differences in how they behave, particularly considering their scope and whether their values can be reassigned. Understanding these distinctions is key to write robust and maintainable code. 1. var: Function Scoped var was the original way to declare variables in JavaScript. It has function scope (or global scope if declared outside any function) and allows for variable hoisting. Variables declared with var can be re-declared and reassigned. Key Characteristics : Function Scope: Variables declared with var are scoped to the function in which they are declared. If declared outside a function, they have global scope. Hoisting: Variable declaration (not initialization) are hoisted to the top of their scope. This means we can technically use a var variable before it's declaration in the code, but its value will be undefined. Re-declaration: We can re-declare a variable with the same name using var within the same scope (not recommended to do so). Reassignment: We can reassign the value of variable declared with var var message = 'Hello'; console.log(message); // output: Hello message = 'World'; // Re-assignment console.log(message); // output: World var message = 'Hello again'; // Re-declaration (not recommended) console.log(message); //Output: Hello again 2. let: Block Scoped let was introduced in ECMAScript 2015 (ES6) as a more modern and preferred way to declare variables. It has block scope and does not allow re-declaration within the same scope. Variables declared with let can be reassigned. Key Characteristics : Block Scope: Variables declared with let are scoped to the block of code (defined by curly braces {}) in which they are declared (e.g., if statements, for loops, functions). No Hoisting (Temporal Dead Zone): While let declarations are hoisted, we cannot access them before the point of declaration in the code. Doing so will result in a ReferenceError. This period between the start of the scope and the declaration is called the "temporal dead zone." No Re-declaration: We cannot re-declare a variable with the same name using let within the same scope. This helps prevent accidental overwriting of variables. Reassignment: We can change the value of a variable declared with let. let count = 0; console.log(count); // Output: 0 count = 1; // Reassignment console.log(count); // Output: 1 // let count = 2; // Error: Identifier 'count' has already been declared if (true) { let blockVar = "inside block"; console.log(blockVar); // Output: inside block } // console.log(blockVar); // Error: blockVar is not defined outside the block console.log(age); // Error: Cannot access 'age' before initialization let age = 25; console.log(age); // Output: 25 3. const: Block Scoped const was also introduced in ES6 and is used to declare constants – variables whose values should not be reassigned after they are initialized. const also has block scope and exhibits the temporal dead zone behavior similar to let. Block Scope: Similar to let, const variables are scoped to the block in which they are declared. No Hoisting (Temporal Dead Zone): const declarations are hoisted but cannot be accessed before their declaration. No Re-declaration: We cannot re-declare a variable with the same name using const within the same scope. No Reassignment: Once a const variable is assigned a value, we cannot reassign a new value to it. However, if a const variable holds an object or an array, the contents of that object or array can be modified. Initialization Required: We must assign a value to a const variable when you declare it. const MAX_VALUE = 100; console.log(MAX_VALUE); // Output: 100 // MAX_VALUE = 150; // Error: Assignment to constant variable. // const MIN_VALUE; // Error: Missing initializer in const declaration if (true) { const blockConst = "another constant"; console.log(blockConst); // Output: another constant } // console.log(blockConst); // Error: blockConst is not defined outside the block const user = { name: "Jane" }; user.age = 28; // This is allowed (modifying object properties) console.log(user); // Output: { name: 'Jane', age: 28 }

May 5, 2025 - 06:36

Understanding Variables in JavaScript: Beginner's guide

In JavaScript, a variable is a named storage location in the computer's memory that holds a value. They allow us to store, receive and manipulate data dynamically as our program runs.

Key uses of variables:

Storing Data: The primary use of variables is to hold different types of information that our program needs to work with.
Referencing Data: Instead of typing the same data repeatedly, we can use variable name.
Manipulating Data: Variables allow us to perform operations on the stored data (e.g. calculations, string modifications etc.)

Different ways to declare variables in JavaScript:

JavaScript provides three ways to declaring variables: var, let and const. While they all serve the purpose of creating variables, they have important differences in how they behave, particularly considering their scope and whether their values can be reassigned. Understanding these distinctions is key to write robust and maintainable code.

1. var: Function Scoped

var was the original way to declare variables in JavaScript. It has function scope (or global scope if declared outside any function) and allows for variable hoisting.
Variables declared with var can be re-declared and reassigned.

Key Characteristics :

Function Scope: Variables declared with var are scoped to the function in which they are declared. If declared outside a function, they have global scope.
Hoisting: Variable declaration (not initialization) are hoisted to the top of their scope. This means we can technically use a var variable before it's declaration in the code, but its value will be undefined.
Re-declaration: We can re-declare a variable with the same name using var within the same scope (not recommended to do so).
Reassignment: We can reassign the value of variable declared with var


var message = 'Hello';
console.log(message);  // output: Hello

message = 'World';  // Re-assignment
console.log(message);  // output: World

var message = 'Hello again';  // Re-declaration (not recommended)
console.log(message);  //Output: Hello again

2. let: Block Scoped

let was introduced in ECMAScript 2015 (ES6) as a more modern and preferred way to declare variables. It has block scope and does not allow re-declaration within the same scope. Variables declared with let can be reassigned.

Key Characteristics :

Block Scope: Variables declared with let are scoped to the block of code (defined by curly braces {}) in which they are declared (e.g., if statements, for loops, functions).
No Hoisting (Temporal Dead Zone): While let declarations are hoisted, we cannot access them before the point of declaration in the code. Doing so will result in a ReferenceError. This period between the start of the scope and the declaration is called the "temporal dead zone."
No Re-declaration: We cannot re-declare a variable with the same name using let within the same scope. This helps prevent accidental overwriting of variables.
Reassignment: We can change the value of a variable declared with let.

let count = 0;
console.log(count); // Output: 0

count = 1; // Reassignment
console.log(count); // Output: 1

// let count = 2; // Error: Identifier 'count' has already been declared

if (true) {
  let blockVar = "inside block";
  console.log(blockVar); // Output: inside block
}
// console.log(blockVar); // Error: blockVar is not defined outside the block

console.log(age); // Error: Cannot access 'age' before initialization
let age = 25;
console.log(age); // Output: 25

3. const: Block Scoped

const was also introduced in ES6 and is used to declare constants – variables whose values should not be reassigned after they are initialized. const also has block scope and exhibits the temporal dead zone behavior similar to let.

Block Scope: Similar to let, const variables are scoped to the block in which they are declared.
No Hoisting (Temporal Dead Zone): const declarations are hoisted but cannot be accessed before their declaration.
No Re-declaration: We cannot re-declare a variable with the same name using const within the same scope.
No Reassignment: Once a const variable is assigned a value, we cannot reassign a new value to it. However, if a const variable holds an object or an array, the contents of that object or array can be modified.
Initialization Required: We must assign a value to a const variable when you declare it.

const MAX_VALUE = 100;
console.log(MAX_VALUE); // Output: 100

// MAX_VALUE = 150; // Error: Assignment to constant variable.

// const MIN_VALUE; // Error: Missing initializer in const declaration

if (true) {
  const blockConst = "another constant";
  console.log(blockConst); // Output: another constant
}
// console.log(blockConst); // Error: blockConst is not defined outside the block

const user = { name: "Jane" };
user.age = 28; // This is allowed (modifying object properties)
console.log(user); // Output: { name: 'Jane', age: 28 }

// user = { city: "New York" }; // Error: Assignment to constant variable.

For modern JavaScript development, it's generally recommended to use let for variables that might be reassigned and const for variables whose values should remain constant. Avoid using var in new code due to its less predictable scoping behavior.