Good To Know JavaScript Array Methods For Any Project

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

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

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

console.log(isFruit)

// output: true

.filter()

Will update the variable with values that passed the filtering logic

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

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

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

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

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

.concat()

Combines array elements together into one

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.

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

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

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

// 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

// 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

// 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

// 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

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

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

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

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

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