Good To Know JavaScript Array Methods For Any Project
Tags: javascript, webdev, beginners, programming
Published: 2021-11-11 13:41:13

In the past, to accomplish a simple task in JavaScript, we would have to use underscorejs or lodash library (just a pain). However, now it's all baked into the language, so you can accomplish a lot with just a one-liner.

The list below helps to start learning new things, but you will need to refer to the documentation since the information below doesn't cover all the functionality for some methods.

**.map()**

Loops through an array, and performs your logic

```jsx
const flags = [1, 2, 1, 1, 2].map(
	digit => digit === 2
);

console.log(flags)

// output: [false, true, false, false, true]
```

**.includes()**

Checks if a specific value exists in the array

```jsx
const isFruit = ['apple', 'orange', 'kiwi'].includes("orange")

console.log(isFruit)

// output: true
```

**.filter()**

Will update the variable with values that passed the filtering logic

```jsx
const fruits = ['apple', 'orange', 'kiwi'].filter(
	fruit => fruit.includes('a')
);

console.log(fruits)

// output: ['apple', 'orange']
```

**.some()**

Returns a boolean if any of the elements were true

```jsx
const isEven = [1, 2, 3, 4, 5, 6].some(
	(element) => element % 2 === 0
);

console.log(isEven)

// output: true
```

**.sort()**

Will arrange values within the array
Note: Recommending to go over docs on how this method is working

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].sort()

console.log(fruits)

// output: ['apple', 'banana', 'cantaloupe', 'dragonfruit']
```

**.forEach()**

Loops through the array and performs your logic on each element

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].forEach(
	fruit => console.log(fruit)
);

// output:
// > dragonfruit
// > apple
// > banana
// > cantaloupe
```

**.concat()**

Combines array elements together into one

```jsx
const busket1 = ['dragonfruit', 'apple']
const busket2 = ['banana', 'cantaloupe']

const allFruits = busket1.concat(busket2)

console.log(allFruits)

// output: ["dragonfruit", "apple", "banana", "cantaloupe"]
```

**.every()**

Checks each of the elements within array, and it returns a boolean based on the implemented logic. 

```jsx
const isLegalAge = [23, 33, 18, 100, 19].every(age => age >= 18)

console.log(isLegalAge)

// output: true
```

**.join()**

Connects elements with a specified value and returns a string
*****Note: Recommending to go over docs on how this method is working*

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].join('-')

console.log(fruits)

// output: "dragonfruit-apple-banana-cantaloupe"
```

**.find()**

Returns a matching logic value
*Note: Recommending to go over docs on how this method is working*

```jsx
const fruit = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].find(
	element => element === 'apple'
);

console.log(fruit)

// output: 'apple'
```

**.findIndex()**

Returns an index number of the first matching element value 
*Note: Recommending to go over docs on how this method is working*

```jsx
// array element        0            1         2        3
const fruitIntex = ['dragonfruit', 'apple', 'banana', 'kiwi'].findIndex(
	(element) => element === 'banana'
);

console.log(fruitIntex)

// output: 2
```

**.indexOf()**

Returns an index of the first matching element value 
*Note: Recommending to go over docs on how this method is working*

```jsx
// array element          0           1        2           3
const fruitIntex = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].indexOf('banana')

console.log(fruitIntex)

// output: 2
```

**.fill()**

Replaces specified index value with a new value.

*Note: Recommending to go over docs on how this method is working*

```jsx
// fill with 'orange' position 3

// array element     0             1        2           3
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].fill('orange', 3)

console.log(fruits)

// output: ["dragonfruit", "apple", "banana", "orange"]
```

**.slice()**

Will cut and store the specified index values into a new variable.

*Note: Recommending to go over docs on how this method is working*

```jsx
// array element     0            1        2           3
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].slice(2)

console.log(fruits)

// output: ["banana", "cantaloupe"]
```

**.reverse()**

Will revert array values

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe'].reverse()

console.log(fruits)

// output: ["cantaloupe", "banana", "apple", "dragonfruit"]
```

**.push()**

Will add one more element to the end of the array

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe']

console.log(fruits.push('orange'))

console.log(fruits)

// output: 
// first console:  5
// second console: ["dragonfruit", "apple", "banana", "cantaloupe", "orange"]
```

**.pop()**

Will remove the last element from the array

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe']

console.log(fruits.pop())

console.log(fruits)

// output:
// first console:  "cantaloupe"
// second console: ["dragonfruit", "apple", "banana"]
```

**.shift()**

Will remove the first element from array and could be stored into a new variable

```jsx
const fruits = ['dragonfruit', 'apple', 'banana', 'cantaloupe']

const shiftedFruit = fruits.shift()

console.log(fruits)

console.log(shiftedFruit)

// output:
// first console:  ["apple", "banana", "cantaloupe"]
// second console: "dragonfruit"
```

**.unshift()**

Will prefix new element to the array

*Note: Recommending to go over docs on how this method is working*

```jsx
const fruits = ["apple", "banana", "cantaloupe"]

console.log(fruits.unshift('dragonfruit'))

console.log(fruits)

// output:
// first console:  4
// second console: ["dragonfruit", "apple", "banana", "cantaloupe"]
```

If you want to know more about some of the methods, I recommend going to MDN Web documentation.

For more helpful tips and advice, subscribe to my channel and don't miss future topics.

[YouTube - DevPool](youtube.com/channel/UC03vw5F2isFkbJhyEZU5bvg?sub_confirmation=1 "DevPool")