Some of my favourite array methods
Tags: beginners, javascript
Published: 2020-10-08 10:51:02

There are many array methods available in JavaScript to manipulate arrays. These methods are called by using a dot then the method name with any arguments that take. some of my favorites are `.concat` , `.flat` , `.join` , `.map` and `.filter`.

__`Array.join()`__\
The dot join method takes every element of the an array and returns it as a string connected by the character specified as the argument. This means if you have an array of words you could join them into a sentence.

```js
const words = ["this","could","be","a","sentence"]
const sentence = words.join(' ')
//sentence outputs: "this could be a sentence"
```

__`Array.concat()`__\
The dot concat method is very similar to dot join. Instead of joining the elements of an array into a single whole by transforming it into a string it takes the elements from two arrays and joins them into one big array.

```js
const frontNine = [1,2,3,4,5,6,7,8,9]
const backNine = [10,11,12,13,14,15,16,17,18]
const aFullRound = frontNine.concat(backNine)
//sentence outputs: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
```

__`Array.flat()`__\
Again in the theme of joining things together the dot flat method when called on a nested array will remove *n* levels of nestedness, n is an teger specified as the argument. This means if you have a an nested array that contains two arrays and you call `.flat()` on the nested array, the out put will be a single array with all the elements of the first array followed by the elements of the second array.

```js
const twoKindsOfToast = [["toast","peanut butter"],["jam","toast"]]
const pbjToastie = twoKindsOfToast.flat()
// pbjToastie outputs: ["toast","peanut butter","jam","toast"]

const russianDolls = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
const unpackedDolls = russianDolls.flat(4)
//unpackedDolls outputs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

__`Array.filter()`__\
One of the '*Higher Order Array Functions*', the dot filter method takes a function that takes an argument and compares it in a boolean expression. `.filter()` then uses that function and executes it once of each element in the array and returns a new array with all the elements that evaluated to true through the function.

```js
const stringsAndNumbers = [1,"two",3,"four",5,"six"]
const onlyStrings = stringsAndNumbers.filter(el => typeof el === 'string')
const notStrings = stringsAndNumbers.filter(el => typeof el !== 'string')
// onlyStrings outputs: ["two","four","six"]
// notStrings outputs: [1,3,5]

```

__`Array.map()`__\
Another '*Higher Order Array Function*', the dot map method takes a function that takes an argument and performs some action on the argument. `.map()` then uses that function and executes it once of each element in the array and returns a new array with all the elements modified by the action. If the elements are numbers, the action could be some sort of mathematical operation. Or if the elements are arrays/strings/objects, the action could be an array/string/object method.

```js
const odds = [1,3,5,7]
const evens = odds.map(el => el + 1)
// evens outputs: [2,4,6,8]

const lotsOfWords = [["to","be"],["or","not"],["to","be"],["that","is"],["the","question"]]
const brokenShakespeare = lotsOfWords.map(pair => pair.join(' '))
//brokenShakespeare: [["to be"],["or not"],["to be"],["that is"],["the question"]]

const shakespeare = brokenShakespeare.flat().join(' ')
//shakespeare: "to be or not to be that is the question"

```