How to CRUD an Array in JavaScript

December 19, 2019

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

NODE.JS

Upload Files with Multer

Uploading files is an essential feature for web applications these days. In this tutorial will cover how to upload files into a server from…

JAVASCRIPT

How to Generate Unique ID in JavaScript

There are several ways to generate unique identifier in JavaScript. This could very useful in many cases, such as rendering list efficiently…

JAVASCRIPT

Advanced Data Searching with Lunr.js

Lunr.js is a full-text search library for JavaScript. It allows us to perform a complex search to a collection of data. Its small, powerful…