Lesson 6: Lists, Arrays, and Loops

What You'll Learn Today

Today we're learning how to handle lists of data, a core skill for any web developer. We'll use JavaScript Arrays to store our lists and Loops to process them, allowing us to create dynamic content from collections of data.

Why are Arrays & Loops Important?

Almost every website or app uses lists: a list of videos on YouTube, a shopping cart, a feed of social media posts. Arrays and loops are the fundamental tools in JavaScript for working with this kind of data efficiently.

Learning Objectives

Create and manipulate arrays to hold lists of items like strings or numbers.
Use `for` loops to repeat actions for every item in an array without writing the same code over and over.
Generate HTML content dynamically from an array, turning data into visible elements on the page.

Core Concepts

Let's break down the tools we'll be using to wrangle our lists of data.

let data = [ ... ] Array Creation

An array is a special variable that can hold more than one value. You create one using square brackets [], with each item separated by a comma.

for (let i=0; i < arr.length; i++) The 'for' Loop

A for loop has three parts: 1. Initialization (let i = 0): A counter variable. 2. Condition (i < arr.length): The loop runs as long as this is true. 3. Increment (i++): Increase the counter after each cycle.

array[i] Array Access

You can get an item from an array using its index (position). Since our loop counter `i` goes from 0 up to the array length, we can use `array[i]` to get each item one by one.

html += "..." String Concatenation

This is a shortcut for `html = html + "..."`. We use it inside our loop to build up a long string of HTML, adding one `<li>` element for each item in the array.

Your Mission: Code Array Loops

In the editor, you'll find an empty `generateLists()` function with step-by-step hints. Your job is to fill in the missing code to make two dynamic lists appear when you click the "Generate Lists" button!

Pro Tip

Follow the pattern: 1. Create empty HTML string. 2. Loop through array. 3. Add HTML for each item. 4. Display on page. Copy the same pattern for both lists!

Step 1: Initialize movie HTML
Write: let movieHtml = '';
This creates an empty string to build our HTML.
Step 2: Create the for loop
Write: for(let i = 0; i < movies.length; i++) {
This loops through each item in the movies array.
Step 3: Add HTML in the loop
Write: movieHtml += '<li class="list-group-item"><i class="fas fa-film"></i> ' + movies[i] + '</li>';
This adds one list item for each movie.
Step 4: Close the loop and display
Write: } to close the loop, then:
Write: document.getElementById('movieList').innerHTML = movieHtml;
This puts the HTML on the page.
Step 5: Repeat for languages
Copy the same 4 steps but use:
• languageHtml instead of movieHtml
• languages instead of movies
• 'languageList' instead of 'movieList'
• 'fas fa-code' instead of 'fas fa-film'

Take It Home

Create a new list on the page for your favorite foods or songs. You'll need to add a new `<ul>` with an ID to the HTML, then create a new array in the JavaScript and a new `for` loop to display it.