Most Important JavaScript Array Methods

Most Important JavaScript Array Methods

Array()

Accepts 1 integer argument and returns an array with those elements.

Array(7) // Array(7) [ <7 empty slots> ]
Array() // Array []

.from()

We use this method to create an array. It accepts two arguments, the first one accepts an array or some iterable object.

Array.from("dev") // Array(3) [ "d", "e", "v" ]

.isArray()

Array.isArray("") // false
Array.isArray() // false
Array.isArray(42) // false
Array.isArray([]) // true

.at()

["a","b","c","d","e"].at(0) // a
["a","b","c","d","e"].at(-1) // e
["a","b","c","d","e"].at(42) // undefined

.concat()

Merges all the arguments to one array.

["hello"].concat("world", "bye", "world", [5]) 
// Array(5) [ "hello", "world", "bye", "world", 5 ]

.copyWithin()

Copies the array within a range. Accepts 3 arguments.

["1","2","3","4","5","6"].copyWithin(0) 
// Array(6) [ "1", "2", "3", "4", "5", "6" ]

["1","2","3","4","5","6"].copyWithin(3, 0) 
// Array(6) [ "1", "2", "3", "1", "2", "3" ]

["1","2","3","4","5","6"].copyWithin(3, 0, 4) 
// Array(6) [ "1", "2", "3", "1", "2", "3" ]

.every()

Accepts a test function and returns a boolean if all the elements of the array pass the test.

["gonna", "give", "you"].every((element) => element.startsWith("g")) // false

["apple", "android", "aluminium"].every((element) => element.startsWith("a")) // true

.fill()

Array(10).fill(1) // Array(10) [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]

Array(10).fill(1, 5)
// Array(10) [ <5 empty slots>, 1, 1, 1, 1, 1 ]

Array(10).fill(1, 2, 4) 
// Array(10) [ <2 empty slots>, 1, 1, <6 empty slots> ]

.filter()

["eating", "sleeping", "coding", "playing"].filter(element => element != "sleeping")
// Array(3) [ "eating", "coding", "playing" ]

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(element => element % 2)
// Array(5) [ 1, 3, 5, 7, 9 ]

.find()

const people = ["John", "Anna", "Peter", "Rick", "Elon"]
const search = name => people.find(element => element.startsWith(name))

search("Jo") // "John"
search("Rick") // "Rick"
search("Ben") // undefined

.findIndex()

const people = ["John", "Anna", "Peter", "Rick", "Elon"]
const search = name => people.findIndex(element => element.startsWith(name))

search("Jo") // 0
search("Rick") // 3
search("Ben") // -1

.flat()

[1, [2, [3, [4]]], 5].flat() // Array(4) [ 1, 2, (2) [], 5 ]

[1, [2, [3, [4]]], 5].flat(2) // Array(5) [ 1, 2, 3, (1) [], 5 ]

[1, [2, [3, [4]]], 5].flat(3) // Array(5) [ 1, 2, 3, 4, 5 ]

.forEach()

Accepts an argument that will call for each element of the array

["one","two","three","four"].forEach(alert) // Alerts 4 times

.includes()

["ant","bat","cat","rat","man"].includes("man") // true
["ant","bat","cat","rat","man"].includes("Man") // false
["ant","bat","cat","rat","man"].includes("dog") // false

.indexOf()

["ant","bat","cat","rat","man"].indexOf("man") // 4

["ant","bat","cat","rat","man"].includes("Man") // -1

["ant", "bat", "cat", "rat", "man"].includes("ant", 2) // -1

.join()

Joins all the array elements into a string with a separator (if given).

["up", "never", "gonna", "let", "you", "down"].join` `

.lastIndexOf()

["a", "aaa", "aaa", "aa", "a", "aaa"].lastIndexOf("aaa") // 5
["a", "aaa", "aaa", "aa", "a", "aaa"].lastIndexOf("b") // -1

.map()

["a","b","c","d","e","f","g"].map(e=>e.toUpperCase()) 
// Array(7) [ "A", "B", "C", "D", "E", "F", "G" ]

.pop()

let arr = ["a","b","c","d","e","f","g"]
console.log(arr.pop()) // g
console.log(arr) // ["a","b","c","d","e","f"]

.shift()

let arr = ["a","b","c","d","e","f","g"]
console.log(arr.shift()) // a
console.log(arr) // ["b","c","d","e","f","g"]

.push()

let h = ["hello"]
console.log(h.push("world")) // 2
console.log(h) // Array [ "hello", "world" ]

.unshift()

let h = ["hello"]
console.log(h.unshift("world")) // 2
console.log(h) // Array [ "world", "hello"]

.reduce()

let tot = 0
const array = [1, 2, 3, 4, 5]
array.forEach(e => (tot += e))
console.log(tot) // 15

There is no problem of doing that, but we can use .reduce() to that.

const tot = [1, 2, 3, 4, 5].reduce((previous, current) => previous + current, 0)

console.log(tot) // 15

.reduceRight()

[1, 2, 3, 4, 5].reduceRight((previous, current) => {
  console.log("current: ", current)
  return previous + current
})

output

current: 4 current: 3 current: 2 current: 1

.reverse()

[1, 2, 3, 4, 5].reverse() // Array(5) [ 5, 4, 3, 2, 1 ]

.slice()

Imagine cutting an array like cutting a vegetable. This method does the same. It accepts 2 arguments. The start index and the end.

["head","neck","body","feet"].slice() // (same array)

// WARNING : weird creatures ahead

["head","neck","body","feet"].slice(1) 
// Array(3) [ "neck", "body", "feet" ]

["head", "neck", "body", "feet"].slice(1, 3)
// Array [ "neck", "body" ]

.some()

const ages = [42, 69, 1, 25, 34, 14]
ages.some(age => age > 60) // true

.sort()

[1, 2, 4, 8, 4, 2, 1, 6, 8, 4, 2, 7, 56, 2, 9, 5, 52, 1].sort()

// Array(18) [ 1, 1, 1, 2, 2, 2, 2, 4, 4, 4,  ]

Using your own sorting function

let people = [{
    name: "Andrew",
    age: 19
  }, {
    name: "Posandu",
    age: 14
  }, {
    name: "Luke",
    age: 17
  },
  {
    name: "Ben",
    age: 23
  }
]

console.log(people.sort((a, b) => a.age > b.age))

/*
0: Object { name: "Posandu", age: 14 }
1: Object { name: "Luke", age: 17 }
2: Object { name: "Andrew", age: 19 }
3: Object { name: "Ben", age: 23 }
*/

Did you find this article valuable?

Support Mandeep Singh Blog by becoming a sponsor. Any amount is appreciated!