Replace Item in Array with JavaScript

Replace item in array using the index

One of the most common ways to replace an element in an array is to use its index.

If you know the index of the element you want to replace, you can update it.

Don’t worry if you don’t know the index of the item you want to replace. In the next part, I will show you how to find it.

const books = [
  "You don't know JS", // Index 0
  'Eloquent JavaScript', // Index 1
  'JavaScript: The Good Parts', // Index 2
]

books[2] = 'JavaScript: The Definitive Guide'

console.log(books)
// Output: [
//  "You don't know JS",
//  "Eloquent JavaScript",
//  "JavaScript: The Definitive Guide",
//]

console.log(books[2])
// Output: "JavaScript: The Definitive Guide"

Replace item in array using IndexOf

If you don’t know the index of the item you want to replace, you can use the JavaScript indexOf method to find it.

The indexOf function helps you find the book’s index in the example below.

If the element isn’t in the array, the index returned is -1.

const books = [
  "You don't know JS", // Index 0
  'Eloquent JavaScript', // Index 1
  'JavaScript: The Good Parts', // Index 2
]

const indexOfLastBook = books.indexOf('JavaScript: The Good Parts')

console.log(indexOfLastBook)
// ✅ Output: 2

const indexOfFakeBook = books.indexOf('Fake book')

console.log(indexOfFakeBook)
// ❌ Output: -1

To perform an item replacement, you can use the returned index to update the element if it’s in the array.

const books = [
  "You don't know JS", // Index 0
  'Eloquent JavaScript', // Index 1
  'JavaScript: The Good Parts', // Index 2
]

const indexOfLastBook = books.indexOf('JavaScript: The Good Parts')

console.log(indexOfLastBook)
// Output: 2

if (indexOfLastBook !== -1)
  books[indexOfLastBook] = 'JavaScript: The Definitive Guide'

console.log(books)
// Output: [
//  "You don't know JS",
//  "Eloquent JavaScript",
//  "JavaScript: The Definitive Guide",
//]

console.log(books[indexOfLastBook])
// Output: "JavaScript: The Definitive Guide"

If you want to have more information, you can read the indexOf documentation.

Replace item in array using Splice

Another way to replace an item in an array is by using the JavaScript splice method.

The splice function allows you to update an array’s content by removing or replacing existing elements.

As usual, if you want to replace an item, you will need its index.

Here are the parameters you will use with splice:

index of the element to replace
the number of elements to remove after the index (1 in your case)
the value to add

If you read the return of splice, you will see the array’s deleted values. In your case, it will be the book at the specified index.

const books = [
  "You don't know JS", // Index 0
  'Eloquent JavaScript', // Index 1
  'JavaScript: The Good Parts', // Index 2
]

// Replace the index 2, 1 element with the value "JavaScript: The Definitive Guide"
const removedBooks = books.splice(2, 1, 'JavaScript: The Definitive Guide')

console.log(removedBooks)
// Output: [ "JavaScript: The Good Parts" ]

console.log(books)
// Output: [
//  "You don't know JS",
//  "Eloquent JavaScript",
//  "JavaScript: The Definitive Guide",
//]

console.log(books[2])
// Output: "JavaScript: The Definitive Guide"

If you want to have more information, you can read the splice documentation.

Find and replace object in array

If you want to replace an object in an array, you can do the same as the previous ways. The main difference is the variable type. For example, you will not treat with strings but with objects.

It means that you will need to replace your value with an object.

const books = [
  { id: 0, name: "You don't know JS" }, // Index 0
  { id: 1, name: 'Eloquent JavaScript' }, // Index 1
  { id: 2, name: 'JavaScript: The Good Parts' }, // Index 2
]

books[2] = { id: 2, name: 'JavaScript: The Definitive Guide' }

console.log(books)
// Output: [
//  { id: 0, name: "You don't know JS" },
//  { id: 1, name: "Eloquent JavaScript" },
//  { id: 2, name: "JavaScript: The Definitive Guide" }
//]

console.log(books[2])
// Output: { id: 2, name: "JavaScript: The Definitive Guide" }

If you want to replace an object in an array, you can find its index based on one of its property values. To do that, you can use the JavaScript findIndex method.

The findIndex function returns the index of the first element matching the condition. It also returns -1 if the condition is not met in the array.

const books = [
  { id: 0, name: "You don't know JS" }, // Index 0
  { id: 1, name: 'Eloquent JavaScript' }, // Index 1
  { id: 2, name: 'JavaScript: The Good Parts' }, // Index 2
]

const lastBookIndex = books.findIndex(
  (book) => book.name === 'JavaScript: The Good Parts'
)

console.log(lastBookIndex)
// Output: 2

if (lastBookIndex !== -1)
  books[lastBookIndex] = { id: 2, name: 'JavaScript: The Definitive Guide' }

console.log(books)
// Output: [
//  { id: 0, name: "You don't know JS" },
//  { id: 1, name: "Eloquent JavaScript" },
//  { id: 2, name: "JavaScript: The Definitive Guide" }
//]

console.log(books[lastBookIndex])
// Output: { id: 2, name: "JavaScript: The Good Parts" }

If you want to have more information, you can read the findIndex documentation.

Join me on Twitter for daily doses of educational content to help you Unlock your Web Development skills! 🚀 From tips to tutorials, let’s learn & grow together! 📚 DMs are open, let’s connect! 🤝📬