Academy — Sanjib Sikder

One Variable, Many Values

Every variable you have created so far holds exactly one value. But real programs deal with collections: a list of students, a series of temperatures, a set of prices.

You could create separate variables:

const student1 = "Rahul";
const student2 = "Priya";
const student3 = "Arjun";

But what happens when you have 300 students? Or when the number changes at runtime? You need a container that holds many values under one name, in order. That is an array.

Creating Arrays

JavaScript

Ctrl+Enter to run

const primes = [2, 3, 5, 7, 11, 13];
const names  = ["Sanjib", "Rahul", "Priya"];
const mixed  = [42, "hello", true, null];   // any types, even mixed
const empty  = [];

console.log(primes);
console.log(names);
console.log(mixed);
console.log("Length:", primes.length);

An array is written with square brackets [], values separated by commas. It can hold any types — numbers, strings, booleans, even other arrays. The .length property tells you how many elements it contains.

Accessing Elements

Arrays are zero-indexed — the first element is at position 0.

JavaScript

Ctrl+Enter to run

const planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter"];

console.log(planets[0]); // first
console.log(planets[2]); // third
console.log(planets[4]); // fifth — last

// Access from the end
console.log(planets[planets.length - 1]); // last element
console.log(planets.at(-1)); // same, cleaner

planets.at(-1) is modern JavaScript — negative indices count from the end. -1 is the last, -2 is second to last, and so on.

Modifying Arrays

Arrays are mutable — unlike strings, their contents can be changed directly.

JavaScript

Ctrl+Enter to run

const scores = [85, 92, 78];
console.log("Before:", scores);

scores[1] = 95; // change element at index 1
scores.push(88); // add to the end
scores.unshift(70); // add to the beginning

console.log("After:", scores);
console.log("Length:", scores.length);

const last = scores.pop(); // remove from the end
const first = scores.shift(); // remove from the beginning

console.log("Removed last:", last);
console.log("Removed first:", first);
console.log("Final:", scores);

The four mutation methods you will use constantly:

push(value) — add to end
pop() — remove from end, returns removed value
unshift(value) — add to beginning
shift() — remove from beginning, returns removed value

Slicing and Splicing

JavaScript

Ctrl+Enter to run

const letters = ["a", "b", "c", "d", "e", "f"];

// slice: extract a portion WITHOUT modifying the original
const middle = letters.slice(2, 5); // index 2 up to (not including) 5
console.log("Slice:", middle);
console.log("Original unchanged:", letters);

// splice: remove/insert elements, MODIFIES the original
const removed = letters.splice(1, 2); // at index 1, remove 2 elements
console.log("Removed:", removed);
console.log("After splice:", letters);

slice is non-destructive — it returns a new array, the original is untouched. splice is destructive — it modifies the array in place. Know which one you need before you reach for it.

Searching

JavaScript

Ctrl+Enter to run

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

console.log(fruits.indexOf("apple")); // 1 — first occurrence
console.log(fruits.lastIndexOf("apple")); // 3 — last occurrence
console.log(fruits.indexOf("grape")); // -1 — not found

console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false

// find: returns the first element that satisfies a condition
const numbers = [4, 9, 16, 25, 36];
const firstOver20 = numbers.find(n => n > 20);
console.log("First over 20:", firstOver20); // 25

// findIndex: same but returns the index
const idx = numbers.findIndex(n => n > 20);
console.log("Its index:", idx); // 3

The Big Three: map, filter, reduce

These three methods are the most powerful tools arrays give you. Together they can replace almost every loop you would otherwise write. They each take a function as an argument — which is why Lesson 5 had to come first.

map — Transform Every Element

map creates a new array by applying a function to every element of the original.

JavaScript

Ctrl+Enter to run

const marks = [65, 82, 91, 74, 88];

// Add 5 bonus marks to everyone
const boosted = marks.map(m => m + 5);
console.log("Original:", marks);
console.log("Boosted: ", boosted);

// Convert to grade letters
const grades = marks.map(m => {
if (m >= 90) return "A";
if (m >= 75) return "B";
if (m >= 60) return "C";
return "D";
});
console.log("Grades: ", grades);

The original array is never modified. map always returns a brand new array of the same length.

filter — Keep Only What Passes

filter creates a new array containing only the elements for which the function returns true.

JavaScript

Ctrl+Enter to run

const temperatures = [36.6, 38.2, 37.1, 39.5, 36.9, 38.8, 37.4];

const normal = temperatures.filter(t => t < 37.5);
const fever = temperatures.filter(t => t >= 38.0);

console.log("Normal:", normal);
console.log("Fever: ", fever);

// Combining map and filter
const students = [
{ name: "Rahul", marks: 82 },
{ name: "Priya", marks: 91 },
{ name: "Arjun", marks: 54 },
{ name: "Sneha", marks: 78 },
{ name: "Vikram", marks: 38 },
];

const passed = students
.filter(s => s.marks >= 60)
.map(s => `${s.name}: ${s.marks}`);

console.log("Passed:", passed);

Notice how filter and map are chained — the result of filter is an array, so you call .map() on it directly. This style — chaining array methods — is elegant, readable, and very common in modern JavaScript.

reduce — Collapse to a Single Value

reduce is the most powerful and the most misunderstood. It processes every element and accumulates a single result — a sum, a product, an object, another array, anything.

JavaScript

Ctrl+Enter to run

const prices = [120, 450, 89, 310, 75];

// Sum all prices
const total = prices.reduce((accumulator, price) => {
return accumulator + price;
}, 0); // 0 is the starting value of the accumulator

console.log("Total:", total);

// Find the maximum
const max = prices.reduce((highest, price) => {
return price > highest ? price : highest;
}, prices[0]);

console.log("Max:", max);

The function passed to reduce takes two arguments:

accumulator — the running result so far
current — the current element being processed

The second argument to reduce itself (after the comma) is the initial value of the accumulator.

Read the sum version as: "Start with 0. For each price, add it to the running total. Return the final total."

Sorting

JavaScript

Ctrl+Enter to run

const names = ["Priya", "Arjun", "Sanjib", "Rahul"];
names.sort();
console.log("Sorted names:", names);  // alphabetical

const nums = [10, 1, 21, 2, 100, 15];
nums.sort();
console.log("Wrong sort:", nums); // sorts as strings — BUG!

// Correct numeric sort: provide a comparator function
nums.sort((a, b) => a - b);
console.log("Correct sort:", nums);

// Descending
nums.sort((a, b) => b - a);
console.log("Descending:", nums);

This is a famous JavaScript trap. By default, .sort() converts elements to strings and sorts lexicographically — so [10, 1, 21] becomes [1, 10, 21]... except 100 sorts before 21 because "1" < "2". Always pass a comparator function when sorting numbers.

The comparator rule: if (a, b) => a - b returns negative, a comes first. If positive, b comes first. If zero, order doesn't matter.

Flattening and Spreading

JavaScript

Ctrl+Enter to run

// flat: collapse nested arrays
const nested = [1, 2, [3, 4], [5, [6, 7]]];
console.log(nested.flat());    // one level deep
console.log(nested.flat(2));   // two levels deep

// spread: copy or combine arrays
const a = [1, 2, 3];
const b = [4, 5, 6];
const combined = [...a, ...b];
console.log(combined);

// Copy an array (not a reference)
const copy = [...a];
copy.push(99);
console.log("Original:", a); // unchanged
console.log("Copy:", copy);

The spread operator ... is one of the most useful tools in modern JavaScript. It unpacks an array's elements. When you write [...a, ...b], you are creating a new array containing all elements of a followed by all elements of b.

Copying with [...a] is important: writing const copy = a does not copy the array — it creates a second label pointing to the same array. Changes through copy would affect a. The spread copy creates a genuinely separate array.

A Complete Pipeline

JavaScript

Ctrl+Enter to run

const students = [
  { name: "Rahul",  subject: "Physics",   marks: 82 },
  { name: "Priya",  subject: "Chemistry", marks: 91 },
  { name: "Arjun",  subject: "Physics",   marks: 54 },
  { name: "Sneha",  subject: "Chemistry", marks: 78 },
  { name: "Vikram", subject: "Physics",   marks: 95 },
  { name: "Anita",  subject: "Chemistry", marks: 43 },
];

// Physics students who passed, sorted by marks descending, formatted
const result = students
.filter(s => s.subject === "Physics" && s.marks >= 60)
.sort((a, b) => b.marks - a.marks)
.map(s => `${s.name}: ${s.marks}`);

console.log("Physics — Passed (ranked):");
result.forEach(r => console.log(" ", r));

// Average marks per subject
const subjects = ["Physics", "Chemistry"];
subjects.forEach(sub => {
const subStudents = students.filter(s => s.subject === sub);
const avg = subStudents.reduce((sum, s) => sum + s.marks, 0) / subStudents.length;
console.log(`${sub} average: ${avg.toFixed(1)}`);
});

This is a data pipeline — the kind of code you write every day in real applications. Filter, sort, transform, aggregate. No loops visible, just a clean chain of intentions.

What You Have Learned

Arrays are the most-used data structure in JavaScript. The tools:

Create with [], access with [index], length with .length
Mutate with push, pop, shift, unshift, splice
Extract with slice (non-destructive)
Search with indexOf, includes, find, findIndex
map — transform every element → new array same length
filter — keep elements that pass a test → new array shorter or equal
reduce — collapse all elements → single value of any type
Sort with a comparator function for numbers — never rely on default sort
Copy safely with the spread operator [...array]

In the next lesson: Objects — how to group related values under named properties, and how objects and arrays work together to represent any real-world data structure.