10 Javascript Array Methods You Should Know

If you're a Javascript developer, you're probably very familiar with the array method trinity of map, filter, and reduce, as well as the push, pop, shift, and unshift methods — but there are a handful of other methods that you may not know about (yet). This article will cover some of the other array methods that I think are most useful.

CONCAT — used to merge two or more arrays (returns a new array)

let firstArray = [1,2,3]
let secondArray = ["a","b","c"]
let mergedArray = firstArray.concat(secondArray)

console.log(mergedArray) // [1,2,3,"a","b","c"]

let thirdArray = ["💙","💛","💚"]
let anotherMergedArray = firstArray.concat(secondArray, thirdArray)

console.log(anotherMergedArray) // [1, 2, 3, "a", "b", "c", "💙", "💛", "💚"]

Note: This can also be done with the spread operator like so:

let firstArray = [1,2,3]
let secondArray = ["a","b","c"]
let mergedArray = [...firstArray, ...secondArray]

console.log(mergedArray) // [1,2,3,"a","b","c"]

EVERY — returns true or false depending on if ... every ... element in the array "passes" a test (returns true / truthy)

let numbers = [1,2,3,4,5]
console.log(numbers.every(number => number < 6)) // true

let numbers = [1,2,3,4,10]
console.log(numbers.every(number => number < 6)) // false

FIND — returns the first value that passes a test (returns true / truthy)

let numbers = [1,10,6,22,43,31,55]
console.log(numbers.find(number => number > 30)) // 43

FINDINDEX — returns the index of the first value that passes a test (returns true / truthy), otherwise returns -1

let numbers = [1,10,6,22,43,31,55]
console.log(numbers.findIndex(number => number > 30)) // 4

FLAT — concats arrays that live inside another array and returns a new array. You can specify how deep you want to flatten the arrays

// without passing a depth to flat, it will flatten sub arrays one level deep
let array1 = ["a","b","c",["d","e"]]
console.log(array1.flat()) // ["a", "b", "c", "d", "e"]

// notice we have an array two levels deep here
let array2 = ["a","b","c",[["d","e"]]]
console.log(array2.flat()) // ["a", "b", "c", ["d", "e"]]
console.log(array2.flat(2)) // ["a", "b", "c", "d", "e"]

// we can remove empty array elements with flat() as well
let array3 = [1,2,3,,4,,6]
console.log(array3.flat()) // [1, 2, 3, 4, 6]

FROM — creates a new array from an array -like or iterable object (strings, DOM elements, etc)

// quickly split a string
let string = "letters"
console.log(Array.from(string)) // ["l", "e", "t", "t", "e", "r", "s"]

// take DOM elements, convert to an array
let paragraphs = Array.from(document.getElementsByTagName("p"))
console.log(paragraphs) // will be an array of all the paragraph tags

This method allows you to pass in a second parameter, a map function, that will allow you to do something to every element of the array

// we have an array of objects, 
let people = [{name: "Bill", age: 5},{name: "Jill", age: 5},{name: "Phil", age: 5}]
let names = Array.from(people, (person => person.name))
console.log(names) // ["Bill", "Jill", "Phil"]

INCLUDES — returns true/false if an array includes a certain value

let numbers = [1,2,3]
console.log(numbers.includes(3) // true
console.log(numbers.includes(5) // false

This method can take in a second parameter, which is the index you want to start your search from

let numbers = [4,5,6]

// does numbers include 5 starting from index 1 (second element)?
console.log(numbers.includes(5, 1))  // true

// does numbers include 5 starting from index 2 (third element)?
console.log(numbers.includes(5, 2)) // false

INDEXOF — returns the first index of the value that you are looking for, otherwise returns -1

let numbers = [1,10,6,22,43,6,55]
console.log(numbers.indexOf(6)) // 2
console.log(numbers.indexOf(1000)) // -1

LASTINDEXOF — returns the last index of the value that you are looking for, otherwise returns -1

let numbers = [1,10,6,22,43,6,55]
console.log(numbers.lastIndexOf(6)) // 5
console.log(numbers.lastIndexOf(1000)) // -1

SOME — returns true or false depending on if any element in the array "passes" a test (returns true / truthy)

let numbers = [1,2,3,4,5]
console.log(numbers.some(number => number > 4)) // true
console.log(numbers.some(number => number > 6)) // false

All done — if you've enjoyed this article, feel free to check out my other Javascript articles:

JS Array Methods You Should Know: .map, .reduce, and .filter (ft. Chaining)

Javascript Basics: Use .push, .pop, .shift, and .unshift to Manipulate Arrays

Javascript: The Difference Between .slice and .splice

Javascript: Destructure Objects and Arrays for Cleaner Code

Javascript: Console.log & Beyond

As always, refer to MDN for more info:

Arrays

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.