JavaScript Array

What You’ll Learn

Arrays store ordered lists of values in JavaScript. Built-in methods let you add, remove, search, and transform data without reinventing loops every time. This hub links to 39 method tutorials, each with syntax, five try-it examples, and FAQs.

Introduction

JavaScript arrays are versatile collections for storing lists of numbers, strings, objects, or mixed types. The language ships with dozens of helper methods on Array.prototype so you can manipulate data declaratively—often in one readable chain instead of manual for loops.

What Are Array Methods?

An array method is a function you call on an array (or on the Array constructor for static helpers). Some methods mutate the original array; others return a new array or value and leave the source untouched. Knowing which is which prevents subtle bugs.

Mutating vs Non-Mutating

• Mutating — push(), splice(), sort(), reverse() change the array in place.
• Non-mutating — map(), filter(), slice(), concat() return new data.
• Static — Array.from(), Array.isArray(), Array.of() live on the constructor, not instances.

📝 Syntax

Call an instance method on an array variable:

const fruits = ["apple", "banana", "cherry"];

fruits.push("date");           // mutates — adds to end
const upper = fruits.map(f => f.toUpperCase());  // new array

Method categories

When to Use Which Methods

• Stack operations — push() / pop() for last-in-first-out patterns.
• Queue operations — push() + shift() (or use a dedicated queue structure for large data).
• Display lists — map() to render UI from raw data.
• User filters — filter() to show only matching rows.
• Totals & counts — reduce() to sum prices or build objects.

Examples Gallery

Five starter snippets combining common array methods. Open linked tutorials for full guides and try-it labs.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenSquares = numbers
  .filter((num) => num % 2 === 0)
  .map((even) => even ** 2);

console.log("Original:", numbers);
console.log("Even squares:", evenSquares);

Original: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Even squares: [4, 16, 36, 64, 100]

const stack = ["first", "second"];

stack.push("third");
console.log("After push:", stack);

const removed = stack.pop();
console.log("Removed:", removed);
console.log("After pop:", stack);

After push: ["first", "second", "third"]
Removed: third
After pop: ["first", "second"]

const users = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Grace" },
  { id: 3, name: "Alan" }
];

const match = users.find((user) => user.name === "Grace");
console.log(match);

{ id: 2, name: "Grace" }

const prices = [9.99, 14.5, 4.25, 22.0];

const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Total:", total.toFixed(2));

Total: 50.74

const languages = ["JavaScript", "Python", "Java", "Ruby"];

languages.sort();
console.log(languages);

["Java", "JavaScript", "Python", "Ruby"]

💬 Usage Tips

• Chain thoughtfully — filter().map() reads left to right; each step returns a new array.
• Prefer const — arrays are mutable objects; const arr = [] still allows push().
• Spread for copies — [...arr] or arr.slice() before mutating if you need a clone.
• Callback parameters — most iterators receive (element, index, array).
• Search this index — jump to any of 39 method pages above.

⚠️ Common Pitfalls

• sort() without compare — numeric arrays sort lexically: [10, 2, 1].sort() → [1, 10, 2].
• Mutating while iterating — avoid splice() inside a forEach() over the same array.
• Sparse arrays — holes skip callbacks in map() and forEach().
• forEach vs break — you cannot break out of forEach(); use a for...of loop or some().
• Reference equality — includes() uses SameValueZero; objects match by reference, not deep equality.

💡 Best Practices