codingstuff.io
ExploreTutorialsProblemsCS Subjects
Get Started
ExploreTutorialsProblemsCS Subjects
Get Started
codingstuff.io

Master the art of building software through interactive tutorials, real-world problems, and guided projects.

Pune, Maharashtra, India

codingstuffmail@gmail.com

Product

  • Explore
  • Tutorials
  • Problems
  • CS Subjects

Company

  • About
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Sitemap

© 2026 codingstuff.io. All rights reserved.

Built with ❤️ for developers everywhere

/
/
All Tutorials
🌐

JavaScript

25 / 65 topics
21JavaScript Strings22JavaScript String Methods23JavaScript Numbers24JavaScript Math Object25JavaScript Arrays26JavaScript Array Methods27JavaScript Array Iteration
Tutorials/JavaScript/Arrays & Array Methods
🌐JavaScript

Arrays & Array Methods

Updated 2026-04-21
12 min

Arrays & Array Methods

Arrays are ordered collections of values. JavaScript arrays are dynamic (no fixed size), can hold mixed types, and come with dozens of powerful built-in methods.

Creating Arrays

creating.js
1const fruits = ["apple", "banana", "cherry"];
2const numbers = [1, 2, 3, 4, 5];
3const mixed = [1, "two", true, null, { name: "Alice" }];
4const empty = [];
5
6// Array constructor (less common)
7const zeros = new Array(5).fill(0); // [0, 0, 0, 0, 0]
8
9// Array.from - create from iterables
10const chars = Array.from("Hello"); // ["H", "e", "l", "l", "o"]
11const range = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

Accessing & Modifying

access.js
1const fruits = ["apple", "banana", "cherry"];
2
3console.log(fruits[0]); // "apple"
4console.log(fruits.at(-1)); // "cherry" (negative indexing)
5console.log(fruits.length); // 3
6
7// Modify
8fruits[1] = "blueberry";
9console.log(fruits); // ["apple", "blueberry", "cherry"]

Adding & Removing Elements

MethodActionReturnsMutates?
push()Add to endNew length✅
pop()Remove from endRemoved item✅
unshift()Add to beginningNew length✅
shift()Remove from beginningRemoved item✅
splice()Add/remove at indexRemoved items✅
add-remove.js
1const arr = [1, 2, 3];
2
3// End
4arr.push(4); // [1, 2, 3, 4]
5arr.pop(); // [1, 2, 3] - returns 4
6
7// Beginning
8arr.unshift(0); // [0, 1, 2, 3]
9arr.shift(); // [1, 2, 3] - returns 0
10
11// Splice: splice(start, deleteCount, ...items)
12arr.splice(1, 1); // [1, 3] - removed "2"
13arr.splice(1, 0, 2, 2.5); // [1, 2, 2.5, 3] - inserted

Immutable Alternatives

Methods like push and splice modify the original array. For immutable patterns, use spread: [...arr, newItem] instead of arr.push(newItem).

Searching

searching.js
1const nums = [10, 20, 30, 20, 40];
2
3console.log(nums.indexOf(20)); // 1 (first occurrence)
4console.log(nums.lastIndexOf(20)); // 3 (last occurrence)
5console.log(nums.includes(30)); // true
6
7// find - returns first matching element
8const users = [
9{ name: "Alice", age: 25 },
10{ name: "Bob", age: 30 },
11{ name: "Charlie", age: 35 },
12];
13
14const bob = users.find(u => u.name === "Bob");
15console.log(bob); // { name: "Bob", age: 30 }
16
17// findIndex - returns index of first match
18const bobIndex = users.findIndex(u => u.name === "Bob");
19console.log(bobIndex); // 1
20
21// some - at least one matches?
22console.log(users.some(u => u.age > 30)); // true
23
24// every - all match?
25console.log(users.every(u => u.age > 20)); // true

Transformation Methods (Non-Mutating)

map - Transform each element

map.js
1const numbers = [1, 2, 3, 4, 5];
2
3const doubled = numbers.map(n => n * 2);
4console.log(doubled); // [2, 4, 6, 8, 10]
5
6const names = ["alice", "bob", "charlie"];
7const capitalized = names.map(name =>
8name.charAt(0).toUpperCase() + name.slice(1)
9);
10console.log(capitalized); // ["Alice", "Bob", "Charlie"]

filter - Keep matching elements

filter.js
1const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2
3const evens = numbers.filter(n => n % 2 === 0);
4console.log(evens); // [2, 4, 6, 8, 10]
5
6const products = [
7{ name: "Laptop", price: 999 },
8{ name: "Mouse", price: 25 },
9{ name: "Keyboard", price: 75 },
10{ name: "Monitor", price: 450 },
11];
12
13const expensive = products.filter(p => p.price > 100);
14console.log(expensive); // [Laptop, Monitor]

reduce - Combine into single value

reduce.js
1const numbers = [1, 2, 3, 4, 5];
2
3// Sum
4const sum = numbers.reduce((acc, n) => acc + n, 0);
5console.log(sum); // 15
6
7// Max value
8const max = numbers.reduce((a, b) => a > b ? a : b);
9console.log(max); // 5
10
11// Group by category
12const items = [
13{ name: "Apple", category: "fruit" },
14{ name: "Carrot", category: "vegetable" },
15{ name: "Banana", category: "fruit" },
16{ name: "Broccoli", category: "vegetable" },
17];
18
19const grouped = items.reduce((groups, item) => {
20const key = item.category;
21groups[key] = groups[key] || [];
22groups[key].push(item.name);
23return groups;
24}, {});
25
26console.log(grouped);
27// { fruit: ["Apple", "Banana"], vegetable: ["Carrot", "Broccoli"] }

Chaining Methods

map, filter, and reduce return new values, so you can chain them: arr.filter(...).map(...).reduce(...).

Sorting

sorting.js
1// sort() mutates and sorts as strings by default!
2const nums = [10, 1, 21, 2];
3nums.sort();
4console.log(nums); // [1, 10, 2, 21] - string sorting!
5
6// Numeric sort
7nums.sort((a, b) => a - b); // Ascending: [1, 2, 10, 21]
8nums.sort((a, b) => b - a); // Descending: [21, 10, 2, 1]
9
10// Sort objects
11const users = [
12{ name: "Charlie", age: 35 },
13{ name: "Alice", age: 25 },
14{ name: "Bob", age: 30 },
15];
16users.sort((a, b) => a.age - b.age);
17// Sorted by age ascending
18
19// Non-mutating sort with toSorted() (ES2023)
20const sorted = [3, 1, 2].toSorted((a, b) => a - b);
21// original unchanged, sorted = [1, 2, 3]

sort() Mutates!

sort() modifies the original array. To sort without mutating, use [...arr].sort() or the new toSorted() method.

Spread & Destructuring

spread.js
1// Spread - copy and combine
2const a = [1, 2, 3];
3const b = [4, 5, 6];
4const combined = [...a, ...b]; // [1, 2, 3, 4, 5, 6]
5
6// Copy (shallow)
7const copy = [...a];
8
9// Destructuring
10const [first, second, ...rest] = [10, 20, 30, 40, 50];
11console.log(first); // 10
12console.log(second); // 20
13console.log(rest); // [30, 40, 50]
14
15// Skip elements
16const [, , third] = [1, 2, 3];
17console.log(third); // 3
18
19// Swap variables
20let x = 1, y = 2;
21[x, y] = [y, x];
22console.log(x, y); // 2, 1

Other Useful Methods

other-methods.js
1// flat - flatten nested arrays
2console.log([1, [2, [3, [4]]]].flat(Infinity)); // [1, 2, 3, 4]
3
4// flatMap - map + flatten
5console.log([[1,2],[3,4]].flatMap(x => x)); // [1, 2, 3, 4]
6
7// join - array to string
8console.log(["Hello", "World"].join(" ")); // "Hello World"
9
10// concat - combine arrays (non-mutating)
11console.log([1, 2].concat([3, 4])); // [1, 2, 3, 4]
12
13// slice - extract portion (non-mutating)
14console.log([1,2,3,4,5].slice(1, 3)); // [2, 3]
15
16// reverse - reverses in place
17// toReversed() - non-mutating reverse (ES2023)

Practical Example: Student Grade Report

grade-report.js
1const students = [
2{ name: "Alice", scores: [92, 88, 95, 91] },
3{ name: "Bob", scores: [78, 82, 75, 80] },
4{ name: "Charlie", scores: [95, 98, 92, 97] },
5{ name: "Diana", scores: [65, 70, 72, 68] },
6];
7
8const report = students
9.map(student => ({
10 name: student.name,
11 average: student.scores.reduce((a, b) => a + b, 0) / student.scores.length,
12}))
13.map(s => ({
14 ...s,
15 grade: s.average >= 90 ? "A" : s.average >= 80 ? "B" : s.average >= 70 ? "C" : "D",
16}))
17.sort((a, b) => b.average - a.average);
18
19console.log(report);
20// [
21// { name: "Charlie", average: 95.5, grade: "A" },
22// { name: "Alice", average: 91.5, grade: "A" },
23// { name: "Bob", average: 78.75, grade: "C" },
24// { name: "Diana", average: 68.75, grade: "D" },
25// ]

What's Next?

Now let's explore objects and destructuring - the other fundamental data structure in JavaScript.


PreviousJavaScript Math ObjectNext JavaScript Array Methods

Recommended Gear

JavaScript Math ObjectJavaScript Array Methods