Essential Array Methods in JavaScript

Arrays are very essential and are used frequently in storing data in all programming languages. As a programmer knowing your array methods is very important as it is used in many parts of our programs such as manipulating API’s data.

So what are Arrays?

Arrays can simply be defined as a container or a box for holding items that are related.

let countries = [‘Nigeria’, ‘Mexico’, ‘France’, ‘Germany’].

Array Methods?

There is a huge amount of methods used in manipulating arrays in JavaScript such as the map, filter, sort, indexOf, forEach, push, unshift, shift, reduce, every, etc. For a better understanding of this article, The array methods will be grouped according to how and when they are used.

When performing a search in an array, The following methods can be used;

IndexOf()

The indexOf() array method takes in an item as a parameter and returns the index or position the item passed in is located in the array.

let data = ['Kelechi', 14, 'Nigeria', true]
console.log(data.indexOf(14)) // => 1

lastIndexOf()

The lastIndexOf() method works in a similar way like the indexOf method, the only difference is the lastIndexOf takes in two parameters which are item and from and returns the position or index the item is found using the from parameter to as a reference or starting point for its search. It returns `-1` if the value is not found.

let data = ['Kelechi', 14, 'Nigeria', true]
console.log(data.lastIndexOf(true, 2)) //=> -1
console.log(data.lastIndexOf(14, 3))  // => 1

Find()

The array method find() take in a function as a parameter which is used to perform a search depending on a condition passed in. This method returns only the first item or value in the array which passed its condition.

let bio = [
  {name: 'Jude', country: 'Nigeria', age: 25},
  { name: 'Kelechi', country: 'USA', age: 26 },
  { name: 'Emmanuel', country: 'Senegal', age: 28 },
  { name: 'Commander', country: 'Nigeria', age: 28 }
];
let nigerian = bio.find((item)=> item.country === 'Nigeria' )
console.log(nigerian) //=> { name: 'Jude', country: 'Nigeria', age: '25' }
console.log(nigerian.country) //=> Nigeria

The filter() method

This method works similarly as the find() method but unlike the find() method, it returns an array of matching items.

let nigerians = bio.filter((item)=> item.country === 'Nigeria')
console.log(nigerians) // => [ { name: 'Jude', country: 'Nigeria', age: 25 },{ name: 'Commander', country: 'Nigeria', age: 28 } ]

The includes() method

As the name implies, the includes() method takes in an item parameter and checks if the item parameter is part of the items in the array. It returns either true or false.

if(data.includes('Kelechi')){
   console.log('My name is Kelechi')
}else{
   console.log('Sorry pal, You are not in the array')
}

Arrays methods used to add and remove items from an array includes the following;

The push() method

This method is used to add an item to the end of an array.

let data = ['Kelechi', 14, 'Nigeria', true]
data.push('JavaScript')
console.log(data) // => [ 'Kelechi', 14, 'Nigeria', true, 'JavaScript' ]

The pop() method

This method is used to remove the last item in an array.

let data = ['Kelechi', 14, 'Nigeria', true]
data.pop()
console.log(data) //=> [ 'Kelechi', 14, 'Nigeria', true ]

The unshift() method

Unlike the push() method, the unshift() method adds an item to the beginning of an array.

let data = ['Kelechi', 14, 'Nigeria', true]
data.unshift('JavaScript')
console.log(data) // => [ 'JavaScript', 'Kelechi', 14, 'Nigeria', true ]

The shift() method

Unlike the pop() method, the pop method removes an item from the beginning of an array.

let data = ['Kelechi', 14, 'Nigeria', true]
data.shift()
console.log(data) // => [ 'Kelechi', 14, 'Nigeria', true ]

The splice() method

This method is used to delete an item from an array. It takes in 3 parameters which are index, deleteCount, elements to be replaced which is optional.

let data = ['Kelechi', 14, 'Nigeria', true]
data.splice(1, 2)
console.log(data) // => [ 'Kelechi', true ]

The splice method also returns an array of deleted items if u assign it to a variable.

let data = ['Kelechi', 14, 'Nigeria', true]
let newData = data.splice(1, 2)
console.log(newData) //=> [ 14, 'Nigeria' ]

It is also able to add an item to an array without deleting any item. This can be achieved by setting the deleteCount to 0.

let data = ['Kelechi', 14, 'Nigeria', true]
data.splice(2, 0, 'JavaScript')
console.log(data)//=>  [ 'Kelechi', 14, 'JavaScript', 'Nigeria', true ]

The slice() method

The slice method works like the splice() method. It takes 2 parameters start and end.

let data = ['Kelechi', 14, 'Nigeria', true]
let newData = data.slice(1, 3)
console.log(newData) // => [ 14, 'Nigeria' ]

The concat() method

This method is used to join an array with another array.

let data = ['Kelechi', 14, 'Nigeria', true]
let newData = data.concat(['JavaScript', 'Ruby', 'Python'])
console.log(newData) // => [ 'Kelechi', 14, 'Nigeria', true, 'JavaScript', 'Ruby', 'Python' ]

Methods used for transforming an array includes the following;

The map() method

The map() method transforms and returns an array when called depending on the action passed in. It takes in a function as a parameter.

let newData = ['JavaScript', 'Ruby', 'Python', 'Java'].map((item)=> item.length)
console.log(newData) //=> [ 10, 4, 6, 4 ]
let num = [1, 5, 6, 8].map(item => item * 2)
console.log(num) //=> [ 2, 10, 12, 16 ]

The reverse() method

This method returns the reverse of an array.

let data = ['Kelechi', 14, 'Nigeria', true]
console.log(data.reverse()) // => [ true, 'Nigeria', 14, 'Kelechi' ]

The split() method

This method converts a string to an array. It takes 2 parameters a delimiter and an optional numeric parameter(a limit on the array length. If it is provided, then the extra elements are ignored).

let words = 'JavaScript, Python, Ruby'.split(',')
console.log(words) //=> [ 'JavaScript', ' Python', ' Ruby' ]
let newwords = 'JavaScript, Python, Ruby'.split(',',2)
console.log(newwords)
let somewords = 'JavaScript'.split('')
console.log(soomewords) // => [ 'J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't' ]

The join() method

The join() method converts an array to a string.

console.log(words.join('')) // => JavaScript

The reduce() method.

This method is usually used in number manipulation in arrays. It is used to calculate a single value based on an array. It takes in a function and an initial value(optional) parameter. The function takes in the following parameters;

1. total: It is the required parameter and is used to specify the initialValue or the previously returned value of the function.
2. currentValue; It is a required parameter and used to specify the value of the current element.
3. currentIndex; It is an optional parameter and used to specify the array index of the current element.
4. arr; It is an optional parameter and is used to specify the array object the current element belongs to.

let num = [2,5,6,8].reduce((accumulator, currentValue)=> accumulator + currentValue)
console.log(num) //=> 21
let num = [2, 5, 6, 8].reduce((accumulator, currentValue) => accumulator + currentValue, 5)
console.log(num) // => 26

Lastly, The forEach() method allows or is used to run a function for every element in an array.

let race = ['White', 'Black', 'Asian']
race.forEach((item)=>{
console.log(item)
})

It’s a wrap guys, The listed methods are the basic and essential methods needed to manipulate an array in JavaScript. Feel free to drop your questions and also, you can check out the MDN Documentation of JavaScript Array Methods (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

Happy Coding!!!!!