Arrays and the Methods You'll Use Constantly

With functions in hand, let's look at arrays — JavaScript's ordered list structure, and one of the things you'll touch in nearly every real program. An array holds multiple values in a single variable, in a specific order, and each value gets a numeric position called an index, starting at 0.

const avengers = ["Tony Stark", "Vikesh Singh", "Natasha Romanoff"];
console.log(avengers[0]);
console.log(avengers[2]);
console.log(avengers.length);

avengers[0] gives "Tony Stark," because counting starts at zero, not one — this trips up almost every beginner at least once, so get comfortable with it now. avengers.length gives 3, the total count of items, which is also conveniently the index that is one past the last valid item (avengers[3] would be undefined here).

Core Array Methods: Map, Filter, Reduce

Arrays come with built-in methods, and a handful of them cover the vast majority of real work. Let's go through the ones you'll reach for constantly.

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

const doubled = numbers.map(n => n * 2);
console.log(doubled);

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);

const total = numbers.reduce((sum, n) => sum + n, 0);
console.log(total);

map() takes every item, runs your function on it, and returns a brand new array of the results — here, [2, 4, 6, 8, 10]. filter() keeps only the items where your function returns true — here, the even numbers, [2, 4]. reduce() is the one beginners find hardest: it walks through the array building up a single value. The second argument to reduce (0 here) is the starting value, and on each step, sum is what you've accumulated so far and n is the current item. By the end, total is 15.

The reason map and filter are so useful is that they don't change the original array — they return a new one. This matters a lot once your program gets bigger, because code elsewhere that still holds a reference to the original array won't get silently surprised by changes made somewhere else.

console.log(numbers);

Even after calling map and filter above, numbers is still exactly [1, 2, 3, 4, 5]. Compare that to methods that do change the original array in place, like push, pop, and splice.

const tasks = ["design", "code"];
tasks.push("deploy");
console.log(tasks);

tasks.pop();
console.log(tasks);

tasks.splice(1, 0, "test");
console.log(tasks);

Methods That Mutate The Array

push() adds to the end, pop() removes from the end, and splice(startIndex, deleteCount, itemsToInsert) is the flexible one — here, splice(1, 0, "test") means "at index 1, delete 0 items, and insert 'test'," so tasks becomes ["design", "test", "code"]. splice is powerful but its arguments are easy to mix up, so it's worth re-checking the exact order every time until it's second nature.

Finding Items With Find And Includes

Two more methods worth knowing early because they come up constantly in real code: find() and includes().

const users = [
  { name: "Tony Stark", role: "admin" },
  { name: "Vikesh Singh", role: "editor" }
];
const admin = users.find(u => u.role === "admin");
console.log(admin.name);
console.log([1, 2, 3].includes(2));

find() returns the first item that matches your condition — here, the Tony Stark object — or undefined if nothing matches (a common bug is forgetting to check for that undefined before using the result). includes() just returns true or false, perfect for a quick "is this value in the list" check.

A practical tip: when you're not sure which method to use, ask what shape of answer you need. Need a transformed list of the same length? map. Need a shorter list matching a condition? filter. Need one single combined value? reduce. Need one matching item? find. That question alone resolves most of the confusion beginners have picking between them.

Chaining Array Methods

A quick word on method chaining, since you'll see it everywhere in real JavaScript: because map, filter, and most array methods return a new array, you can call another array method directly on that result without storing it in a variable first, like numbers.filter(n => n > 2).map(n => n * 10). Each method in the chain runs on the output of the one before it, left to right. It reads almost like a sentence describing your intent — filter down to what matters, then transform it — which is exactly why this style is preferred over writing several separate loops to achieve the same result.

A final practical habit: get comfortable reading the official documentation for array methods (MDN is the standard reference most working developers use) rather than relying purely on memory. There are more array methods than this lesson covers — some, sort() and every() among them, come up often enough to be worth a quick look once you're comfortable with the core set here. Knowing where to look something up quickly is just as valuable a skill as memorizing syntax by heart.

Worth trying right now: take an array of a few numbers representing prices, use filter to keep only prices above a certain amount, then use reduce on that filtered result to get their total. Chaining methods like this — array.filter(...).reduce(...) — is extremely common in real JavaScript code.