Arrays

What you'll learn

• How to create and declare arrays in JavaScript
• Adding and removing elements with push() and pop()
• Accessing and replacing array elements using index
• Iterating through arrays with forEach()
• Using conditional logic with array methods
• Working with index parameters in forEach()

In this activity, you will learn how to create and manipulate arrays in JavaScript. You'll practice declaring arrays, adding and removing elements, accessing array elements by index, and using array methods like push(), pop(), and forEach().

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

• In each exercise below, click the Stackblitz link and and familiarize yourself with the interface.

Part One: Basic Array Operations

⏱️ Estimated time: 30 minutes

:computer: Exercise One: Create and Display Arrays

⏱️ Time: 5 minutes

1. Open StackBlitz and access the template: Exercise 1
2. Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

What To Do Create an array that has elements of animals in the zoo

Steps:

1. Declare an array variable called animals and give the array 5 animals as its elements
2. Log the array into the console

tip Use syntax like: var animals = ["gorilla", "parrot", "elephant", "giraffe", "tiger"];

:information_source: Info Remember to open the browser console (F12) to see your output!

If you have done it correctly, it should look like this in browser console (F12) output:

Assuming the animals are gorilla, parrot, elephant, giraffe, tiger.

:computer: Exercise 2: Push and Pop Methods

⏱️ Time: 5 minutes

1. Open StackBlitz and access the template: Exercise 2
2. Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

What To Do Add and remove elements using the push and pop methods

Steps:

1. Declare an array variable called x with these elements: 100, 200, 300
2. Log array x to the console
3. Push the number 400 to array x and log the array to the console
4. Pop array x and log the array to the console

tip

• Use x.push(400) to add an element to the end
• Use x.pop() to remove the last element

If you have done it correctly, it should look like this in browser console (F12) output:

:warning: Warning You need to refresh the preview page to see the array results!

:computer: Exercise 3: Array Index Replacement System

⏱️ Time: 10 minutes

1. Open StackBlitz and access the template: Exercise 3
2. Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

What To Do Create an interactive seating chart where you can replace students in specific seats

Steps:

1. Declare an array variable called seats with 6 student names (e.g., John, Benjamin, Hasan, Lisa, Tommy, Kumar)
2. Declare a variable called replaceIndex
3. Declare a variable called newStudent
4. Create a function called replace:
   • Assign a value to replaceIndex using prompt: "Which seat do you want to replace?"
   • Assign a value to newStudent using prompt: "Who is replacing this seat?"
   • Re-assign the seats at the index of replaceIndex with newStudent
   • Log the array seats to the console
5. In the index.html, create a button called REPLACE with an onclick event that calls the replace function

tip

• Use seats[replaceIndex] = newStudent to replace an array element at a specific index
• Remember that array indexes start at 0, so seat 1 is at index 0!

:information_source: Info Learn more about onclick events: https://www.w3schools.com/jsref/event_onclick.asp

If you have done it correctly, it should look like this:

When you click on the REPLACE button:

Assuming the seat is index 2 and the name is Winnie.

Browser console (f12) output:

Part 2: Array Methods and Loops

⏱️ Estimated time: 30 minutes

:computer: Exercise 4: forEach Method with Simple Logging

⏱️ Time: 5 minutes

1. Open StackBlitz and access the template: Exercise 4
2. Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

What To Do Create an array of dairy products and log each one separately

Steps:

1. Create an array variable called dairy with these elements: ["milk", "cheese", "yoghurt", "butter"]
2. Log each element in the console using the forEach() method

tip Use the forEach method like this:

dairy.forEach(function(item) {
    console.log(item);
});

If you have done it correctly, it should look like this in browser console (F12) output:

:computer: Exercise 5: forEach with Conditional Logic - Charity System

⏱️ Time: 10 minutes

1. Open StackBlitz and access the template: Exercise 5
2. Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

What To Do Create a charity funding system that allocates extra funds to homes that need it most

Steps:

1. Create an array with charity home funding amounts: var homes = [132000, 88000, 275000, 43000];
2. For each home element:
   • If the funding is less than 90000, add 50000 and log the new amount
   • Otherwise, just log the current amount

tip Use forEach with conditional logic:

homes.forEach(function(home) {
    if (home < 90000) {
        console.log(home + 50000);
    } else {
        console.log(home);
    }
});

:information_source: Info This simulates a real-world scenario where organizations with less funding receive additional support!

If you have done it correctly, it should look like this in browser console (F12) output:

:computer: Exercise 6: forEach with Index - Rollercoaster Age Check

⏱️ Time: 10 minutes

1. Open StackBlitz and access the template: Exercise 6
2. Alternative: Download the source code template from Stackblitz Download Project button if you want to use your IDE.

What To Do Create a queue system that checks if people meet the age requirement for a rollercoaster ride

Steps:

1. Create a queue array with 5 ages (varying from 6 to 100)
2. Log the entire queue array to the console
3. For each age:
   • If 12 or older, replace with true (can ride)
   • If younger than 12, replace with false (cannot ride)
4. Log the updated queue array to the console

tip The forEach method can accept an index parameter:

queue.forEach(function(age, index) {
    if (age >= 12) {
        queue[index] = true;
    } else {
        queue[index] = false;
    }
});

:information_source: Info Learn more about forEach parameters: https://www.w3schools.com/jsref/jsref_foreach.asp

If you have done it correctly, it should look like this in browser console (F12) output:

Assuming the age of each person in the queue array is 12, 8, 25, 11 and 38.

Required Elements

Make sure your Array projects include:

• Part 1 - Exercise 1: Array declaration with 5 animal elements and console logging
• Part 1 - Exercise 2: Use of push() and pop() methods with proper console logging
• Part 1 - Exercise 3: Interactive array element replacement using index and button clicks
• Part 2 - Exercise 4: forEach() method to iterate and log each array element
• Part 2 - Exercise 5: forEach() with conditional logic for charity fund allocation
• Part 2 - Exercise 6: forEach() with index parameter for age verification system
• All arrays should use proper syntax with square brackets
• Use of array methods: push(), pop(), forEach()
• Array element access using index notation (array[index])

Project Submission

:warning: Important Test all your array operations and check console outputs before submitting!

When you have completed all 6 exercises in your "Arrays" project:

:information_source: Info Submit Your Work Submit Your Projects Here

Make sure all array functionality is working properly before submission.

Troubleshooting

Common Issues:

1. Nothing appears in the console

   • Make sure you're checking the browser console (F12), not the StackBlitz console
   • Remember to refresh the preview page after making changes

2. Array index errors

   • Remember that arrays start at index 0, not 1
   • Check that you're not trying to access an index that doesn't exist

3. forEach not working

   • Make sure you're using the correct syntax with function()
   • Don't forget the curly braces for the function body

4. Button onclick not working

   • Check that you've added the onclick attribute in the HTML file
   • Make sure your function name matches exactly (case-sensitive)