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:
Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.
Top comments (0)