JavaScript Array Methods

An array holds a list of things — students, prices, marks, cricket scores. But a list sitting still is not very useful. You usually want to do something with every item: double every price, keep only the passing marks, print every name, find one student, or put the scores in order. JavaScript gives you five methods for exactly that: map, filter, forEach, find and sort.

Diagram — see how it fits together

Think of a chai shop. The owner has a list of prices: 10, 15, 20, 25. map is like rewriting the menu with new prices. filter is like picking only the chais under ₹20. forEach is like calling out every item on the list. find is like asking "where is the kulhad chai?" sort is like arranging the menu from cheapest to costliest. Five small tools — and almost every JavaScript program you will ever write uses at least one of them.

Remember it like this: map changes, filter keeps, forEach visits, find searches, sort orders. Say that line once and you will never mix them up again.

map — change every item

map runs a function on every item of an array and returns a new array with the results. The original array is not changed. That is the whole idea: you take a list in, you get a new list out.

let prices = [10, 15, 20, 25];
let doubled = prices.map(function(price) {
  return price * 2;
});
// doubled is [20, 30, 40, 50]
// prices is still [10, 15, 20, 25]

Read it like a sentence: "For every price, return the price times two, and collect the answers in a new array." The function you give to map receives each item one by one, and whatever it returns becomes the item in the new array.

filter — keep only what matches

filter also returns a new array, but it keeps only the items that pass a test. The test is a function that returns true or false. True means keep it, false means drop it.

let marks = [45, 82, 30, 91, 67];
let passed = marks.filter(function(mark) {
  return mark >= 40;
});
// passed is [45, 82, 91, 67]

The 30 fails the test, so it is left out. The original array is untouched. filter is the method you reach for whenever you hear "only the ones that..." — only the passed students, only the chais under ₹20, only the items in stock.

forEach — visit every item

forEach runs a function on every item, one by one — but unlike map and filter, it returns nothing. You use it when you want to do something with each item, not build a new array: print it, add it to a total, or show it on the page.

let students = ["Rahul", "Priya", "Amit"];
students.forEach(function(name) {
  console.log("Hello, " + name);
});
// Hello, Rahul
// Hello, Priya
// Hello, Amit

find — search for one item

find returns the first item that passes a test. If nothing passes, it returns undefined — JavaScript's way of saying "not found".

let scores = [12, 45, 78, 33];
let firstBig = scores.find(function(score) {
  return score > 50;
});
// firstBig is 78 (the first one over 50)

Notice it stops at 78. The 33 is never checked, because find only wants the first match. If you need all the matches, use filter instead.

sort — put things in order

sort rearranges the array itself — it changes the original array, so be careful. With words, plain sort() works fine: it puts them in alphabetical order. With numbers, you must give it a small comparison function, because plain sort() treats numbers as text and would put 100 before 20.

let names = ["Priya", "Amit", "Rahul"];
names.sort();
// ["Amit", "Priya", "Rahul"]

let numbers = [100, 20, 3];
numbers.sort(function(a, b) {
  return a - b;
});
// [3, 20, 100]

The comparison function returns a negative number when a should come first, a positive number when b should come first, and zero when they are equal. a - b does exactly that for numbers, smallest first. For biggest first, use b - a.

Common mistakes

• Forgetting that map and filter return a new array — calling them without saving the result throws the answer away.
• Using map when you only want to print or add things up — that is forEach's job, and map wastes the new array.
• Sorting numbers with plain sort() — it sorts them as text, so 100 comes before 20. Always pass the a - b function for numbers.
• Expecting find to return all matches — it returns only the first one. Use filter for all of them.
• Writing return inside a forEach and expecting it to stop the loop — forEach has no way to stop early. Use a for loop when you need to break out.

Remember

• map changes, filter keeps, forEach visits, find searches, sort orders.
• map, filter and find return a new value; the original array stays the same.
• forEach returns nothing — use it for actions, not for building lists.
• sort changes the original array, and numbers need the a - b comparison function.

Example explained

• let marks = [45, 82, 30, 91, 67]; — the exam marks of five students, stored in one array.
• marks.filter(function(mark) { return mark >= 40; }) — keeps only the marks that are 40 or more, so the 30 drops out and the result is a new array [45, 82, 91, 67].
• passed.map(function(mark) { return mark + 5; }) — adds 5 grace marks to each passing mark, giving [50, 87, 96, 72]. The original marks array is never changed.
• passed.find(function(mark) { return mark > 90; }) — finds the first mark above 90, which is 91.
• document.getElementById("result").innerHTML = ... — writes the answer into the page, so you can see it without opening the console.