Updating elements in JavaScript arrays means changing the values stored at specific positions. JavaScript arrays are mutable, so you can modify their elements after creating them without creating a new array.
For example, you can change a product price, update a student’s marks, replace a name, or modify values in a list. In this tutorial, you will learn how to update array elements using indexes, variables, loops, and array methods.
Updating Array Elements Using Indexes
The simplest way to update an array element is to use its index and assign a new value.
Syntax:
arrayName[index] = newValue;For example:
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);Output:
["Apple", "Orange", "Mango"]Here, the element at index 1 changes from "Banana" to "Orange".
JavaScript array indexes start at 0. If you need a refresher, read JavaScript Arrays to understand how array elements and index positions work.
Updating the First and Last Elements
You can update the first element using index 0. To update the last element, use the array’s length property minus one.
let colors = ["Red", "Green", "Blue"];
colors[0] = "Yellow";
colors[colors.length - 1] = "Black";
console.log(colors);Output:
["Yellow", "Green", "Black"]The first element changes from "Red" to "Yellow", and the last element changes from "Blue" to "Black".
The length property helps you identify the last index without having to count the elements manually.
Updating Numeric Values in an Array
You can update numbers in an array by assigning a new value or performing a calculation.
let marks = [75, 80, 65, 90];
marks[2] = 85;
console.log(marks);Output:
[75, 80, 85, 90]You can also increase or decrease an existing value.
let prices = [100, 200, 300];
prices[0] = prices[0] + 50;
prices[1] = prices[1] - 25;
console.log(prices);Output:
[150, 175, 300]The first price increases by 50, while the second price decreases by 25.
Updating Array Elements Using Variables
You can store an index or a new value in a variable and use it to update an array element. This is helpful when the position or value comes from user input or another part of your program.
let fruits = ["Apple", "Banana", "Mango"];
let index = 1;
let newFruit = "Orange";
fruits[index] = newFruit;
console.log(fruits);Output:
["Apple", "Orange", "Mango"]Here, the variable index specifies which element to update, and newFruit contains the replacement value.
Variables make it easier to write reusable code instead of hardcoding every index and value. You can learn more about variables in JavaScript Variables.
Updating Multiple Elements Using a Loop
When you need to update several elements according to the same rule, a loop can help you avoid writing repeated assignments.
For example, you can increase every number in an array by 10.
let numbers = [10, 20, 30, 40];
for (let i = 0; i < numbers.length; i++) {
numbers[i] = numbers[i] + 10;
}
console.log(numbers);Output:
[20, 30, 40, 50]The loop visits each index and adds 10 to its current value. The updated number is then stored at the same index.
This technique is useful when processing lists of marks, prices, scores, and other numeric data.
Updating Elements Using the map() Method
The map() method creates a new array by applying a callback function to every element in the original array.
Unlike direct index assignment, map() does not modify the original array.
let numbers = [10, 20, 30, 40];
let updatedNumbers = numbers.map(function(number) {
return number + 5;
});
console.log(numbers);
console.log(updatedNumbers);Output:
[10, 20, 30, 40]
[15, 25, 35, 45]The original array remains unchanged, while updatedNumbers contains the transformed values.
You can write the same example using an arrow function:
let numbers = [10, 20, 30, 40];
let updatedNumbers = numbers.map(number => number + 5);
console.log(updatedNumbers);Output:
[15, 25, 35, 45]The map() method is particularly useful when you want to transform every element. To understand how callback functions work in this example, read JavaScript Callback Functions.
Updating an Element in a Nested Array
A nested array contains one or more arrays inside another array. You can update an inner element by specifying both the outer and inner indexes.
let numbers = [
[10, 20, 30],
[40, 50, 60]
];
numbers[1][0] = 100;
console.log(numbers);Output:
[[10, 20, 30], [100, 50, 60]]The expression numbers[1][0] accesses the first element of the second inner array. Its value changes from 40 to 100.
Nested arrays are useful for representing tables, grids, and grouped data.
Updating Objects Inside an Array
Arrays can store objects, and you can update an object’s properties by accessing the object through its array index.
let students = [
{ name: "Arun", marks: 85 },
{ name: "Priya", marks: 92 }
];
students[0].marks = 95;
console.log(students);Output:
[
{ name: "Arun", marks: 95 },
{ name: "Priya", marks: 92 }
]The marks property of the first student changes from 85 to 95.
This technique is common in applications that manage students, employees, products, or customer records. You can also explore JavaScript Functions to learn how to organize reusable operations for working with data.
What Happens When You Update an Invalid Index?
If you assign a value to an index beyond the current array length, JavaScript increases the array’s length and creates empty slots between the existing elements and the new value.
let fruits = ["Apple", "Banana"];
fruits[4] = "Mango";
console.log(fruits);
console.log(fruits.length);Output:
["Apple", "Banana", <2 empty items>, "Mango"]
5The array now has a length of 5. Indexes 2 and 3 are empty slots.
If your intention is to replace an existing element, make sure you use a valid index.
Updating an Array vs. Creating a New Array
| Feature | Direct index assignment | Using map() |
|---|---|---|
| Modifies original array | Yes | No |
| Creates a new array | No | Yes |
| Best for | Updating specific elements | Transforming every element |
| Example | numbers[0] = 100; | numbers.map(n => n + 5); |
Choose the method based on your goal. Direct assignment is convenient for changing a specific element, while map() is useful for creating a transformed copy.
Frequently Asked Questions
How do you update an element in a JavaScript array?
Use its index and assign a new value, such as fruits[0] = "Orange".
Can you update multiple array elements at once?
Yes. You can assign new values to multiple indexes or use a loop to update elements according to a rule.
Does map() modify the original array?
No. The map() method returns a new array containing the results of its callback function.
Can you update objects inside an array?
Yes. Access the object using its index and assign a new value to one of its properties, such as students[0].marks = 95.
What happens when you update an index beyond the array’s length?
JavaScript expands the array’s length and creates empty slots between the existing elements and the assigned index.