JavaScript · Lesson 14 / 32 · English
JavaScript Arrays
Understand the idea. Change the code. Build confidence with one focused experiment.
Read this lesson in தமிழ் ↗.
Start with the idea
Arrays keep values in an ordered sequence. map transforms each item into a new array; filter selects items; reduce combines them into one result.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
Step-by-step lesson notes
Arrays in JavaScript
Arrays are ordered lists of values. In JavaScript, arrays can hold mixed types and have a rich set of built-in methods.
Creating and Accessing Arrays
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
console.log(fruits.length); // 3
console.log(fruits.at(-1)); // "cherry" (ES2022 — last element)
// Destructuring
const [first, second, ...rest] = fruits;
console.log(first); // "apple"
console.log(rest); // ["cherry"]Mutating Methods (change the original)
const arr = [1, 2, 3];
arr.push(4); // add to end → [1, 2, 3, 4]
arr.pop(); // remove from end → [1, 2, 3]
arr.unshift(0); // add to start → [0, 1, 2, 3]
arr.shift(); // remove from start → [1, 2, 3]
arr.splice(1, 1); // remove 1 element at index 1 → [1, 3]
arr.reverse(); // reverse in place → [3, 1]
arr.sort(); // sort in place (alphabetical by default)Non-Mutating Methods (return new array)
const nums = [1, 2, 3, 4, 5];
// map — transform each element
nums.map(n => n * 2); // [2, 4, 6, 8, 10]
// filter — keep matching elements
nums.filter(n => n > 3); // [4, 5]
// reduce — accumulate to single value
nums.reduce((acc, n) => acc + n, 0); // 15
// find — first matching element
nums.find(n => n > 3); // 4
// findIndex
nums.findIndex(n => n > 3); // 3
// some / every
nums.some(n => n > 4); // true
nums.every(n => n > 0); // true
// flat / flatMap
[1, [2, [3]]].flat(Infinity); // [1, 2, 3]
// slice
nums.slice(1, 3); // [2, 3]
// concat
[1, 2].concat([3, 4]); // [1, 2, 3, 4]
// or with spread: [...arr1, ...arr2]Prefer non-mutating methods in modern JavaScript. They make code easier to reason about and work well with functional programming patterns.
A complete example
Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.
const prices = [100, 200, 300];
const discounted = prices.map(price => price * 0.9);
console.log(discounted.join(", "));
console.log(discounted.reduce((sum, price) => sum + price, 0));Predict first. Reveal the expected result.
90, 180, 270 540
Make one change. See what happens.
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Wait for the editor to load, then load this example and press Run.
Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.
Put the idea to work
Practice challenge
Filter discounted prices to keep only values at least 180.
Reveal the answer and reasoning
discounted.filter(price => price >= 180) gives [180, 270].
One mistake to avoid: Arrays are zero-indexed. map needs a returned value; a braced callback without return produces undefined entries.
Your learning checkpoint
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.