loke.dev

JavaScript Array Methods Every Beginner Should Know

Master the essential JavaScript array methods that will make your code cleaner and more efficient. This beginner-friendly guide covers methods for adding, removing, transforming, and searching through arrays with practical examples and common use cases.

Introduction

Arrays are one of the most commonly used data structures in JavaScript. They allow you to store and organize multiple values in a single variable. While creating and accessing arrays is straightforward, the real power comes from JavaScript's built-in array methods that let you manipulate and transform your data efficiently.

In this guide, I'll walk you through the most useful array methods that every beginner should know, with practical examples and common use cases.

Basic Array Operations

Let's start with the fundamentals before diving into the more powerful methods.

Creating Arrays

There are several ways to create arrays in JavaScript:

// Using array literal notation (most common)
const fruits = ['apple', 'banana', 'orange']
 
// Using the Array constructor
const numbers = new Array(1, 2, 3, 4, 5)
 
// Creating an empty array and adding elements
const colors = []
colors.push('red')
colors.push('green')
colors.push('blue')

Accessing Array Elements

Array elements are accessed by their index, which starts at 0:

const fruits = ['apple', 'banana', 'orange']
 
console.log(fruits[0]) // 'apple'
console.log(fruits[1]) // 'banana'
console.log(fruits[2]) // 'orange'
 
// Get the last element
console.log(fruits[fruits.length - 1]) // 'orange'

Methods for Adding and Removing Elements

push() - Add to the End

The push() method adds one or more elements to the end of an array and returns the new length:

const fruits = ['apple', 'banana']
 
fruits.push('orange')
console.log(fruits) // ['apple', 'banana', 'orange']
 
// Add multiple elements at once
fruits.push('mango', 'kiwi')
console.log(fruits) // ['apple', 'banana', 'orange', 'mango', 'kiwi']

unshift() - Add to the Beginning

The unshift() method adds elements to the beginning of an array and returns the new length:

const numbers = [3, 4, 5]
 
numbers.unshift(1, 2)
console.log(numbers) // [1, 2, 3, 4, 5]

pop() - Remove from the End

The pop() method removes the last element from an array and returns that element:

const fruits = ['apple', 'banana', 'orange']
 
const lastFruit = fruits.pop()
console.log(lastFruit) // 'orange'
console.log(fruits) // ['apple', 'banana']

shift() - Remove from the Beginning

The shift() method removes the first element from an array and returns that element:

const fruits = ['apple', 'banana', 'orange']
 
const firstFruit = fruits.shift()
console.log(firstFruit) // 'apple'
console.log(fruits) // ['banana', 'orange']

splice() - Add or Remove from Any Position

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements:

const fruits = ['apple', 'banana', 'orange', 'mango']
 
// Remove elements
// splice(start, deleteCount)
fruits.splice(1, 2) // Remove 2 elements starting at index 1
console.log(fruits) // ['apple', 'mango']
 
// Add elements
const vegetables = ['carrot', 'broccoli', 'celery']
// splice(start, deleteCount, ...items)
vegetables.splice(1, 0, 'cucumber', 'pepper') // Insert at index 1, delete 0 elements
console.log(vegetables) // ['carrot', 'cucumber', 'pepper', 'broccoli', 'celery']
 
// Replace elements
const colors = ['red', 'green', 'blue']
colors.splice(0, 1, 'yellow') // Replace 1 element at index 0
console.log(colors) // ['yellow', 'green', 'blue']

Methods for Transforming Arrays

map() - Transform Each Element

The map() method creates a new array with the results of calling a function on every element in the original array:

const numbers = [1, 2, 3, 4, 5]
 
// Double each number
const doubled = numbers.map((num) => num * 2)
console.log(doubled) // [2, 4, 6, 8, 10]
 
// Convert to strings
const numberStrings = numbers.map((num) => `Number ${num}`)
console.log(numberStrings) // ['Number 1', 'Number 2', 'Number 3', 'Number 4', 'Number 5']
 
// Extract a property from an array of objects
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
]
 
const names = users.map((user) => user.name)
console.log(names) // ['Alice', 'Bob', 'Charlie']

filter() - Select Elements That Match a Condition

The filter() method creates a new array with all elements that pass a test implemented by the provided function:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
// Get even numbers
const evenNumbers = numbers.filter((num) => num % 2 === 0)
console.log(evenNumbers) // [2, 4, 6, 8, 10]
 
// Get numbers greater than 5
const largeNumbers = numbers.filter((num) => num > 5)
console.log(largeNumbers) // [6, 7, 8, 9, 10]
 
// Filter objects based on a property
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
]
 
const olderUsers = users.filter((user) => user.age > 28)
console.log(olderUsers)
// [{ id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 }]

reduce() - Accumulate Values

The reduce() method executes a reducer function on each element of the array, resulting in a single output value:

const numbers = [1, 2, 3, 4, 5]
 
// Sum all numbers
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 0) // 0 is the initial value of the accumulator
 
console.log(sum) // 15 (1 + 2 + 3 + 4 + 5)
 
// Find the maximum value
const max = numbers.reduce((max, current) => {
  return current > max ? current : max
}, numbers[0])
 
console.log(max) // 5
 
// Count occurrences of items
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']
 
const fruitCount = fruits.reduce((count, fruit) => {
  count[fruit] = (count[fruit] || 0) + 1
  return count
}, {})
 
console.log(fruitCount) // { apple: 3, banana: 2, orange: 1 }

sort() - Reorder Elements

The sort() method sorts the elements of an array in place and returns the sorted array:

// Sort strings alphabetically
const fruits = ['orange', 'apple', 'banana', 'mango']
fruits.sort()
console.log(fruits) // ['apple', 'banana', 'mango', 'orange']
 
// Sort numbers (be careful, default sort converts to strings!)
const numbers = [10, 5, 8, 1, 7]
numbers.sort() // This doesn't work as expected
console.log(numbers) // [1, 10, 5, 7, 8] (string comparison)
 
// Correct way to sort numbers
numbers.sort((a, b) => a - b) // Ascending order
console.log(numbers) // [1, 5, 7, 8, 10]
 
numbers.sort((a, b) => b - a) // Descending order
console.log(numbers) // [10, 8, 7, 5, 1]
 
// Sort objects by a property
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
]
 
// Sort by age (ascending)
users.sort((a, b) => a.age - b.age)
console.log(users)
 
// Sort by name
users.sort((a, b) => a.name.localeCompare(b.name))
console.log(users)

Methods for Searching and Testing

find() - Get the First Matching Element

The find() method returns the first element in the array that satisfies a provided testing function:

const numbers = [5, 12, 8, 130, 44]
 
const found = numbers.find((num) => num > 10)
console.log(found) // 12
 
// Finding an object in an array
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
]
 
const user = users.find((user) => user.id === 2)
console.log(user) // { id: 2, name: 'Bob', age: 30 }

findIndex() - Get the Index of the First Match

The findIndex() method returns the index of the first element in the array that satisfies a provided testing function:

const fruits = ['apple', 'banana', 'orange', 'mango']
 
const index = fruits.findIndex((fruit) => fruit === 'orange')
console.log(index) // 2
 
// If no element satisfies the condition, -1 is returned
const notFound = fruits.findIndex((fruit) => fruit === 'grape')
console.log(notFound) // -1

includes() - Check if an Element Exists

The includes() method determines whether an array includes a certain value, returning true or false:

const fruits = ['apple', 'banana', 'orange']
 
console.log(fruits.includes('banana')) // true
console.log(fruits.includes('grape')) // false
 
// You can also specify a starting position
console.log(fruits.includes('apple', 1)) // false (starts searching from index 1)

some() - Check if Any Element Passes a Test

The some() method tests whether at least one element in the array passes the test implemented by the provided function:

const numbers = [1, 2, 3, 4, 5]
 
// Check if any number is even
const hasEven = numbers.some((num) => num % 2 === 0)
console.log(hasEven) // true
 
// Check if any number is greater than 10
const hasLarge = numbers.some((num) => num > 10)
console.log(hasLarge) // false

every() - Check if All Elements Pass a Test

The every() method tests whether all elements in the array pass the test implemented by the provided function:

const numbers = [2, 4, 6, 8, 10]
 
// Check if all numbers are even
const allEven = numbers.every((num) => num % 2 === 0)
console.log(allEven) // true
 
// Check if all numbers are greater than 5
const allLarge = numbers.every((num) => num > 5)
console.log(allLarge) // false

Other Useful Array Methods

join() - Convert Array to String

The join() method creates and returns a new string by concatenating all of the elements in an array, separated by a specified separator:

const fruits = ['apple', 'banana', 'orange']
 
// Default separator is a comma
console.log(fruits.join()) // 'apple,banana,orange'
 
// Specify a custom separator
console.log(fruits.join(' and ')) // 'apple and banana and orange'
console.log(fruits.join('')) // 'applebananaorange'

slice() - Extract a Portion of an Array

The slice() method returns a shallow copy of a portion of an array into a new array:

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi']
 
// slice(start, end) - end is not included
const citrus = fruits.slice(1, 3)
console.log(citrus) // ['banana', 'orange']
 
// Omitting the end parameter extracts through the end of the array
const lastTwo = fruits.slice(3)
console.log(lastTwo) // ['mango', 'kiwi']
 
// Negative indices count from the end
const lastThree = fruits.slice(-3)
console.log(lastThree) // ['orange', 'mango', 'kiwi']

concat() - Combine Arrays

The concat() method is used to merge two or more arrays, returning a new array:

const fruits = ['apple', 'banana']
const vegetables = ['carrot', 'broccoli']
 
const combined = fruits.concat(vegetables)
console.log(combined) // ['apple', 'banana', 'carrot', 'broccoli']
 
// You can concat multiple arrays
const more = combined.concat(['strawberry'], ['pepper'])
console.log(more)
// ['apple', 'banana', 'carrot', 'broccoli', 'strawberry', 'pepper']

reverse() - Reverse the Order

The reverse() method reverses an array in place and returns the reference to the same array:

const numbers = [1, 2, 3, 4, 5]
 
numbers.reverse()
console.log(numbers) // [5, 4, 3, 2, 1]

Practical Examples: Combining Array Methods

The real power of array methods comes when you combine them to solve complex problems:

Example 1: Processing a List of Products

const products = [
  { id: 1, name: 'Laptop', price: 1200, inStock: true },
  { id: 2, name: 'Phone', price: 800, inStock: true },
  { id: 3, name: 'Tablet', price: 500, inStock: false },
  { id: 4, name: 'Monitor', price: 300, inStock: true },
  { id: 5, name: 'Keyboard', price: 100, inStock: true },
]
 
// Get the names of available products sorted by price (low to high)
const availableProductNames = products
  .filter((product) => product.inStock)
  .sort((a, b) => a.price - b.price)
  .map((product) => product.name)
 
console.log(availableProductNames)
// ['Keyboard', 'Monitor', 'Phone', 'Laptop']
 
// Calculate the total value of in-stock inventory
const totalInventoryValue = products
  .filter((product) => product.inStock)
  .reduce((total, product) => total + product.price, 0)
 
console.log(totalInventoryValue) // 2400

Example 2: Analyzing Student Data

const students = [
  { id: 1, name: 'Alice', grades: [85, 90, 92] },
  { id: 2, name: 'Bob', grades: [78, 80, 75] },
  { id: 3, name: 'Charlie', grades: [90, 95, 85] },
  { id: 4, name: 'Diana', grades: [60, 70, 82] },
]
 
// Calculate average grade for each student
const studentAverages = students.map((student) => {
  const sum = student.grades.reduce((total, grade) => total + grade, 0)
  const average = sum / student.grades.length
 
  return {
    name: student.name,
    average: average.toFixed(1),
  }
})
 
console.log(studentAverages)
// [
//   { name: 'Alice', average: '89.0' },
//   { name: 'Bob', average: '77.7' },
//   { name: 'Charlie', average: '90.0' },
//   { name: 'Diana', average: '70.7' }
// ]
 
// Find students with an average grade above 85
const highPerformers = studentAverages
  .filter((student) => parseFloat(student.average) > 85)
  .map((student) => student.name)
 
console.log(highPerformers) // ['Alice', 'Charlie']

Common Mistakes and Gotchas

1. Forgetting That sort() Converts to Strings

// ❌ Incorrect numeric sort
const numbers = [10, 2, 30, 5]
numbers.sort()
console.log(numbers) // [10, 2, 30, 5] (wrong order)
 
// ✅ Correct numeric sort
numbers.sort((a, b) => a - b)
console.log(numbers) // [2, 5, 10, 30]

2. Modifying the Original Array

Some methods modify the original array (mutating methods), while others return a new array:

Mutating methods (change the original array):

  • push(), pop(), shift(), unshift()
  • splice(), sort(), reverse()

Non-mutating methods (return a new array):

  • map(), filter(), reduce()
  • concat(), slice()
// ❌ Potential mistake: assuming sort doesn't modify the original
const numbers = [3, 1, 4, 2]
const sorted = numbers.sort()
 
console.log(numbers) // [1, 2, 3, 4] - original array is modified
console.log(sorted) // [1, 2, 3, 4] - reference to the same array
 
// ✅ If you want to keep the original array unchanged
const numbers = [3, 1, 4, 2]
const sorted = [...numbers].sort()
 
console.log(numbers) // [3, 1, 4, 2] - original array is preserved
console.log(sorted) // [1, 2, 3, 4] - new sorted array

3. Using indexOf() with Objects

indexOf() uses strict equality (===), which doesn't work as expected with objects:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
]
 
const bob = { id: 2, name: 'Bob' }
 
// ❌ This doesn't work as expected
console.log(users.indexOf(bob)) // -1 (not found)
 
// ✅ Use findIndex instead
console.log(users.findIndex((user) => user.id === bob.id)) // 1

Conclusion

JavaScript array methods are powerful tools that can make your code more concise, readable, and efficient. By mastering these methods, you'll be able to manipulate data with ease and solve complex problems with just a few lines of code.

Remember these key points:

  • Use push(), pop(), shift(), unshift(), and splice() to add or remove elements
  • Use map(), filter(), and reduce() to transform arrays
  • Use find(), findIndex(), includes(), some(), and every() for searching and testing
  • Be aware of which methods modify the original array and which return a new one
  • Combine methods to create powerful data processing pipelines

With these array methods in your toolkit, you'll be well-equipped to handle a wide variety of programming challenges.

Further Resources