15.2 Basic Array Methods (20 mins)

Introduction to Basic Array Methods: JavaScript provides several useful methods to manipulate arrays. These methods allow you to add, remove, and combine elements efficiently.

Array Methods:

push(): Adds one or more elements to the end of an array and returns the new length of the array.

Example:

let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits);  // Outputs: ["Apple", "Banana", "Orange"]

pop(): Removes the last element from an array and returns the removed element.

Example:

let fruits = ["Apple", "Banana", "Orange"];
let lastFruit = fruits.pop();
console.log(fruits);  // Outputs: ["Apple", "Banana"]
console.log(lastFruit);  // Outputs: "Orange"

shift(): Removes the first element from an array and returns the removed element.

Example:

let fruits = ["Apple", "Banana", "Orange"];
let firstFruit = fruits.shift();
console.log(fruits);  // Outputs: ["Banana", "Orange"]
console.log(firstFruit);  // Outputs: "Apple"

unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

Example:

let fruits = ["Banana", "Orange"];
fruits.unshift("Apple");
console.log(fruits);  // Outputs: ["Apple", "Banana", "Orange"]

concat(): Combines two or more arrays and returns a new array. This method does not change the original arrays.

Example:

let fruits = ["Apple", "Banana"];
let vegetables = ["Carrot", "Tomato"];
let food = fruits.concat(vegetables);
console.log(food);  // Outputs: ["Apple", "Banana", "Carrot", "Tomato"]

Student Activity (20 mins):

Objective: Students will practice using the basic array methods to manipulate arrays by adding, removing, and combining elements.

Step-by-Step Activity:

Create an HTML file (e.g., arrays_methods.html) and write JavaScript code that demonstrates the use of basic array methods.

Example Code:

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

  <script>
    // Create an array of fruits
    let fruits = ["Apple", "Banana"];

    // 1. push(): Add an element to the end of the array
    fruits.push("Orange");
    console.log("After push: " + fruits);  // Outputs: After push: Apple,Banana,Orange

    // 2. pop(): Remove the last element of the array
    let removedFruit = fruits.pop();
    console.log("After pop: " + fruits);  // Outputs: After pop: Apple,Banana
    console.log("Removed fruit: " + removedFruit);  // Outputs: Removed fruit: Orange

    // 3. shift(): Remove the first element of the array
    let shiftedFruit = fruits.shift();
    console.log("After shift: " + fruits);  // Outputs: After shift: Banana
    console.log("Shifted fruit: " + shiftedFruit);  // Outputs: Shifted fruit: Apple

    // 4. unshift(): Add an element to the beginning of the array
    fruits.unshift("Grapes");
    console.log("After unshift: " + fruits);  // Outputs: After unshift: Grapes,Banana

    // 5. concat(): Combine two arrays
    let vegetables = ["Carrot", "Tomato"];
    let food = fruits.concat(vegetables);
    console.log("Combined food array: " + food);  // Outputs: Combined food array: Grapes,Banana,Carrot,Tomato
  </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 results of the array manipulations.

Activity:

Step 1: Add 3 more items to an array using the push() method, then remove the last item using pop().

let numbers = [10, 20, 30];
numbers.push(40, 50, 60);
console.log("After push: " + numbers);  // Outputs: [10, 20, 30, 40, 50, 60]

let removedNumber = numbers.pop();
console.log("After pop: " + numbers);  // Outputs: [10, 20, 30, 40, 50]
console.log("Removed number: " + removedNumber);  // Outputs: 60

Step 2: Use shift() and unshift() to modify the beginning of an array and print the results.

let animals = ["Cat", "Dog", "Elephant"];
let firstAnimal = animals.shift();  // Remove the first element
console.log("After shift: " + animals);  // Outputs: ["Dog", "Elephant"]

animals.unshift("Lion");  // Add an element to the beginning
console.log("After unshift: " + animals);  // Outputs: ["Lion", "Dog", "Elephant"]

Challenge:

Write a function that takes two arrays as parameters and returns a new array that combines both arrays using concat().

function combineArrays(arr1, arr2) {
  return arr1.concat(arr2);
}

let result = combineArrays([1, 2, 3], [4, 5, 6]);
console.log("Combined Array: " + result);  // Outputs: [1, 2, 3, 4, 5, 6]

Activity Follow-up Questions:

How do push() and pop() differ from shift() and unshift() in terms of how they modify an array?
What is the advantage of using concat() when working with multiple arrays?
In what scenarios would you prefer using shift() and unshift() instead of push() and pop()?

Expected Outcome:

Students will:

Understand how to use basic array methods (push(), pop(), shift(), unshift(), and concat()) to manipulate arrays.
Practice adding and removing elements from arrays dynamically.
Learn how to combine arrays and create new arrays without modifying the original arrays using concat().

Previous15.1 Introduction to Arrays (10 mins)Next15.3 Advanced Array Methods (15 mins)

Last updated 1 year ago