JavaScript Array Const

What Is JavaScript Array Const?

In JavaScript, the const keyword is commonly used to declare constants, but its behavior is slightly different when working with arrays. While the variable reference declared with const cannot be reassigned, the contents of the array can still be modified.

What Does const Mean for Arrays?

Declaring an array with const means that the reference to the array is constant and cannot be changed to point to a new array or value. However, the contents of the array are still mutable, meaning you can add, remove or update elements within the array.

Declaring an Array with const

Syntax:

const arrayName = [element1, element2, element3];

Example:

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

Key Points to Remember

1. The Reference Cannot Be Changed:
   You cannot reassign a new array to a const variable.

const fruits = ["Apple", "Banana"];
fruits = ["Mango", "Orange"]; // Error: Assignment to constant variable.

2. The Contents Can Be Modified:
   You can change, add, or remove elements within the array.

const fruits = ["Apple", "Banana"];
fruits[0] = "Mango"; // Changing "Apple" to "Mango"
fruits.push("Orange"); // Adding "Orange"
console.log(fruits); // Output: ["Mango", "Banana", "Orange"]

3. Comparison with let:
   Using let allows reassigning the array entirely, whereas const locks the reference.

let vegetables = ["Carrot", "Potato"];
vegetables = ["Tomato", "Cucumber"]; // Works fine

Modifying const Arrays

Adding Elements

You can use methods like push() and unshift() to add elements to a const array.

const colors = ["Red", "Green"];
colors.push("Blue"); // Adds "Blue" at the end
colors.unshift("Yellow"); // Adds "Yellow" at the start
console.log(colors); // Output: ["Yellow", "Red", "Green", "Blue"]

Removing Elements

Methods like pop() and shift() allow you to remove elements.

const colors = ["Red", "Green", "Blue"];
colors.pop(); // Removes "Blue"
colors.shift(); // Removes "Red"
console.log(colors); // Output: ["Green"]

Updating Elements

You can update elements by directly accessing their index.

const numbers = [10, 20, 30];
numbers[1] = 25; // Changes 20 to 25
console.log(numbers); // Output: [10, 25, 30]

Why Use const for Arrays?

Using const with arrays improves code readability by indicating that the variable reference will not change. It ensures developers focus on modifying the contents rather than reassigning the array.

Practical Examples

Example 1: Managing a To-Do List

const tasks = ["Study", "Exercise"];
tasks.push("Read a book"); // Add a new task
tasks[0] = "Attend class"; // Update a task
tasks.pop(); // Remove the last task
console.log(tasks); // Output: ["Attend class", "Exercise"]

Example 2: Tracking Scores

const scores = [80, 90, 70];
scores.push(85); // Add a new score
scores[1] = 95; // Update the second score
console.log(scores); // Output: [80, 95, 70, 85]

Common Errors and How to Avoid Them

Reassigning the Array

const animals = ["Dog", "Cat"];
animals = ["Bird", "Fish"]; // Error: Assignment to constant variable.

Solution: Only modify the contents, not the reference.

Using Methods on Non-Array const Variables

const number = 5;
number.push(10); // Error: number.push is not a function

Solution: Ensure you are working with arrays.