15.1 Introduction to Arrays (10 mins)

What Are Arrays in JavaScript?
- An array is a special data structure in JavaScript used to store multiple values in a single variable. Arrays are useful when you want to group related data together, such as a list of names, numbers, or items.
- Arrays allow you to organize data and perform operations like adding, removing, and iterating over elements.
Example:
- Instead of creating multiple variables:
  let student1 = "Alice"; let student2 = "Bob"; let student3 = "Charlie";
- You can store all values in a single array:
  let students = ["Alice", "Bob", "Charlie"];
How to Create Arrays in JavaScript:
- You can create an array using square brackets [] and separating values with commas.
- Syntax:
  let arrayName = [item1, item2, item3];
- Examples:
  - An array of strings:
    let colors = ["Red", "Green", "Blue"];
  - An array of numbers:
    let numbers = [10, 20, 30, 40, 50];
  - An array with mixed data types:
    let mixedArray = ["Alice", 25, true];
Accessing Array Elements:
- You can access array elements using index numbers. Array indices start at 0 (the first element has index 0, the second has index 1, and so on).
- Example:
  let fruits = ["Apple", "Banana", "Cherry"]; console.log(fruits[0]); // Outputs: Apple console.log(fruits[1]); // Outputs: Banana

Modifying Array Elements:

You can change the value of a specific element in an array by referring to its index.

Example:

let numbers = [10, 20, 30];
numbers[1] = 25;  // Changes the second element to 25
console.log(numbers);  // Outputs: [10, 25, 30]

Array Properties and Methods:
- Length: You can find the number of elements in an array using the .length property.
  - Example:
    let colors = ["Red", "Green", "Blue"]; console.log(colors.length); // Outputs: 3

Student Activity (10 mins):

Objective: Students will create and manipulate arrays in JavaScript by storing values, accessing elements, and modifying them.

Step-by-Step Activity:

Create an HTML file (e.g., arrays_intro.html) and write JavaScript code that demonstrates how to create and use arrays.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Introduction to Arrays</title>
</head>
<body>
  <h1>Check the Console for Array Outputs</h1>

  <script>
    // 1. Create an array of colors
    let colors = ["Red", "Green", "Blue"];
    console.log("Colors Array: " + colors);  // Outputs: Colors Array: Red, Green, Blue

    // 2. Access elements by index
    console.log("First color: " + colors[0]);  // Outputs: First color: Red
    console.log("Second color: " + colors[1]);  // Outputs: Second color: Green

    // 3. Modify an array element
    colors[2] = "Yellow";  // Change Blue to Yellow
    console.log("Modified Colors Array: " + colors);  // Outputs: Modified Colors Array: Red, Green, Yellow

    // 4. Find the length of the array
    console.log("Number of colors: " + colors.length);  // Outputs: Number of colors: 3
  </script>
</body>
</html>

Run the file in a browser:
- Open the HTML file in a browser and use Developer Tools (F12 or right-click and select Inspect > Console) to view the array outputs.

Activity:

Step 1: Create an array of 5 numbers and print the first, last , and sum number.

let numbers = [10, 20, 30, 40, 50];
console.log("First number: " + numbers[0]);  // Outputs: 10
console.log("Last number: " + numbers[numbers.length - 1]);  // Outputs: 50
const sum = numbers.reduce((acc, curr) => acc + curr, (initialValue = 1));
console.log("Sum of array elements: " + sum);// Outputs: 151

Step 2: Modify the second element in the array and print the updated array.

numbers[1] = 25;  // Change 20 to 25
console.log("Updated Numbers Array: " + numbers);  // Outputs: [10, 25, 30, 40, 50]

Challenge:

Write a function that takes an array of numbers as input and returns the sum of the numbers.

function sumArray(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

let result = sumArray([10, 20, 30, 40, 50]);
console.log("Sum of array elements: " + result);  // Outputs: 150

// Alternative: Calculate sum using forEach
let total = 0;
numbers.forEach(num => total += num);
console.log("Sum of array elements (using forEach): " + total);  // Outputs: 150

Activity Follow-up Questions:

How are arrays different from regular variables in JavaScript?
What is the significance of using the .length property of an array?
How can you access the last element of an array dynamically?

Expected Outcome:

Students will:

Understand the concept of arrays and how they are used to store multiple values.
Practice creating, accessing, and modifying array elements.
Learn how to use the .length property and how to manipulate arrays dynamically in JavaScript.

PreviousLecture_15_Arrays and Their Methods Next15.2 Basic Array Methods (20 mins)

Last updated 1 year ago