How to Change the Value of an Array Elements in JavaScript?

We can use the Square Bracket Notation to access the value at the given index and change the value by assigning a new value to it. Arrays in JavaScript are mutable, meaning you can modify their elements after they are created. We will explore all the approaches that can be used to access and change the value of a specific index.

1. Accessing Index

To change the value of an array element in JavaScript, simply access the element you want to change by its index and assign a new value to it.

Syntax

colors[1] = "yellow";

// Using direct assignment to change an array element

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

[ 'red', 'yellow', 'blue' ]

2. Using Array.splice() Method

This approach is going to use Array.splice() method that is used to add the element at a specific position or index.

Syntax

Array.splice(start_index, delete_count, value1, value2, value3, ...)

// Using array methods to change elements
let fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1, "orange");
console.log(fruits);

[ 'apple', 'orange', 'cherry' ]

3. Using fill() Method

The fill() method in javascript is used to change the content of original array at specific index. It takes three parameter (element,startidx,endidx)

Syntax

let arr= [ ]
// startIndex(inclusive) and endIndex(exclusive)
arr.fill (element ,startIndex,endIndex);
console.log(arr);

let arr= ["HTML" , "REACT" , "JAVASCRIPT" , "NODEJS"];
arr.fill("MONGODB",3,4 )
console.log(arr);

[ 'HTML', 'REACT', 'JAVASCRIPT', 'MONGODB' ]

4. Using map() Method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. It's particularly useful when you want to transform each element of the array.

Syntax

let newArray = array.map(callback(currentValue[, index[, array]]) 

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

[ 2, 4, 6, 8, 10 ]

5. Using forEach() Method

The forEach() method executes a provided function once for each array element. This method is useful when you want to iterate over an array and change elements based on a specific condition. Unlike map(), which returns a new array, forEach() modifies the original array.

let numbers = [1, 2, 3, 4, 5, 6];

// Change all even numbers to their double
numbers.forEach((element, index, array) => {
    if (element % 2 === 0) {
        array[index] = element * 2;
    }
});

console.log(numbers); 

[ 1, 4, 3, 8, 5, 12 ]

6. Using findIndex() Method

In this approach, we use the findIndex method to locate the index of an element that meets a specific condition and then change its value. The findIndex() method returns the index of the first element that satisfies the provided testing function, allowing us to directly access and modify the element.

let numbers = [1, 2, 3, 4, 5];
function updateElement(arr, conditionFn, newValue) {
  let index = arr.findIndex(conditionFn);
  if (index !== -1) {
    arr[index] = newValue;
  }
}
let conditionFn = (element) => element === 3;
updateElement(numbers, conditionFn, 10);

console.log(numbers);

[ 1, 2, 10, 4, 5 ]