Array Methods You Must Know

If you’re learning JavaScript, arrays are everywhere. Lists of numbers, names, products, messages — most real data lives inside arrays. Knowing how to work with arrays properly will make your code shorter, cleaner, and easier to understand.

Let’s walk through the array methods you’ll use almost daily.

For all examples, open your browser console and try them yourself.

push() and pop()

These two methods work at the end of an array.

push() adds a new item to the end.
pop() removes the last item.

let numbers = [10, 20, 30];

Before push:

[10, 20, 30]

numbers.push(40);

After push:

[10, 20, 30, 40]

Now removing the last item:

numbers.pop();

After pop:

[10, 20, 30]

Think of this like stacking plates. You add and remove from the top.

shift() and unshift()

These methods work at the beginning of an array.

unshift() adds an item to the front.

shift() removes the first item.

let numbers = [10, 20, 30];

Before unshift:

[10, 20, 30]

numbers.unshift(5);

After unshift:

[5, 10, 20, 30]

Now remove the first item:

numbers.shift();

After shift:

[10, 20, 30]

If push/pop are like stacking plates, shift/unshift are like adjusting the front of a queue.

map()

map() creates a new array by transforming every element.

Let’s double each number.

let numbers = [5, 10, 15];

Using a traditional loop:

let doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

Using map():

let doubled = numbers.map(function(num) {
  return num * 2;
});

Before:

[5, 10, 15]

After:

[10, 20, 30]

map() is cleaner because it focuses on what you want. transforming each value, not on managing indexes.

filter()

filter() creates a new array with only the elements that match a condition.

Let’s keep numbers greater than 10.

let numbers = [5, 12, 8, 20];

Using a loop:

let result = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i]);
  }
}

Using filter():

let result = numbers.filter(function(num) {
  return num > 10;
});

Before:

[5, 12, 8, 20]

After:

[12, 20]

filter() reads more naturally: “Give me numbers greater than 10.”

reduce()

reduce() combines all values into a single result.

A common use case is calculating the total sum.

let numbers = [5, 10, 15];

Using a loop:

let total = 0;
for (let i = 0; i < numbers.length; i++) {
  total += numbers[i];
}

Using reduce():

let total = numbers.reduce(function(sum, num) {
  return sum + num;
}, 0);

Result:

Think of reduce as a rolling calculator. It starts with an initial value (here 0) and keeps combining elements until only one value remains.

forEach()

forEach() simply runs a function for each element in the array. It does not return a new array.

let numbers = [5, 10, 15];

numbers.forEach(function(num) {
  console.log(num);
});

This prints:

5
10
15

Use forEach() when you want to perform an action, like logging or updating something, but not create a new array.

Array Methods You Must Know

Comments

More from this blog

Function Declaration vs Function Expression: What’s the Difference?

Understanding Object-Oriented Programming in JavaScript

Understanding Objects in JavaScript

JavaScript Arrays 101

Understanding Variables and Data Types in JavaScript

push() and pop()

shift() and unshift()

map()

filter()

reduce()

forEach()

Command Palette

Comments

More from this blog

push() and pop()

shift() and unshift()

map()

filter()

reduce()

forEach()