JavaScript Array

Beginner

⏱️ 15 min read

📚 Updated: Aug 2026

🎯 39 Tutorials

🚀 5 Examples

Array.prototype

JavaScript array methods reference hub — map, filter, reduce, push, and find tutorials

Overview

What You’ll Learn

JavaScript arrays store ordered lists of values. Built-in methods on Array.prototype (and a few static helpers on Array) let you add, remove, search, and transform data without reinventing loops every time. This hub links to 39 method tutorials, each with syntax, try-it examples, and FAQs — plus a searchable index below.

Add / Remove

push, pop, splice

Grow or shrink arrays at either end, or splice in the middle.

Search

find, includes

Locate values by equality or by a predicate callback.

Transform

map, filter, flat

Build new arrays from existing ones without mutating the source.

Aggregate

reduce, some, every

Fold lists into one value, or test whether any/all items match.

Immutable Copies

slice, concat, with

Copy portions or return updated arrays without changing the original.

39 Guides

Full searchable index

Jump to any method tutorial from the category tables below.

Introduction

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

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.

Why it matters?

Almost every app turns lists into UI, filtered tables, or totals. Mastering a small set of array methods—map, filter, find, reduce, push—covers most day-to-day data work.

Key Highlights

Zero-Based Indexes

First element is arr[0]; length is always one past the last index.

Mutating vs Safe

push/splice/sort change in place; map/filter/slice return new data.

Chainable Pipelines

Non-mutating methods return arrays you can chain: filter().map().

Static Helpers

Array.isArray(), Array.from(), and Array.of() live on the constructor.

In short: arrays hold ordered values; methods either mutate the list or return new results. Learn the difference, then browse the 39 tutorials for deep dives.

Foundation

📝 Syntax

Call an instance method on an array variable, or a static helper on Array:

JavaScript

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

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

Array.isArray(fruits);         // true — static helper

Method categories

Category	Example methods	Purpose
Access & length	`at()`, `slice()`	Read elements by index
Add / remove	`push()`, `pop()`, `splice()`	Change array size
Search	`includes()`, `find()`, `indexOf()`	Locate values
Transform	`map()`, `filter()`, `flat()`	Build new arrays
Aggregate	`reduce()`, `some()`, `every()`	Summarize or test all items

Minimal workflow

JavaScript

const nums = [1, 2, 3, 4, 5];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
// => [20, 40]

Cheat Sheet

⚡ Quick Reference

Goal	Method	Mutates?
Add to end	`push(item)`	Yes
Remove from end	`pop()`	Yes
Copy a portion	`slice(start, end)`	No
Transform each item	`map(fn)`	No
Keep matching items	`filter(fn)`	No
Sum to one value	`reduce(fn, init)`	No

Compare

📋 `map` vs `filter` vs `forEach` vs `reduce`

All iterate — but return values and intent differ.

map()

new array

Transforms every element into a result list

filter()

subset array

Keeps only elements that pass a test

forEach()

undefined

Runs side effects; does not build a new array

reduce()

one value

Folds the list into a single accumulated result

Context

When to Use Which Methods

Pick the method that matches the job — stack ops, UI lists, filters, or totals.

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

Key benefit: the right method name documents intent — prefer filter over a manual loop when you mean “keep matching items.”

Preview

👀 Sample Array

A typical array of strings with zero-based indexes — try at(-1) for the last item:

[ "JavaScript", "Python", "Java" ] → length: 3 → at(-1): "Java"

Array Method Tutorial Index

Search by method name or browse by category. Every tutorial includes syntax, examples, and FAQs.

Search methods

Getting Started

6 tutorials

Essential methods for reading, adding, and removing elements.

Method	Description	Tutorial
`at()`	Retrieves an element at a specified index, including negative offsets from the end.	Open
`push()`	Adds one or more elements to the end and returns the new length.	Open
`pop()`	Removes and returns the last element, mutating the array.	Open
`shift()`	Removes and returns the first element, shifting others down.	Open
`unshift()`	Adds elements to the beginning and returns the new length.	Open
`slice()`	Returns a shallow copy of a portion without mutating the original.	Open

Search & Test

9 tutorials

Find values and check whether elements match a condition.

Method	Description	Tutorial
`includes()`	Checks whether an array contains a value; returns true or false.	Open
`indexOf()`	Returns the first index of a value, or -1 if not found.	Open
`lastIndexOf()`	Returns the last index of a value, searching backward.	Open
`find()`	Returns the first element that satisfies a testing function.	Open
`findIndex()`	Returns the index of the first element that passes a test.	Open
`findLast()`	Returns the last element that satisfies a testing function.	Open
`findLastIndex()`	Returns the index of the last element that passes a test.	Open
`some()`	Returns true if at least one element passes a test function.	Open
`every()`	Tests whether all elements pass a callback; returns true or false.	Open

Transform & Aggregate

6 tutorials

Map, filter, flatten, and reduce data into new shapes.

Method	Description	Tutorial
`map()`	Creates a new array by transforming each element with a callback.	Open
`filter()`	Creates a new array with elements that pass a test function.	Open
`flat()`	Flattens nested arrays into a single-level array.	Open
`flatMap()`	Maps each element then flattens the result by one level.	Open
`reduce()`	Reduces the array to a single value by applying a callback left to right.	Open
`reduceRight()`	Like reduce(), but processes elements from right to left.	Open

In-Place Changes

5 tutorials

Methods that modify the original array directly.

Method	Description	Tutorial
`splice()`	Adds, removes, or replaces elements at a given index in place.	Open
`sort()`	Sorts elements in place using an optional compare function.	Open
`reverse()`	Reverses element order in place and returns the same array.	Open
`fill()`	Fills all or part of an array with a static value, mutating the array.	Open
`copyWithin()`	Copies a sequence of elements within the array to another index in place.	Open

Iteration

4 tutorials

Loop over elements or expose iterators.

Method	Description	Tutorial
`forEach()`	Runs a callback for each element; does not return a new array.	Open
`entries()`	Returns an iterator of [index, value] pairs for each element.	Open
`keys()`	Returns an iterator of index keys for the array.	Open
`values()`	Returns an iterator of the array element values.	Open

Combine & Immutable Updates

2 tutorials

Merge arrays or return updated copies without mutation.

Method	Description	Tutorial
`concat()`	Combines two or more arrays into a new array without mutating the originals.	Open
`with()`	Returns a new array with one index replaced; does not mutate the original.	Open

String Conversion

4 tutorials

Turn arrays into readable strings.

Method	Description	Tutorial
`join()`	Joins all elements into a string with an optional separator.	Open
`toString()`	Returns a comma-separated string of the array elements.	Open
`toLocaleString()`	Returns a locale-aware string representing the array.	Open
`valueOf()`	Returns the primitive value of the array (the array itself).	Open

Static Methods

3 tutorials

Array constructor helpers — not called on an instance.

Method	Description	Tutorial
`Array.from()`	Creates an array from an iterable or array-like object.	Open
`Array.isArray()`	Returns true if the value is an array, false otherwise.	Open
`Array.of()`	Creates a new array from the arguments you pass in.	Open

Hands-On

Examples Gallery

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

📚 Transform Data

Filter, map, and chain methods for clean data pipelines.

Example 1 — Filter Even Numbers and Square Them

Chain filter() and map() to transform a list in two steps.

JavaScript

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);

filter() Tutorial

How It Works

filter() keeps only even numbers. map() squares each survivor. The original numbers array is unchanged.

Example 2 — Add and Remove with push() and pop()

Mutate a stack-like array at the end.

JavaScript

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);

push() Tutorial

How It Works

push() returns the new length and adds to the end. pop() removes the last element and returns it.

📈 Search & Aggregate

Find items and fold arrays into single values.

Example 3 — Find the First Match

Use find() to locate an object by property value.

JavaScript

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);

find() Tutorial

How It Works

find() stops at the first element where the callback returns true. If nothing matches, it returns undefined.

Example 4 — Sum Values with reduce()

Fold an array of numbers into a single total.

JavaScript

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));

reduce() Tutorial

How It Works

The callback receives an accumulator and the current item. Starting from 0, each price adds to the running sum.

Example 5 — Sort Strings Alphabetically

sort() orders elements in place; pass a compare function for numbers.

JavaScript

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

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

sort() Tutorial

How It Works

Default sort() converts elements to strings and compares UTF-16 code units. For numeric sort, use (a, b) => a - b.

Use Cases

Everyday situations where array methods keep code short and clear.

1. UI Rendering

Turn data rows into components or HTML with map().

Example: product cards from an API list.

2. Search Filters

Keep matching items with filter() and includes().

Example: live search over a table.

3. Cart Totals

Sum prices or counts with reduce().

Example: checkout subtotal from line items.

4. Undo / History

Treat an array as a stack with push() and pop().

Example: editor undo buffer.

5. Validation

Use every() / some() for form or schema checks.

Example: all fields filled before submit.

6. Immutable Updates

Prefer slice(), concat(), or with() in React-style state.

Example: replace one index without mutate.

Pro Tip: start at Getting Started (at, push, slice), then learn map / filter / find before tackling reduce.

Advantages

Why reach for built-in array methods instead of raw loops.

1. Intentional Names
filter and map document what the code does better than a generic for.
2. Chainable Pipelines
Compose transforms in one expression without temporary variables.
3. Fewer Off-by-Ones
Iterators handle indexes for you; early-exit helpers like find stop when done.
4. Shared Vocabulary
Teams and libraries speak the same method names across projects.

Pro Tip: still use a plain for...of when you need break/continue or maximum control — methods are tools, not rules.

Usage Tips

Small habits that keep array code clean and predictable.

1. Chain Thoughtfully
filter().map() reads left to right; each step returns a new array.
2. Prefer const
Arrays are mutable objects; const arr = [] still allows push().
3. Spread for Copies
Use [...arr] or arr.slice() before mutating if you need a clone.
4. Remember Callback Args
Most iterators receive (element, index, array).
5. Search This Index
Jump to any of 39 method pages from the tables above.

Pro Tip: check whether a method mutates before chaining it into a pipeline — sort() returns the same array and reorders it in place.

Common Pitfalls

Mistakes that commonly break array-heavy code.

1. sort() Without a Compare Fn
Numeric arrays sort lexically: [10, 2, 1].sort() → [1, 10, 2].
→ Pass (a, b) => a - b for numbers.
2. Mutating While Iterating
Avoid splice() inside a forEach() over the same array.
→ Build a new list, or iterate a copy.
3. Sparse Array Holes
Holes skip callbacks in map() and forEach().
→ Prefer dense arrays or fill missing slots explicitly.
4. No break in forEach
You cannot break out of forEach().
→ Use for...of, some(), or find() for early exit.
5. Reference Equality
includes() uses SameValueZero; objects match by reference, not deep equality.
→ Use find() with a property check for objects.

🧠 How Array Methods Run

Call on an array

Invoke arr.method(args) or Array.from(iterable) for static helpers.

Invoke

Engine processes elements

Iterators walk indexes; some methods skip holes or stop early (find, some).

Iterate

Return a result

New array, boolean, single value, iterator, or mutated original—depends on the method.

Return

Composable pipelines

Chain non-mutating methods for readable data transformations in apps and APIs.

Important

Notes

Length is writable. Setting arr.length = 0 clears the array; shrinking truncates trailing elements.
Type checks. Prefer Array.isArray(x) over typeof x === "object".
Newer APIs. Methods like at(), findLast(), and with() have per-page browser notes.
Don’t use delete. delete arr[i] leaves a hole — use splice() to remove items.

Quick Takeaway: know mutate vs copy, pick the method that names your intent, and use the searchable index to open any of the 39 deep-dive tutorials.

Compatibility

Browser Support

Core methods like push(), map(), filter(), and reduce() work in every modern browser and Node.js. Newer methods (at(), findLast(), with()) have dedicated notes on their tutorial pages.

✓ Baseline · ES5–ES2023

Array.prototype methods

Most methods are production-safe in Chrome, Firefox, Safari, Edge, IE 9+, and all modern Node.js versions. Check individual tutorials for ES2022+ additions.

99% Core methods

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

Array methods Excellent

Bottom line: Safe to use core methods everywhere except very old IE8 environments. Polyfill or check individual pages for ES2022+ APIs like at() and with().

Wrap Up

🎉 Conclusion

JavaScript array methods turn plain lists into powerful data tools. Start with Getting Started tutorials, then use the searchable index to explore all 39 guides.

Each method page includes syntax, examples, browser support, and FAQs. Combine non-mutating methods in chains to keep application code short and expressive.

Know mutate vs copy, pick the method that names your intent, and open any deep-dive from the index above.

Browse Getting Started Try at() Method

Pro Tips

💡 Best Practices

✅ Do

Learn mutating vs non-mutating methods
Use Array.isArray() for type checks
Pass compare functions to sort() for numbers
Prefer slice() over splice() for copies
Read method docs before chaining unfamiliar APIs

❌ Don’t

Assume sort() orders numbers correctly by default
Mutate arrays you are iterating over
Use forEach() when you need a returned array
Rely on delete arr[i] to remove items — use splice()
Memorize all 39 names at once

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about array methods

Your gateway to 39 method tutorials.

Core concepts

[] 01

Ordered lists

Zero-based indexes

Basics

+ 02

Mutate

push, splice

In-place

map 03

Transform

map, filter

New data

? 04

Search

find, includes

Lookup

39 05

Index

Search all

Ref

❓ Frequently Asked Questions

What are JavaScript array methods?

Array methods are built-in functions on Array.prototype (or the Array constructor) that help you read, add, remove, transform, and search elements. Examples include push(), map(), filter(), and reduce().

Which array methods mutate the original array?

Methods like push(), pop(), shift(), unshift(), splice(), sort(), reverse(), fill(), and copyWithin() change the array in place. Methods like map(), filter(), slice(), and concat() return a new array or value without modifying the original.

What is the difference between map() and forEach()?

map() runs a callback on each element and returns a new array of results. forEach() also runs a callback for each element but returns undefined — use it for side effects like logging, not for building a new array.

When should I use find() vs filter()?

Use find() when you need the first matching element (or undefined). Use filter() when you need every element that matches, returned as a new array.

How do I check if a value is an array?

Use Array.isArray(value). It is more reliable than typeof because typeof [] returns 'object'.

Where should I start on this page?

Read the overview, try the five examples, then open at() or push() from Getting Started. Use the search box to jump to any of the 39 method tutorials.

Did you Know? 🔊

A JavaScript array stores ordered values. Methods like push(), map(), and filter() let you add, transform, and search elements without writing loops from scratch every time. Method chaining works because map(), filter(), and slice() each return a new array — so arr.filter(fn).map(fn) needs no temporary variables.

Start Your First Method Tutorial

Open at() or push() from Getting Started, or search the full index above.

at() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript File Handling JavaScript Array at() Method

JavaScript Array

What You’ll Learn

Add / Remove

Search

Transform

Aggregate

Immutable Copies

39 Guides

Introduction

Why it matters?

Zero-Based Indexes

Mutating vs Safe

Chainable Pipelines

Static Helpers

📝 Syntax

Method categories

Minimal workflow

⚡ Quick Reference

📋 map vs filter vs forEach vs reduce

When to Use Which Methods

Stack operations

Queue-style work

Display lists

User filters

Totals & counts

👀 Sample Array

Array Method Tutorial Index

Getting Started

Search & Test

Transform & Aggregate

In-Place Changes

Iteration

Combine & Immutable Updates

String Conversion

Static Methods

Examples Gallery

📚 Transform Data

Example 1 — Filter Even Numbers and Square Them

How It Works

Example 2 — Add and Remove with push() and pop()

How It Works

📈 Search & Aggregate

Example 3 — Find the First Match

How It Works

Example 4 — Sum Values with reduce()

How It Works

Example 5 — Sort Strings Alphabetically

How It Works

Use Cases

1. UI Rendering

2. Search Filters

3. Cart Totals

4. Undo / History

5. Validation

6. Immutable Updates

Advantages

1. Intentional Names

2. Chainable Pipelines

3. Fewer Off-by-Ones

4. Shared Vocabulary

Usage Tips

1. Chain Thoughtfully

2. Prefer const

3. Spread for Copies

4. Remember Callback Args

5. Search This Index

Common Pitfalls

1. sort() Without a Compare Fn

2. Mutating While Iterating

3. Sparse Array Holes

4. No break in forEach

5. Reference Equality

🧠 How Array Methods Run

Call on an array

Engine processes elements

Return a result

Composable pipelines

Notes

Browser Support

Array.prototype methods

📋 `map` vs `filter` vs `forEach` vs `reduce`

2. Prefer `const`

1. `sort()` Without a Compare Fn

4. No `break` in `forEach`