loading...

How to CRUD an Array in JavaScript

rahmanfadhil profile image Rahman Fadhil Originally published at rahmanfadhil.com ・1 min read

Read the original article here

There are two ways to create, update, and delete items to an array in JavaScript. The first approach is by using the destructive methods which will change the object itself.

The second approach is by using the immutable methods, which will return a new array that contains a new updated value. This could be very useful if your using Redux or any other state management library.

Let's say we have an array contains a some items like below.

const list = ["Item 1", "Item 2", "Item 3"]

Create item

The mutable way:

const newItem = "Item 4"

list.push(newItem)

The immutable way:

const newItem = "Item 4"

const newList = list.concat([newItem])

Result:

[
  "Item 1",
  "Item 2",
  "Item 3",
  "Item 4"
]

Update item

The mutable way:

const itemIndex = 1
const newItem = "Item 2 (updated)"

list[itemIndex] = newItem

The immutable way:

const itemIndex = 1
const newItem = "Item 2 (updated)"

const newList = list.map((item, index) => {
  return index === itemIndex ? newItem : item
})

Result:

[
  "Item 1",
  "Item 2 (updated)",
  "Item 3"
]

Delete item

The mutable way:

const itemIndex = 1

list.splice(itemIndex, 1)

The immutable way:

const itemIndex = 1

const newList = list.filter((item, index) => {
  return index !== itemIndex
})

Result:

[
  "Item 1",
  "Item 3"
]

Posted on by:

rahmanfadhil profile

Rahman Fadhil

@rahmanfadhil

Developer, Instructor, and Content Creator

Discussion

markdown guide
 

I think there is a typo in your immutable create example.
You've switched the name of the variable of the initial array from list to state

 

Fixed 👌, thanks for pointing out a problem!

 
 

If those are JavaScript statements, they need to end in a semicolon.

 

Not necessarily - it's definitely useful for code clarity, but in JS many statements are implicitly terminated by a newline. The StandardJS style guide omits them when not explicitly necessary.