10 Javascript Array Methods You Should Know
Tags: javascript, tips
Published: 2021-01-02 14:57:45

If you're a Javascript developer, you're probably very familiar with the array method [trinity of map, filter, and reduce](https://dev.to/antdp425/js-array-methods-you-should-know-map-reduce-and-filter-ft-chaining-e2i), as well as the [push, pop, shift, and unshift methods](https://dev.to/antdp425/javascript-basics-use-push-pop-shift-and-unshift-to-manipulate-arrays-48ab) — 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. 

![https://media.giphy.com/media/e5Qz2GyFlo8YYONQy6/giphy.gif](https://media.giphy.com/media/e5Qz2GyFlo8YYONQy6/giphy.gif)

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

```jsx
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:

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

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

![https://media.giphy.com/media/11XmZP5AL1XpMA/giphy.gif](https://media.giphy.com/media/11XmZP5AL1XpMA/giphy.gif)

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

```jsx
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
```

![https://media.giphy.com/media/SSF73Sa5WH1E0vRo1s/giphy.gif](https://media.giphy.com/media/SSF73Sa5WH1E0vRo1s/giphy.gif)

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

```jsx
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***

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

![https://media.giphy.com/media/cEYFeE5RuNgkHF7mo12/giphy.gif](https://media.giphy.com/media/cEYFeE5RuNgkHF7mo12/giphy.gif)

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

```jsx
// 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)***

```jsx
// 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](https://dev.to/antdp425/js-array-methods-you-should-know-map-reduce-and-filter-ft-chaining-e2i), that will allow you to do something to every element of the array

```jsx
// 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"]
```

![https://media.giphy.com/media/SSck2Tj3G0uHoOI8AX/giphy.gif](https://media.giphy.com/media/SSck2Tj3G0uHoOI8AX/giphy.gif)

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

```jsx
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

```jsx
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***

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

![https://media.giphy.com/media/l36kU80xPf0ojG0Erg/giphy.gif](https://media.giphy.com/media/l36kU80xPf0ojG0Erg/giphy.gif)

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

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

![https://media.giphy.com/media/8FhXc8w45aN32/giphy.gif](https://media.giphy.com/media/8FhXc8w45aN32/giphy.gif)

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

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

![https://media.giphy.com/media/26u4lOMA8JKSnL9Uk/giphy.gif](https://media.giphy.com/media/26u4lOMA8JKSnL9Uk/giphy.gif)

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)](https://dev.to/antdp425/js-array-methods-you-should-know-map-reduce-and-filter-ft-chaining-e2i)

[Javascript Basics: Use .push, .pop, .shift, and .unshift to Manipulate Arrays](https://dev.to/antdp425/javascript-basics-use-push-pop-shift-and-unshift-to-manipulate-arrays-48ab)

[Javascript: The Difference Between .slice and .splice](https://dev.to/antdp425/javascript-the-difference-between-slice-and-splice-mh0)

[Javascript: Destructure Objects and Arrays for Cleaner Code](https://dev.to/antdp425/javascript-destructure-objects-and-arrays-for-cleaner-code-10a5)

[Javascript: Console.log & Beyond](https://dev.to/antdp425/console-log-beyond-2l83)

As always, refer to MDN for more info:

[Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

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