JavaScript Arrays — Advanced Topics
(Notes + Tasks)
map() – Transform Each Element
Definition:
Creates a new array by applying a function to each element of the original array.
const nums = [1, 2, 3, 4];
const double = [Link](n => n * 2);
[Link](double); // [2, 4, 6, 8]
Task:
Create an array [10, 20, 30].
Use map() to make a new array where each number is divided by 10.
filter() – Filter Elements
Definition:
Returns a new array with elements that pass a condition (true).
const nums = [5, 10, 15, 20];
const greaterThan10 = [Link](n => n > 10);
[Link](greaterThan10); // [15, 20]
Task:
Given [12, 45, 22, 7, 90], use filter() to get numbers above 20.
reduce() – Combine to One Value
Definition:
Executes a reducer function on each element to reduce array to a single value.
const nums = [1, 2, 3, 4];
const sum = [Link]((total, n) => total + n, 0);
[Link](sum); // 10
Task:
Use reduce() to find the product of numbers [2, 3, 4].
find() – Find First Match
Definition:
Returns the first element that satisfies a condition.
const numbers = [10, 25, 30, 40];
const result = [Link](n => n > 20);
[Link](result); // 25
Task:
From [5, 8, 12, 19, 25], find the first number greater than 15.
includes() – Check for Value
Definition:
Checks if an array contains a specific value. Returns true or false.
const fruits = ["apple", "banana", "mango"];
[Link]([Link]("banana")); // true
Task:
Check if "grape" exists in ["apple", "orange", "banana"].
slice() – Copy Part of Array
Definition:
Extracts a portion of an array without changing the original array.
const nums = [1, 2, 3, 4, 5];
const sliced = [Link](1, 4);
[Link](sliced); // [2, 3, 4]
Task:
From [100, 200, 300, 400, 500], use slice() to get [200, 300, 400].
splice() – Add / Remove Elements
Definition:
Changes the array by adding/removing elements.
const fruits = ["apple", "banana", "cherry"];
[Link](1, 1, "mango"); // removes 1 from index 1, adds "mango"
[Link](fruits); // ["apple", "mango", "cherry"]
Task:
From ["red", "green", "blue"], remove "green" and add "yellow".
sort() – Sort Array
Definition:
Sorts array elements alphabetically or numerically.
const nums = [20, 5, 15];
[Link]((a, b) => a - b);
[Link](nums); // [5, 15, 20]
Task:
Sort [45, 2, 18, 9, 101] in ascending order.
concat() – Merge Arrays
🔹 Definition:
Combines two or more arrays into a new one.
const a = [1, 2];
const b = [3, 4];
const c = [Link](b);
[Link](c); // [1, 2, 3, 4]
Task:
Combine [10, 20] and [30, 40] into one array.
flat() – Flatten Nested Arrays
Definition:
Converts nested arrays into a single array.
const arr = [1, [2, 3], [4, 5]];
[Link]([Link]()); // [1, 2, 3, 4, 5]
Task:
Flatten [[1, 2], [3, 4, 5]] into one single array.
indexOf() – Find Index of Value
const fruits = ["apple", "banana", "cherry"];
[Link]([Link]("banana")); // 1
Task:
Find the index of "blue" in ["red", "blue", "green"].
forEach() – Loop Through Array
const nums = [10, 20, 30];
[Link](n => [Link](n * 2));
Task:
Use forEach() to print each fruit in ["apple", "mango", "pear"].
Mini Challenge Tasks (Mix of All)
1. Create an array [3, 6, 9, 12, 15]. Use filter() + map() to get double of
numbers greater than 6.
2. Use reduce() to find the average of [10, 20, 30, 40, 50].
3. Find if "JavaScript" exists in ["HTML", "CSS", "JS", "Python"] using
includes().
4. Merge two arrays and remove duplicates using Set.
5. Sort [100, 20, 300, 40] in descending order.
6. Use slice() to copy the first 3 fruits from ["apple", "banana", "mango",
"kiwi"].
7. Use splice() to insert "grapes" between "apple" and "mango".
8. Flatten [[10, 20], [30, [40, 50]]] completely using flat(Infinity).
9. Create a function using reduce() to find the longest word in ["car",
"bicycle", "train", "aeroplane"].
10. Use map() to convert names to uppercase: ["john", "mary", "david"].