JavaScript Array Methods & Functions

Detailed explanations & code examples are in the JavaScript (.js) file

Click the { } button at the bottom right to view it

Open the browser console (F12) to see all outputs!

Topic 25: forEach() Method

.forEach()

Iterates over array elements and applies a function to each one

Syntax: array.forEach(callback)
Callback receives: element, index, array
Returns: undefined (modifies original array)
Original Array
[1, 2, 3, 4, 5]
-
forEach(cube)
Apply function to each
-
Modified Array
[1, 8, 27, 64, 125]
Example Function What It Does
Example 1 double, triple, square, cube Math operations on numbers
Example 2 upperCase, lowercase, capitalize Text transformations on strings

Console Output:

After cube: 1, 8, 27, 64, 125
After capitalize: Apple, Orange, Banana, Coconut
⚠️ Important: forEach() MODIFIES the original array. If you want to keep the original unchanged, use map() instead.

Topic 26: map() Method

.map()

Creates a NEW array by applying a function to each element

Syntax: const newArray = array.map(callback)
Callback receives: element, index, array
Returns: NEW array (original unchanged)
Original Array
[1, 2, 3, 4, 5]
✓ Unchanged
-
map(square)
Transform each element
-
New Array
[1, 4, 9, 16, 25]
Example Input Transformation Output
Example 1 [1, 2, 3, 4, 5] square / cube [1, 4, 9, 16, 25]
Example 2 ["Umer", "Azmi"] toUpperCase ["UMER", "AZMI"]
Example 3 ["2024-1-10"] Format date ["1/10/2024"]

Console Output:

Cubed: [1, 8, 27, 64, 125]
Lowercase: ["umer", "azmi", "ahmed", "khan"]
Formatted: ["1/10/2024", "2/20/2025", "3/30/2026"]
⚠️ Key difference: forEach modifies original array, map returns new array.

Topic 27: filter() Method

.filter()

Creates a NEW array with only elements satisfiying a condition

Syntax: const newArray = array.filter(callback)
Callback receives: element, index, array
Returns: NEW array with filtered elements
Test: Callback must return true/false
Original Array
[1, 2, 3, 4, 5, 6, 7]
-
filter(isEven)
Keep only if true
-
Filtered Array
[2, 4, 6]
Example Input Filter Condition Output
Example 1 [1,2,3,4,5,6,7] isEven (% 2 === 0) [2, 4, 6]
Example 2 [16,17,18,19,20,65] isAdult (>= 18) [18, 19, 20, 65]
Example 3 ["apple","pomegranate"] Short (<= 6 chars) ["apple"]

Console Output:

Odd numbers: [1, 3, 5, 7]
Children: [16, 17, 17]
Short words: ["apple", "orange", "kiwi", "banana"]

Topic 28: reduce() Method

.reduce()

Reduces an array to a SINGLE value

Syntax: const result = array.reduce(callback)
Callback receives: accumulator, element, index, array
Returns: Single value (sum, max, min, etc.)
Accumulator: Running total / previous result
Array
[5, 30, 10, 25, 15, 20]
-
reduce(sum)
5+30+10+25+15+20
-
Single Value
105
Example Input Array Operation Result
Example 1 [5, 30, 10, 25, 15, 20] sum (add all) 105
Example 2 [75, 50, 90, 80, 65, 95] getMax 95
Example 2 [75, 50, 90, 80, 65, 95] getMin 50

Console Output:

Total: $105.00
Max: 95, Min: 50
How reduce() works step-by-step:
Array: [5, 30, 10]
Step 1: accumulator = 5, element = 30 - return 35
Step 2: accumulator = 35, element = 10 - return 45
Final result: 45

Quick Comparison: forEach vs map vs filter vs reduce

Method Returns Modifies Original? Use Case
forEach() undefined ✓ Yes Perform action on each element
map() New array ✗ No Transform each element
filter() New array ✗ No Select elements that matches a condition
reduce() Single value ✗ No Combine elements into one value

Topic 29: Function Expressions

Defining functions as values stored in variables

Function Declaration vs Function Expression:

Declaration:
function myFunction() { return "Hello"; }

Expression:
const myFunction = function() { return "Hello"; }; 
const squares = numbers.map(function(element){
    return Math.pow(element, 2);
});

setTimeout(function(){
    console.log("function expression: Hello");
}, 3000);
Benefits:

Topic 30: Arrow Functions

Concise syntax for writing function expressions

Syntax: (parameters) => expression
Best for: Simple, one-time use functions (especially callbacks)
Function Expression vs Arrow Function:

Function Expression:
const square = function(x) { return x * x; };

Arrow Function:
const square = (x) => x * x; 
// Multiple lines (need brackets)
const hello = (name, age) => {
    console.log(`Hello ${name}`);
    console.log(`You are ${age} years old`);
};

// Single line (implicit return)
const squares = numbers.map(element => Math.pow(element, 2));
const evenNums = numbers.filter((element) => element % 2 === 0);
const total = numbers.reduce((acc, el) => acc + el);
Parameters Syntax Example
No parameters () => code () => console.log("Hi")
One parameter x => code x => x * 2
Multiple parameters (x, y) => code (x, y) => x + y
One line x => x * 2 Implicit return
Multiple lines x => { return x * 2; } Explicit return needed

Console Outputs:

Hello Umer Azmi
You are 23 years old
Total: 21
Benefits of Arrow Functions:
📄 loading... 
Loading...