In this article, we will learn how to change the value of an array element in JavaScript. Changing an element is done by using various approaches.

Changing the value of an array element in JavaScript is a common operation. Arrays in JavaScript are mutable, meaning you can modify their elements after they are created. You may want to change an element’s value based on its index or certain conditions.
An item can be replaced in an array using the following approaches:

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";

Example: In this example, we will see how to change the value of array elements by Accessing its Index.

// Using direct assignment to change an array element

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

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

Using Array Methods

JavaScript provides array methods like splice(), pop(), push(), shift(), and unshift(), which can be used to change elements based on specific requirements.

Syntax:

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

Example: In this example, we will see how to change the value of array elements by using array methods.

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

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

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);

Example: In this example, we will see how to change the value of array elements by using fill( ) method.

let arr= ["HTML" , "REACT" , "JAVASCRIPT" , "NODEJS"];

arr.fill("MONGODB",3,4 )

console.log(arr);

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

Using the 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]]) 

Example: In this example, we will see how to change the value of array elements by using the map() method.

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

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

console.log(doubled);

[ 2, 4, 6, 8, 10 ]

Using the 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); // Output: [1, 4, 3, 8, 5, 12]

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

Using the 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.

Example:

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 ]