Array methods every JavaScript developer must know

An array in JavaScript is an ordered collection of data that can hold multiple values of the same or different types. It is a data structure that is used to store a collection of items in a single place.

Arrays are created using the Array constructor or the square brackets ([]) notation. For example:

Copied
// Using the Array constructor
const arr1 = new Array('🍇', '🍈', '🍉', '🍋', '🍌')

// Using square brackets
const arr2 = ['🍇', '🍈', '🍉', '🍋', '🍌']

You can access the items in an array using their indices, which are the positions of the items in the array. For example, to access the second item in the arr2 array, you can use the following syntax:

Copied
console.log(arr2[1]) // Output: 🍈

You can also modify the values in an array by assigning new values to the indices. For example:

Copied
arr2[1] = '🍍' // The second item in the array is now 🍍

Arrays in JavaScript are zero-indexed, meaning that the first item in the array is at index 0, the second item is at index 1, and so on.

In addition to storing simple values, arrays can also store complex data types, such as objects or other arrays.

Copied
const arr3 = [1, 'hello', [1, 2, 3], { key: 'value' }]

There are many methods available for working with arrays in JavaScript, such as push adding items to the end of an array, unshift adding items to the beginning of an array, and splice inserting or removing items from an array. I will explain some of the important methods of the JavaScript array.

Insert Elements to a JavaScript array - array.push()

There is a push method to add elements to the JavaScript array. push() is a method function that receives an argument as an array element. It always adds elements to the end of the array. Another method to perform the same operation using unshift add elements to the start of the array.

Copied
const winterFruits = [],
// winter has come, now where is the fruit basket, let's fill it

winterFruits.push("🍊")
winterFruits.push("🥕")
winterFruits.push("🍍")

// print
console.log(winterFruits)   // ['🍊', '🥕', '🍍']

Remove Elements from an Array in JS

There is a pop method to remove elements from the JavaScript array. pop() a method function, available on the array. It always removes elements one by one from the end of an existing array. Another method to perform the same operation using shift add elements to the start of the array. pop returns removed element.

Let’s do eat a burger,

Copied
const burgers = ['zinger stack 🍔', 'stack 🍔', 'mighty burger 🍔']

// try mighty bites, so remove it.
burgers.pop() // so here is your: 'mighty burger 🍔'

// how about other burgers eat one, for
console.log(burgers)

// I will like you to try zinger stack. I insist
burgers.shift() // how was it? 'zinger stack 🍔'

There is a splice method to add, remove, replacing, elements at a specific index. It modifies the array in place and does not create a new array. It allows passing 3 main arguments with one optional.

Remove elements from the array using splice

The primary use of the splice() is to delete elements from an array. It returns an array of the elements deleted and modifies the original array.

Copied
array.splice(startIndex, how many elements should be removed)
choose a number from 0 to length - 1

Copied
const array = [
  'porsche 911 ',
  'TNT 150I',
  'a large house',
  'disney plus',
  'deezer hifi',
]
// removes elements at index 2 ('a large house') 
// from the array and returns them
const candidateResponse = array.splice(2, 1) 

console.log(array) 
// Output: ['porsche 911 ', 'TNT 150I', 'disney plus', 'deezer hifi']

console.log(candidateResponse) 
// Output: ['a large house']

// candidate won a large beautiful house. good one, try yours.

Add elements to an array using splice

The splice method can also be used to add elements to an array at a specific index. Let’s see how

Copied
let tasks = ['Take out the trash', 'Do the dishes', 'Mow the lawn']

// adds the new task at index 0, without removing any elements
tasks.splice(0, 0, 'Buy groceries') 

console.log(tasks) 
// Output: ['Buy groceries', 'Take out the trash', 'Do the dishes', 'Mow the lawn']

Practical example

Copied
let items = ['apple', 'banana', 'cherry']

// Get the new item from the input field
let newItem = document.getElementById('new-item-input').value

// Add the new item to the list
items.splice(items.length, 0, newItem)

// Update the display to show the new list
updateListDisplay(items)

Replace elements in an array using splice

The splice method can replace elements in an array. It removes elements and adds elements at a specific index.

Copied
// syntax
array.splice(startIndex, deleteCount, element1, element2, ...);

Copied
let array = [1, 2, 3, 4, 5]

// removes elements at index 2 and 3 (3 and 4) and replaces them with 6 and 7
let removed = array.splice(2, 2, 6, 7) 

console.log(array) // Output: [1, 2, 6, 7, 5]
console.log(removed) // Output: [3, 4]

Sort elements of the JavaScript array

The sort is a built-in JavaScript function that allows you to sort the elements of an array in place. It modifies the original array and does not create a new array.

Here is an example of how to use the sort method to sort the elements of an array in ascending order:

Copied
let array = [3, 5, 1, 2, 4]

array.sort() // sorts the array in ascending order

console.log(array) // Output: [1, 2, 3, 4, 5]

Sorting products using JavaScript

Why not take a sneak peek at a real-world scenario?

Copied
let products = [
  { name: 'Product A', price: 50 },
  { name: 'Product B', price: 20 },
  { name: 'Product C', price: 30 },
  { name: 'Product D', price: 10 },
]

products.sort((a, b) => {
  return a.price - b.price
})

console.log(products)
/* Output:
[
  { name: "Product D", price: 10 },
  { name: "Product B", price: 20 },
  { name: "Product C", price: 30 },
  { name: "Product A", price: 50 }
] */

Another way to do sorting is using a sort algorithm. Explained here.

How to reverse an array in JavaScript

To reverse an array in JavaScript, you can use the reverse method provided by the Array object. The reverse method modifies the original array in place and does not create a new array.

Copied
let array = [1, 2, 3, 4, 5]

array.reverse()

console.log(array) // Output: [5, 4, 3, 2, 1]

Closing remarks

You have just learned about the 3 to 4 methods of the JavaScript array. The array is a widely used data structure in building frontend and backend apps. When an array is used to store large, complex data, methods are required to deal with data to sort, remove, and add new data. So array is overall very useful and easy to understand with a bunch of problem-solving solutions.