Arrays in JavaScript - Your First Data Structure 📦

A Story to Start With...

Imagine you're organizing a birthday party and you need to keep track of your friends who are coming. You write their names on a piece of paper:

1. Sarah
2. Mike
3. Emma
4. Alex
5. Lisa

Congratulations! You just created an array! 🎉

An array is simply a list of things, where each thing has a number (called an index) that tells you its position.

What is an Array? (The Super Simple Version)

Think of an array like a train with numbered cars:

const friendsTrain = ["Sarah", "Mike", "Emma", "Alex", "Lisa"];
//                     Car 0   Car 1   Car 2   Car 3   Car 4

Car 0 (first car) has Sarah
Car 1 (second car) has Mike
Car 2 (third car) has Emma
And so on...

Wait, why does it start at 0? Great question! In programming, we start counting from 0, not 1. It's like saying "this is the FIRST car" instead of "this is car number ONE."

Creating Arrays (Different Ways!)

Way 1: The Simple Way

// Just list your items in square brackets!
const fruits = ["apple", "banana", "orange"];
const numbers = [1, 2, 3, 4, 5];
const mixed = ["hello", 42, true, "world"]; // You can mix types!

Way 2: The Empty Array

// Start with an empty array and add things later
const myList = [];
console.log(myList); // []

Way 3: The Array Constructor (Fancy!)

// Using the Array constructor
const colors = new Array("red", "blue", "green");
// Same as: ["red", "blue", "green"]

Accessing Array Items (Getting Stuff Out!)

Remember our train? Each car has a number!

const snacks = ["chips", "cookies", "candy", "popcorn", "pretzels"];
//              0        1          2        3          4

// Get the first snack (car 0)
console.log(snacks[0]); // "chips"

// Get the third snack (car 2)
console.log(snacks[2]); // "candy"

// Get the last snack (car 4)
console.log(snacks[4]); // "pretzels"

// Or use a trick to get the last one!
console.log(snacks[snacks.length - 1]); // "pretzels"

The "Length" Property - How Many Items?

const toys = ["car", "doll", "ball", "blocks"];

console.log(toys.length); // 4 (we have 4 toys!)

// This is super useful!
console.log(`I have ${toys.length} toys!`);
// Output: "I have 4 toys!"

Adding Items to Arrays (Making Your List Bigger!)

Method 1: push() - Add to the End

const groceries = ["milk", "eggs", "bread"];
console.log(groceries); // ["milk", "eggs", "bread"]

// Add "butter" to the end
groceries.push("butter");
console.log(groceries); // ["milk", "eggs", "bread", "butter"]

// Add multiple items at once!
groceries.push("cheese", "yogurt");
console.log(groceries);
// ["milk", "eggs", "bread", "butter", "cheese", "yogurt"]

Real-life example: Adding items to your shopping cart! 🛒

Method 2: unshift() - Add to the Beginning

const queue = ["Mike", "Emma", "Alex"];
console.log(queue); // ["Mike", "Emma", "Alex"]

// Sarah cuts in line at the front!
queue.unshift("Sarah");
console.log(queue); // ["Sarah", "Mike", "Emma", "Alex"]

Real-life example: Someone cutting in line (not nice! 😅)

Method 3: Direct Assignment - Add at Specific Position

const letters = ["A", "B", "C"];

// Add "D" at position 3
letters[3] = "D";
console.log(letters); // ["A", "B", "C", "D"]

// You can even skip positions (but it creates empty spots!)
letters[5] = "F";
console.log(letters); // ["A", "B", "C", "D", empty, "F"]

Removing Items from Arrays (Making Your List Smaller!)

Method 1: pop() - Remove from the End

const stack = ["plate1", "plate2", "plate3"];
console.log(stack); // ["plate1", "plate2", "plate3"]

// Take the top plate
const topPlate = stack.pop();
console.log(topPlate); // "plate3"
console.log(stack); // ["plate1", "plate2"]

Real-life example: Taking the top plate from a stack! 🍽️

Method 2: shift() - Remove from the Beginning

const line = ["first", "second", "third"];
console.log(line); // ["first", "second", "third"]

// First person gets served and leaves
const served = line.shift();
console.log(served); // "first"
console.log(line); // ["second", "third"]

Real-life example: First person in line gets served! 🎫

Method 3: splice() - Remove from Anywhere!

const students = ["Alice", "Bob", "Charlie", "David", "Eve"];
console.log(students);
// ["Alice", "Bob", "Charlie", "David", "Eve"]

// Remove "Charlie" (at position 2)
// splice(startIndex, howManyToRemove)
students.splice(2, 1);
console.log(students);
// ["Alice", "Bob", "David", "Eve"]

// Remove 2 students starting from position 1
students.splice(1, 2);
console.log(students);
// ["Alice", "Eve"]

The Super Useful Array Methods! 🎯

1. map() - Transform Each Item

Story: You have a list of prices in dollars, but you want them in cents!

const pricesInDollars = [1, 2, 3, 4, 5];

// Multiply each price by 100
const pricesInCents = pricesInDollars.map((price) => price * 100);

console.log(pricesInDollars); // [1, 2, 3, 4, 5]
console.log(pricesInCents); // [100, 200, 300, 400, 500]

Another example: Make all names uppercase!

const names = ["alice", "bob", "charlie"];

const upperNames = names.map((name) => name.toUpperCase());

console.log(upperNames); // ["ALICE", "BOB", "CHARLIE"]

2. filter() - Keep Only Some Items

Story: You have a list of numbers, but you only want the even ones!

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Keep only even numbers
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

Another example: Find all long words!

const words = ["cat", "elephant", "dog", "hippopotamus", "ant"];

// Keep only words longer than 5 letters
const longWords = words.filter((word) => word.length > 5);

console.log(longWords); // ["elephant", "hippopotamus"]

3. find() - Find the First Match

Story: Find the first person who is 18 or older!

const people = [
  { name: "Tommy", age: 12 },
  { name: "Sarah", age: 18 },
  { name: "Mike", age: 25 },
  { name: "Emma", age: 16 },
];

const adult = people.find((person) => person.age >= 18);

console.log(adult); // { name: "Sarah", age: 18 }

4. reduce() - Combine Everything into One Value

Story: Add up all your savings!

const savings = [10, 20, 30, 40, 50];

// Add them all together
const total = savings.reduce((sum, amount) => sum + amount, 0);

console.log(total); // 150

// Let's see it step by step:
// Step 1: sum = 0,  amount = 10  → sum = 0 + 10 = 10
// Step 2: sum = 10, amount = 20  → sum = 10 + 20 = 30
// Step 3: sum = 30, amount = 30  → sum = 30 + 30 = 60
// Step 4: sum = 60, amount = 40  → sum = 60 + 40 = 100
// Step 5: sum = 100, amount = 50 → sum = 100 + 50 = 150

5. forEach() - Do Something with Each Item

Story: Say hello to each friend!

const friends = ["Sarah", "Mike", "Emma"];

friends.forEach((friend) => {
  console.log(`Hello, ${friend}!`);
});

// Output:
// Hello, Sarah!
// Hello, Mike!
// Hello, Emma!

6. includes() - Check if Something Exists

Story: Is "apple" in my fruit basket?

const fruits = ["banana", "orange", "grape", "apple"];

console.log(fruits.includes("apple")); // true
console.log(fruits.includes("mango")); // false

7. indexOf() - Find the Position

Story: Where is "Emma" in the line?

const line = ["Sarah", "Mike", "Emma", "Alex"];

console.log(line.indexOf("Emma")); // 2 (position 2)
console.log(line.indexOf("Lisa")); // -1 (not found)

8. slice() - Get a Piece of the Array

Story: Get the first 3 items!

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Get items from position 0 to 3 (not including 3)
const firstThree = numbers.slice(0, 3);

console.log(firstThree); // [1, 2, 3]
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] (original unchanged!)

9. concat() - Join Arrays Together

Story: Combine two friend lists!

const schoolFriends = ["Alice", "Bob"];
const clubFriends = ["Charlie", "David"];

const allFriends = schoolFriends.concat(clubFriends);

console.log(allFriends); // ["Alice", "Bob", "Charlie", "David"]

// Modern way using spread operator:
const allFriends2 = [...schoolFriends, ...clubFriends];
console.log(allFriends2); // ["Alice", "Bob", "Charlie", "David"]

10. reverse() - Flip the Array

Story: Read a word backwards!

const letters = ["H", "E", "L", "L", "O"];

letters.reverse();

console.log(letters); // ["O", "L", "L", "E", "H"]

Time Complexity - How Fast Are These Operations?

Let's understand how long each operation takes!

Super Fast Operations - O(1) ⚡

These are instant, no matter how big your array is!

const bigArray = [1, 2, 3, ..., 1000000];  // 1 million items!

// All of these are instant:
bigArray[0];           // Get first item
bigArray[999999];      // Get last item
bigArray.length;       // Get length
bigArray.push(5);      // Add to end
bigArray.pop();        // Remove from end

Why? Because the computer knows exactly where to look!

Slow Operations - O(n) 🐌

These take longer with bigger arrays!

const bigArray = [1, 2, 3, ..., 1000000];

// These check every item:
bigArray.includes(999999);     // Might check all items
bigArray.indexOf(999999);      // Might check all items
bigArray.find(x => x === 999999);  // Might check all items

// These also touch every item:
bigArray.map(x => x * 2);      // Processes each item
bigArray.filter(x => x > 500000);  // Checks each item

Why? Because the computer has to look at each item one by one!

Very Slow Operations - O(n²) 🐢

Avoid these when possible!

// Nested loops - very slow!
function findDuplicates(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        console.log("Duplicate:", arr[i]);
      }
    }
  }
}

Common Array Patterns (Interview Favorites!)

Pattern 1: Two Pointers

Problem: Find two numbers that add up to a target!

function findPairWithSum(arr, target) {
  // Sort the array first
  arr.sort((a, b) => a - b);

  let left = 0;
  let right = arr.length - 1;

  while (left < right) {
    const sum = arr[left] + arr[right];

    if (sum === target) {
      return [arr[left], arr[right]];
    } else if (sum < target) {
      left++; // Need bigger sum
    } else {
      right--; // Need smaller sum
    }
  }

  return null; // No pair found
}

const numbers = [2, 7, 11, 15];
console.log(findPairWithSum(numbers, 9)); // [2, 7]

Pattern 2: Sliding Window

Problem: Find the maximum sum of 3 consecutive numbers!

function maxSumOfThree(arr) {
  if (arr.length < 3) return null;

  // Calculate sum of first 3 numbers
  let maxSum = arr[0] + arr[1] + arr[2];
  let currentSum = maxSum;

  // Slide the window
  for (let i = 3; i < arr.length; i++) {
    currentSum = currentSum - arr[i - 3] + arr[i];
    maxSum = Math.max(maxSum, currentSum);
  }

  return maxSum;
}

const numbers = [1, 4, 2, 10, 23, 3, 1, 0, 20];
console.log(maxSumOfThree(numbers)); // 39 (10 + 23 + 3)

Pattern 3: Frequency Counter

Problem: Count how many times each item appears!

function countFrequency(arr) {
  const frequency = {};

  for (let item of arr) {
    frequency[item] = (frequency[item] || 0) + 1;
  }

  return frequency;
}

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
console.log(countFrequency(fruits));
// { apple: 3, banana: 2, orange: 1 }

Practice Challenges! 🎮

Challenge 1: Remove Duplicates

Remove all duplicate numbers from an array!

function removeDuplicates(arr) {
  // Your code here!
  // Hint: Use a Set or filter!
}

const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(removeDuplicates(numbers)); // [1, 2, 3, 4, 5]

Click to see the answer!

// Solution 1: Using Set (easiest!)
function removeDuplicates(arr) {
  return [...new Set(arr)];
}

// Solution 2: Using filter
function removeDuplicates(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

// Solution 3: Manual way
function removeDuplicates(arr) {
  const result = [];
  for (let item of arr) {
    if (!result.includes(item)) {
      result.push(item);
    }
  }
  return result;
}

Challenge 2: Find the Second Largest Number

Find the second largest number in an array!

function secondLargest(arr) {
  // Your code here!
  // Hint: Sort or use two variables!
}

const numbers = [5, 12, 3, 18, 7];
console.log(secondLargest(numbers)); // 12

Click to see the answer!

// Solution 1: Using sort (easy but not efficient)
function secondLargest(arr) {
  const sorted = [...arr].sort((a, b) => b - a);
  return sorted[1];
}

// Solution 2: One pass (efficient!)
function secondLargest(arr) {
  let largest = -Infinity;
  let secondLargest = -Infinity;

  for (let num of arr) {
    if (num > largest) {
      secondLargest = largest;
      largest = num;
    } else if (num > secondLargest && num < largest) {
      secondLargest = num;
    }
  }

  return secondLargest;
}

Challenge 3: Rotate Array

Rotate an array to the right by k steps!

function rotateArray(arr, k) {
  // Your code here!
  // Hint: Use slice and concat!
}

const numbers = [1, 2, 3, 4, 5];
console.log(rotateArray(numbers, 2)); // [4, 5, 1, 2, 3]

Click to see the answer!

// Solution 1: Using slice
function rotateArray(arr, k) {
  k = k % arr.length; // Handle k larger than array length
  return [...arr.slice(-k), ...arr.slice(0, -k)];
}

// Solution 2: Using splice
function rotateArray(arr, k) {
  k = k % arr.length;
  const rotated = [...arr];
  const removed = rotated.splice(-k);
  return [...removed, ...rotated];
}

Challenge 4: Merge Two Sorted Arrays

Merge two sorted arrays into one sorted array!

function mergeSorted(arr1, arr2) {
  // Your code here!
  // Hint: Use two pointers!
}

const arr1 = [1, 3, 5, 7];
const arr2 = [2, 4, 6, 8];
console.log(mergeSorted(arr1, arr2)); // [1, 2, 3, 4, 5, 6, 7, 8]

Click to see the answer!

// Solution 1: Concat and sort (easy but not efficient)
function mergeSorted(arr1, arr2) {
  return [...arr1, ...arr2].sort((a, b) => a - b);
}

// Solution 2: Two pointers (efficient!)
function mergeSorted(arr1, arr2) {
  const result = [];
  let i = 0,
    j = 0;

  while (i < arr1.length && j < arr2.length) {
    if (arr1[i] < arr2[j]) {
      result.push(arr1[i]);
      i++;
    } else {
      result.push(arr2[j]);
      j++;
    }
  }

  // Add remaining elements
  while (i < arr1.length) {
    result.push(arr1[i]);
    i++;
  }

  while (j < arr2.length) {
    result.push(arr2[j]);
    j++;
  }

  return result;
}

Common Mistakes to Avoid! ⚠️

Mistake 1: Modifying While Looping

// ❌ Wrong - modifying array while looping
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  numbers.pop(); // This causes problems!
}

// ✅ Right - create a new array
const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter((num) => num > 3);

Mistake 2: Forgetting Arrays Start at 0

// ❌ Wrong
const fruits = ["apple", "banana", "orange"];
console.log(fruits[1]); // This is "banana", not "apple"!

// ✅ Right
console.log(fruits[0]); // "apple" - first item

Mistake 3: Mutating Original Array

// ❌ Wrong - sort mutates the original!
const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort();
console.log(numbers); // [1, 1, 3, 4, 5] - original changed!

// ✅ Right - make a copy first
const numbers = [3, 1, 4, 1, 5];
const sorted = [...numbers].sort();
console.log(numbers); // [3, 1, 4, 1, 5] - original unchanged!

Key Takeaways! 🎯

Arrays are ordered lists - Each item has a position (index)
Indexes start at 0 - First item is at position 0
Arrays are flexible - Can grow and shrink dynamically
Many built-in methods - map, filter, reduce, etc.
Know your time complexity - Some operations are faster than others
Practice makes perfect - Try the challenges above!

What's Next?

In the next episode, we'll learn about Strings - how to manipulate text in JavaScript!

We'll cover:

String methods and manipulation
Pattern matching and searching
Common string problems
Interview questions with strings

Quick Reference Card 📋

// Creating
const arr = [1, 2, 3];

// Accessing
arr[0]; // First item
arr[arr.length - 1]; // Last item

// Adding
arr.push(4); // Add to end
arr.unshift(0); // Add to start

// Removing
arr.pop(); // Remove from end
arr.shift(); // Remove from start

// Searching
arr.includes(2); // Check if exists
arr.indexOf(2); // Find position
arr.find((x) => x > 2); // Find first match

// Transforming
arr.map((x) => x * 2); // Transform each
arr.filter((x) => x > 2); // Keep some
arr.reduce((a, b) => a + b); // Combine all

// Other
arr.length; // How many items
arr.slice(0, 2); // Get a piece
arr.reverse(); // Flip it

This is Episode 2 of the "Mastering DSA with JavaScript" series.

Previous Episode: Introduction to DSA →

Next Episode: Strings in JavaScript - Text Manipulation Magic →

Questions? Drop a comment below! 💬

Arrays in JavaScript - Your First Data Structure (Explained Simply!) 📦

Mastering DSA with JavaScript

Episodes

Continue Reading

What is DSA? Your First Step into the World of Smart Programming 🚀

Strings in JavaScript - Master Text Manipulation Like a Pro! 📝

Objects & Hash Maps in JavaScript - The Power of Key-Value Pairs! 🗂️