DEV Community

Moniruzzaman Saikat
Moniruzzaman Saikat

Posted on

A list of array methods in javascript

Here are a few of javascript array methods with simple explanation and examples :

  1. push()
  2. unshift()
  3. pop()
  4. shift()
  5. concat()
  6. findIndex()
  7. forEach()
  8. includes()

push()

This method adds one or more elements to the end of an array and returns the new length of the array.

const arr = [1, 2, 3]
console.log(arr.push(4)) // 4
// arr is now [1,2,3,4]

// adding multiple items
arr.push(-1,-2,-3)
console.log(arr) // 1,2,3,4,-1,-2,-3
Enter fullscreen mode Exit fullscreen mode

unshift()

This method is exactly same as push() but it adds items to the front of an array.

const arr = [1, 2, 3]
console.log(arr.unshift(4)) // 4
// arr is now [4,1,2,3]
// adding multiple items
arr.unshift(-1,-2,-3)
console.log(arr) // -1,-2,-3, 4,1,2,3
Enter fullscreen mode Exit fullscreen mode

pop()

This method removes and returns the last element of an array . It does not take any parameters.

const arr = [1, 2, 3]
console.log(arr.pop()) // 3
// arr is now [1,2]
Enter fullscreen mode Exit fullscreen mode

shift()

This one is same as pop(), but it removes and returns item from the beginning instead of end.

const arr = [1, 2, 3]
console.log(arr.shift()) // 1
// arr is now [2,3]
Enter fullscreen mode Exit fullscreen mode

concat()

This method joins two or more arrays and returns the joined array. It does not alter the main array.

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = arr1.concat(arr2)

console.log(arr1)[ 1, 2, 3 ]
console.log(arr2)[ 4, 5, 6 ]
console.log(arr3) // [ 1, 2, 3, 4, 5, 6 ]
Enter fullscreen mode Exit fullscreen mode

find()

This method takes an function as a parameter which will run once for each item. If certain condition is matched for one item , it will simply return the item and will not execute anymore. Otherwise it returns undefined.

const arr1 = [1, 2, 3]

const item = arr1.find((item) => item === 3)
const item1 = arr1.find((item) => item === 323)

console.log(item) // 3
console.log(item1) // undefined
Enter fullscreen mode Exit fullscreen mode

findIndex()

This one is same to find() but instead of returning the value itself it just reutrns the index. If no item pass the condition it returns -1.

It also takes some optional parameters inside the function like function(item, index, array)

const arr1 = [1, 2, 3]

const item = arr1.findIndex((item) => item === 3)
const item1 = arr1.findIndex((item) => item === 323)

console.log(item) // 3
console.log(item1) // undefined
Enter fullscreen mode Exit fullscreen mode

forEach()

Sometimes you need to loop through an array but you don't want to write any for loop. Okay , the forEach() method will help you here. It takes an callback function inside it and the callback function can will run for each item of the array like this function(value, index, array).

index and array are optional parameters.

const items = ['John', 'Doe', 30]

items.forEach((value, index, arr) => {
  console.log('index : ', index) // index of current item
  console.log('value : ', value) // current item is iterating
  console.log('arr : ', arr)     // the original array
})
Enter fullscreen mode Exit fullscreen mode

includes()

This method checks whether an item is present in an array or not. It takes two parameter inside the function includes(whatToFind, whereToStart). The first parameter is which element you wanna check for and the second one is where to start finding it.

const items = ['John', 'Doe', 30]

const included = items.includes('John', 0)
const included1 = items.includes('John', 2)

console.log(included)  // true
console.log(included1) // false
Enter fullscreen mode Exit fullscreen mode

Top comments (0)