14 JavaScript Array Methods (In 8 Minutes)
Tags: javascript, node, learning, code
Published: 2021-07-13 20:17:06

{% user cleancodestudio %}

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 


Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://cleancodestudio.paperform.co/

{% user cleancodestudio %}


---


## [14 JS Array Methods (In 8 Minutes) Screencast]

{% youtube oN6VZGGGyP4 %}



```js
let stocks = [
   { name: 'Apple', price: 321.85 },
   { name: 'Tesla', price: 2471.04 },
   { name: 'Disney', price: 118.77 },
   { name: 'Google', price: 1434.87 },
   { name: 'Netflix', price: 425.92 }
]
```

## [Array.filter](https://youtu.be/oN6VZGGGyP4?t=8)
> _The filter() method creates a new array with all elements that pass the test implemented by the provided function._
```js
stocks.filter(stock => stock.price < 1000) 
/*-------------------------------------------
 | Array.filter
 *-------------------------------------------
 |  0: {name: "Apple", price: 321.85}
 |  1: {name: "Disney", price: 118.77}
 |  2: {name: "Netflix", price: 425.92}
*/
```


## [Array.map](https://youtu.be/oN6VZGGGyP4?t=34)
> _The map() method creates a new array populated with the results of calling a provided function on every element in the calling array._

```js
stocks.map(stock => [stock.name, stock.price])
/*-------------------------------------------
 | Array.map
 *-------------------------------------------
 | 0: (2) ["Apple", 321.85]
 | 1: (2) ["Tesla", 2471.04]
 | 2: (2) ["Disney", 118.77]
 | 3: (2) ["Google", 1434.87]
 | 4: (2) ["Netflix", 425.92]
 */
```

## [Array.find](https://youtu.be/oN6VZGGGyP4?t=61)
> _The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned._

```js
stocks.find(stock => stock.name === 'Tesla')
/*-------------------------------------------
 | Array.find
 *-------------------------------------------
 |  {name: "Tesla", price: 2471.04}
 */
```

## [Array.some](https://youtu.be/oN6VZGGGyP4?t=96)
> _The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array._ 

```js
stocks.some(stock => stock.price < 1000)
/*-------------------------------------------
 | Array.some
 *-------------------------------------------
 | true
 */

stocks.some(stock => stock.price < 10)
/*-------------------------------------------
 | Array.some
 *-------------------------------------------
 | false
 */

```

## [Array.every](https://youtu.be/oN6VZGGGyP4?t=129)
> _The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value._

```js
stocks.every(stock => stock.price < 1000)
/*-------------------------------------------
 | Array.every
 *-------------------------------------------
 | false
 */

stocks.every(stock => stock.price < 2500)
/*-------------------------------------------
 | Array.every
 *-------------------------------------------
 | true
 */
```


## [Array.forEach](https://youtu.be/oN6VZGGGyP4?t=165)
> _The forEach() method executes a provided function once for each array element._ 

```js
stocks.forEach(stock => console.log(stock))
/*-------------------------------------------
 | Array.forEach
 *-------------------------------------------
 | Outputs each item (stock object) from the array to the console
 | returns void (aka undefined)
 */
```

## [Array.reduce](https://youtu.be/oN6VZGGGyP4?t=187)
> _The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value._ 

```js
stocks.reduce((total, stock) => total + stock.price, 0)
/*-------------------------------------------
 | Array.reduce
 *-------------------------------------------
 | 4772.45
 */
```


```js
let names = ['Apple', 'Tesla', 'Disney', 'Google', 'Netflix']
```

## [Array.includes](https://youtu.be/oN6VZGGGyP4?t=260)
> _The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate._

```js
names.includes('Apple')
/*-------------------------------------------
 | Array.includes
 *-------------------------------------------
 | true
 */


names.includes('Microsoft')
/*-------------------------------------------
 | Array.includes
 *-------------------------------------------
 | false
 */
```

## [Array.indexOf](https://youtu.be/oN6VZGGGyP4?t=276)
> _The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present._

```js
names.indexOf('Tesla')
/*-------------------------------------------
 | Array.indexOf
 *-------------------------------------------
 | 1
 */
```


```js
names =  ['Apple', 'Tesla', 'Disney', 'Google', 'Netflix', 'Tesla']
```

## [Array.lastIndexOf](https://youtu.be/oN6VZGGGyP4?t=321)
> _The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex._

```js
names.lastIndexOf('Tesla')
/*-------------------------------------------
 | Array.lastIndexOf
 *-------------------------------------------
 | 5
 */
```

## [Array.sort](https://youtu.be/oN6VZGGGyP4?t=334)
> _The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values._

> _The time and space complexity of the sort cannot be guaranteed as it depends on the implementation._

```js
names.sort()
/*-------------------------------------------
 | Array.sort
 *-------------------------------------------
 | ['Apple, 'Disney', 'Google', 'Netflix', 'Tesla', 'Tesla']
 */
```


## [Array.slice](https://youtu.be/oN6VZGGGyP4?t=366)
> _The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified._

```js
names.slice(3)
/*-------------------------------------------
 | Array.slice
 *-------------------------------------------
 | ['Netflix', 'Tesla', 'Tesla']
 |
 */
```

## [Array.join](https://youtu.be/oN6VZGGGyP4?t=404)
> _The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator._
```js
 names.join()
/*-------------------------------------------
 | Array.join
 *-------------------------------------------
 | "Apple,Disney,Google,Netflix,Tesla,Tesla"
 */
 
 names.join(' - ')
/*-------------------------------------------
 | Array.join
 *-------------------------------------------
 | "Apple - Disney - Google - Netflix - Tesla - Tesla"
 */


names.join('\\')
/*-------------------------------------------
 | Array.join
 *-------------------------------------------
 | "Apple\Disney\Google\Netflix\Tesla\Tesla"
 */
```


## [Array.toString](https://youtu.be/oN6VZGGGyP4?t=442)
_The toString() method returns a string representing the specified array and its elements._

```js
names.toString()
/*-------------------------------------------
 | Array.toString
 *-------------------------------------------
 | "Apple,Disney,Google,Netflix,Tesla,Tesla"
 */


stocks = [
   { name: 'Apple', price: 321.85 },
   { name: 'Tesla', price: 2471.04 },
   { name: 'Disney', price: 118.77 },
   { name: 'Google', price: 1434.87 },
   { name: 'Netflix', price: 425.92 }
]

stocks.toString()
/*-------------------------------------------
 | Array.toString
 *-------------------------------------------
 | "[object Object],[object Object],[object Object],[object Object],[object Object]""
 */

```

{% youtube oN6VZGGGyP4 %}


[Clean Code](https://cleancode.studio/clean-code)
[Simplify Developer Lives](https://cleancode.studio)


---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to 

{% codepen https://codepen.io/zhorton34/pen/BaRPYdB %}


{% user cleancodestudio %}