DEV Community: Muhammad Jareer

JavaScript Variables: Understanding var, const, and let

Muhammad Jareer — Mon, 07 Apr 2025 11:12:00 +0000

In JavaScript, variables are used to store and manage data. They act as containers for values that can be accessed and manipulated throughout your program.

Three Ways to Declare Variables

JavaScript provides three ways to declare variables:

var → The older way, has function-scoped behavior.
const → Block-scoped, cannot be reassigned after declaration.
let → Block-scoped, allows reassignment but prevents redeclaration.

Understanding their differences is crucial for writing efficient and bug-free JavaScript code. Let's dive in!

🔴 Using `var` (Function-Scoped)

The var keyword was the original way to declare variables in JavaScript. However, it has some quirks due to function scoping and hoisting.

Example: Function Scope of `var`

var number = 10;

function showNumber() {
  console.log(number); // ✅ Accessible inside the function
}

showNumber();
console.log(number); // ✅ Also accessible outside

Output:

10
10

Key Notes:

var is function-scoped, meaning it is accessible throughout the function.
Variables declared with var can be redeclared, leading to potential bugs.
It gets hoisted to the top of its scope, sometimes causing unexpected behavior.

Use var only if you must support older JavaScript versions.

🔵 Using `const` (Immutable Variables)

The const keyword, introduced in ES6, is block-scoped and ensures that the variable cannot be reassigned after initialization.

Example: Constant Variables with `const`

const PI = 3.1416;
console.log(PI); // ✅ Works fine

PI = 3.14; // ❌ TypeError: Assignment to constant variable

Output:

3.1416
TypeError: Assignment to constant variable

Key Notes:

It ensures data integrity by preventing accidental modifications.
It makes your code more predictable and easier to debug.
Helps in writing safer and more readable JavaScript.

Use const by default, unless you know the value will change.

🟢 Using `let` (Block-Scoped & Reassignable)

The let keyword is an improved version of var, allowing block-scoped variables that can be reassigned but not redeclared.

Example: Block Scope of `let`

function testLet() {
  let number = 10;
  console.log(number); // ✅ Accessible within the function
}

testLet();
console.log(number); // ❌ ReferenceError: number is not defined

Output:

10
ReferenceError: number is not defined

Key Notes:

It prevents variable redeclaration, reducing accidental modifications.
It has block scope, making it more predictable than var.
It does not get hoisted in an unpredictable way like var.

Use let when you need a variable that can be reassigned but should remain within a limited scope.

Conclusion

Use const for values that shouldn’t change.
Use let for reassignable values.
Avoid var unless working with older JavaScript code.

To write better code in JavaScript, we need to understand these differences and MASTER them.

That's it for today!

Happy Coding! 🤩

Slice vs Splice in JavaScript: Key Differences Explained

Muhammad Jareer — Wed, 26 Mar 2025 18:15:45 +0000

When working with arrays in JavaScript, two commonly used methods are slice() and splice(). While they might seem similar at first glance, they serve very different purposes. In this article, we’ll break down their differences, usage, and when to use each one.

🔹 What is `slice()`?

The slice() method is used to extract a portion of an array without modifying the original array. It returns a new array containing the selected elements.

Syntax


array.slice(start, end)

start: The index where extraction begins.
end (optional): The index where extraction stops (not included in the result).

Example


let fruits = ["apple", "banana", "cherry", "date"];
let citrus = fruits.slice(1, 3);

console.log(citrus); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"] (unchanged)

📌 Key Takeaways:

Returns a new array.
Does not modify the original array.
The end index is not included.

🔹 What is `splice()`?

The splice() method is used to modify the original array by adding or removing elements at a specified position.

Syntax


array.splice(start, deleteCount, item1, item2, ...)

start: The index where the modification begins.
deleteCount: The number of elements to remove.
item1, item2, ...: Elements to be added (optional).

Example: Removing Elements


let colors = ["red", "blue", "green", "yellow"];
colors.splice(1, 2);

console.log(colors); // ["red", "yellow"]

Here, it removes 2 elements starting from index 1 ("blue" and "green").

Example: Adding Elements


let numbers = [1, 2, 3, 5];
numbers.splice(3, 0, 4);

console.log(numbers); // [1, 2, 3, 4, 5]

Here, we insert 4 at index 3 without removing anything.

📌 Key Takeaways:

Modifies the original array.
Can remove elements.
Can add elements.

Conclusion

slice() returns a new array without modifying the original.
splice() modifies the original array by adding/removing elements.
Choose slice() when you need a portion of an array without altering it.
Use splice() when you need to change the array in place.

Understanding these differences will help you write cleaner, more efficient JavaScript code!

Happy Coding! 🤩

If you have any questions or suggestions, feel free to connect with me on LinkedIn or email me at m.ahmar2496@gmail.com. You can also check out my Portfolio.

DEV Community: Muhammad Jareer

JavaScript Variables: Understanding var, const, and let

Three Ways to Declare Variables

🔴 Using var (Function-Scoped)

Example: Function Scope of var

Output:

Key Notes:

🔵 Using const (Immutable Variables)

Example: Constant Variables with const

Output:

Key Notes:

🟢 Using let (Block-Scoped & Reassignable)

Example: Block Scope of let

Output:

Key Notes:

Conclusion

Slice vs Splice in JavaScript: Key Differences Explained

🔹 What is slice()?

Syntax

Example

📌 Key Takeaways:

🔹 What is splice()?

Syntax

Example: Removing Elements

Example: Adding Elements

📌 Key Takeaways:

Conclusion

🔴 Using `var` (Function-Scoped)

Example: Function Scope of `var`

🔵 Using `const` (Immutable Variables)

Example: Constant Variables with `const`

🟢 Using `let` (Block-Scoped & Reassignable)

Example: Block Scope of `let`

🔹 What is `slice()`?

🔹 What is `splice()`?