Store Data in Arrays

Learning Objectives

• Understand arrays for storing lists of data
• Learn array methods for manipulation
• Master iteration and array processing
• Update array content dynamically
• Apply arrays to real-world problems

Section 8.1: Introduction to Arrays

What is an Array?

An array is an ordered collection of elements stored in a single variable.

let fruits = ["apple", "banana", "orange"];

console.log(fruits);  // ["apple", "banana", "orange"]

Creating Arrays

// Array literal
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "hello", true, 3.14];
let empty = [];

Accessing Elements

Elements are accessed by index (starting from 0):

let colors = ["red", "green", "blue"];

console.log(colors[0]);  // red
console.log(colors[1]);  // green
console.log(colors[2]);  // blue

Array Length

let items = ["a", "b", "c", "d"];

console.log(items.length);  // 4

Section 8.2: Manipulating Arrays in JavaScript

Adding Elements

let numbers = [1, 2, 3];

numbers.push(4);
numbers.push(5, 6);

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

let numbers = [2, 3];

numbers.unshift(1);
numbers.unshift(-1, 0);

console.log(numbers);  // [-1, 0, 1, 2, 3]

Removing Elements

let numbers = [1, 2, 3, 4, 5];

let removed = numbers.pop();
console.log(removed);  // 5
console.log(numbers);  // [1, 2, 3, 4]

let numbers = [1, 2, 3, 4, 5];

let removed = numbers.shift();
console.log(removed);  // 1
console.log(numbers);  // [2, 3, 4, 5]

Finding Elements

let fruits = ["apple", "banana", "orange"];

console.log(fruits.indexOf("banana"));  // 1
console.log(fruits.indexOf("grape"));   // -1 (not found)

let colors = ["red", "blue", "green"];

console.log(colors.includes("blue"));   // true
console.log(colors.includes("yellow"));  // false

Combining and Slicing

let arr1 = [1, 2];
let arr2 = [3, 4];

let combined = arr1.concat(arr2);
console.log(combined);  // [1, 2, 3, 4]

let numbers = [1, 2, 3, 4, 5];

let portion = numbers.slice(1, 4);
console.log(portion);  // [2, 3, 4]

Section 8.3: Iterating over an Array

Using for Loop

let colors = ["red", "blue", "green"];

for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}

Using forEach() Method

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
    console.log(num);
});

// With arrow function
numbers.forEach(num => console.log(num));

Using for...of Loop

let fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
    console.log(fruit);
}

Array Methods with Functions

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8]

let numbers = [1, 2, 3, 4, 5, 6];

let evens = numbers.filter(num => num % 2 === 0);
console.log(evens);  // [2, 4, 6]

Section 8.4: Updating an Array's Content

Changing Elements

let fruits = ["apple", "banana", "orange"];

fruits[1] = "mango";
console.log(fruits);  // ["apple", "mango", "orange"]

Using splice() - Add, Remove, Replace

let numbers = [1, 2, 3, 4, 5];

// Remove 2 elements starting at index 1
numbers.splice(1, 2);
console.log(numbers);  // [1, 4, 5]

// Insert elements
numbers.splice(1, 0, 2, 3);
console.log(numbers);  // [1, 2, 3, 4, 5]

Sorting Arrays

let fruits = ["banana", "apple", "orange"];

fruits.sort();
console.log(fruits);  // ["apple", "banana", "orange"]

let numbers = [3, 1, 4, 1, 5, 9];

numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 1, 3, 4, 5, 9]

let numbers = [1, 2, 3, 4, 5];

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

Coding Challenges

Challenge 8.1: Musketeers

Task: Create an array of the three musketeers and display each one

Challenge 8.2: Sum of Values

Task: Calculate the sum of all numbers in an array

Challenge 8.3: Array Maximum

Task: Find the largest number in an array

Challenge 8.4: Array Second Minimum

Task: Find the second smallest number in an array

Challenge 8.5: List of Words

Task: Create an array of words and perform operations:

• Display all words
• Count total words
• Find longest word

Key Takeaways

✅ Arrays store multiple values in one variable
✅ Access elements by index (0-based)
✅ push() and pop() add/remove from end
✅ shift() and unshift() add/remove from beginning
✅ Use forEach() or for...of to iterate
✅ map() and filter() transform array data
✅ sort(), reverse(), slice() manipulate arrays

Quiz Questions

• What is the first index in an array?
• How does push() differ from unshift()?
• What does splice() do?
• How do you find the maximum value in an array?
• What is the difference between map() and filter()?

Next Module: Module 9 - Work with Strings