Javascript array methods made simple

• 4 min read

Arrays in javascript (or programming in general) are a way to store data in the form of a collection of items (maybe of the same or different types) under a single variable name. But in javascript, we have a bunch of methods that come in very handy while working with arrays. So let's explore these together today!

1. at()

The at() method is used to retrieve an item from the array present at the given index. This method takes a number as a parameter and returns the value present at that index in the array on which the method is being called.

const array = [1, 2, 3, 4, 5];

const itemAtIndexTwo = array.at(2);

console.log("item at index 2: ", itemAtIndexTwo);
// output -> item at index 2: 3

2. concat()

The concat() method is used to merge/combine two or more arrays into a single array. This method returns a new array that contains all the elements of the arrays that are being merged.

const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 0];

const array3 = array1.concat(array2);

console.log("new array: ", array3);
// output -> new array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

3. every()

The every() method checks if all items of an array satisfy the given condition. This method takes a callback function as a parameter and that function should return a truthy value to indicate that the item has passed the condition. When all items satisfy the condition then the every function returns true otherwise it returns false.

const array = [2, 4, 6, 8];

function isNumberEven(number) {
  return number % 2 === 0;
}
const isArrayEven = array.every((number) => isNumberEven(number));

console.log(isArrayEven);
// output -> true

4. filter()

The filter() method checks if all items of an array satisfy the given condition and returns a new array containing those elements. This method takes a callback function as a parameter and that function returns true if the element satisfies the condition. The newly created array is a shallow copy of the original array.

const array = [2, 3, 6, 9];

function isNumberEven(number) {
  return number % 2 === 0;
}
const evenNumbers = array.filter((number) => isNumberEven(number));

console.log(evenNumbers);
// output -> [2, 6]

5. find()

The find() method checks if element of an array satisfies the given condition and returns that element. This method takes a callback function as a parameter and that function returns true if that the element satisfies the condition else it returns undefined.

const array = [1, 3, 4, 9];

function isNumberEven(number) {
  return number % 2 === 0;
}
const firstEvenNumber = array.find((number) => isNumberEven(number));

console.log(firstEvenNumber);
// output -> 4

6. findIndex()

The findIndex() method checks if an element of an array satisfies the given condition and returns the index of that element. This method takes a callback function as a parameter and that function returns the index of the element if the element satisfies the condition else it returns -1.

const array = [1, 3, 4, 9];

function isNumberEven(number) {
  return number % 2 === 0;
}
const indexOfFirstEvenNumber = array.filter((number) => isNumberEven(number));

console.log(indexOfFirstEvenNumber);
// output -> 2

7. forEach()

The forEach() method runs a given callback function for each element of an array. This function does not return anything.

const array = [1, 2, 3, 4];

function square(number) {
  return number * number;
}
const squareArray = array.filter((number) => square(number));

console.log(squareArray);
// output -> [1, 4, 9, 16]