JavaScript Arrays & Callbacks

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 20: Arrays

Arrays store multiple values in a single variable

Array Basics:
let fruits = ["apple", "orange", "banana"];
Index starts at 0: fruits[0] = "apple"
Method Description Example
.push(element) Adds element to END fruits.push("mango")
.pop() Removes LAST element fruits.pop()
.unshift(element) Adds element to BEGINNING fruits.unshift("mango")
.shift() Removes FIRST element fruits.shift()
.length Returns number of elements fruits.length
.indexOf(element) Returns index of element fruits.indexOf("banana")
.sort() Sorts array alphabetically fruits.sort()
.reverse() Reverses array order fruits.reverse()

Looping Through Arrays:

For loop: for(let i = 0; i < fruits.length; i++)
For...of loop: for(let fruit of fruits) ← Cleaner!

Console Output:

Array: ["apple", "orange", "banana", "coconut"]
Using for...of loop to print each fruit

Topic 21: 2D Arrays (Multi-Dimensional)

2D arrays store data in rows and columns (like a grid or table)

2D Array Structure:
const matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
Access: matrix[row][column]
Example: matrix[0][0] = 1, matrix[1][2] = 6

Visual Representation:

1
2
3
4
5
6
7
8
9

Tic-Tac-Toe Example: Can replace numbers with 'X' and 'O'

Console Output:

Matrix printed row by row using for...of loop
1 2 3
4 5 6
7 8 9
Use Cases:

Topic 22: Spread Operator (...)

The spread operator expands an array or string into separate elements

Syntax: ...arrayName
What it does: Unpacks elements from an array or string
Use Case Code Result
Function Arguments Math.max(...[1,2,3,4,5]) 5
Spread String [..."Umer"] ['U', 'm', 'e', 'r']
Combine Arrays [...arr1, ...arr2] One merged array

Examples in Console:

Console Outputs:

Maximum: 5
Letters: ['U', 'm', 'e', 'r', ' ', 'A', 'z', 'm', 'i']
Foods: ["apple", "orange", "banana", "carrots", "celery", "potatoes", "eggs", "milk"]

Topic 23: Rest Parameters (...)

Rest parameters bundle multiple arguments into an array

Spread vs Rest:
Spread: Expands array into separate elements - ...array
Rest: Bundles separate elements into array - function(...params)

Syntax:

function myFunction(...params){
  // params is now an array of all arguments
}
Example Function Description
Example 1 getFood(...foods) Returns array of all food arguments
Example 2 sum(...numbers) Sums any number of arguments
Example 2 getAverage(...numbers) Calculates average of any numbers
Example 3 combineStrings(...strings) Joins any number of strings

Console Outputs:

Average: 80
Full Name: "Mr. Umer Azmi III"
Benefits:

Topic 24: Callback Functions

A callback is a function passed as an argument to another function

What is a Callback?
A function that gets executed after another function completes
Think: "Hey, when you're done, call this next."

Basic Example:

function hello(callback){
  console.log("Hello!");
  callback(); // Calls the function passed in
}

function goodbye(){
  console.log("Goodbye!");
}

hello(goodbye); // Pass goodbye as argument

Console Output:

Hello!
Goodbye!
When to Use Callbacks:
Real-World Analogy:
Like ordering food at a restaurant:
1. You place your order (start async operation)
2. Kitchen prepares food (operation in progress)
3. Waiter brings food to you (callback executes)

You don't wait at the counter - you go sit down and the waiter calls you back when ready!
📄 loading... 
Loading...