Essential array methods in JavaScript

Welcome to a quick introduction to five important array methods in JavaScript that every effective developer should know. Each method comes with a short explanation.

Array.forEach()

The .forEach() method loops through array elements, leaving it up to you to do what each one does. It's a concise alternative to a traditional for loop.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  // Example action: doubling each element
  const doubled = number * 2;
  console.log(`Original: ${number}, Doubled: ${doubled}`);
});

Array.map()

Use .map() to loop through an array and create a new one based on the callback function's return statements.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  // Example action: doubling each element
  return number * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

Array.filter()

The .filter() method removes items that don't match the specified condition and keeps those that do.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
  // Example condition: filtering only even numbers
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

Array.indexOf()

.indexOf() returns the index of a given element in the array. If the element is duplicated, it returns the index of the first occurrence.

const fruits = ['apple', 'orange', 'banana', 'apple'];
const indexOfApple = fruits.indexOf('apple');
console.log(indexOfApple); // Output: 0

Array.every()

Use .every() to determine if the callback returns true for all elements. It returns true only if every element passes the specified condition.

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
  // Example condition: checking if all numbers are even
  return number % 2 === 0;
});
console.log(allEven); // Output: true

Conclusion

These five methods are just the beginning; JavaScript offers many more methods for manipulating arrays.