JavaScript - 9

JavaScript - 9: Array Methods

Arrays come with built-in tools called methods that can add, remove, and work with their items.

In this lesson, you will use .push() to add an item, .shift() to remove the first item, and .forEach() to run code for every remaining number.

Your challenge: Modify an array, then print each remaining number and its doubled value.

What is an array method?

A method is a built-in action that belongs to a value such as an array.

You call an array method by writing the array name, a dot, and the method name.

For example: numbers.push(25);

Here, push is a method being used on the numbers array.

Add an item with .push()

The .push() method adds one or more items to the end of an array.

Starting with: [5, 10, 15, 20]

this: numbers.push(25);

changes the array to: [5, 10, 15, 20, 25]

Remove the first item with .shift()

The .shift() method removes the first item from an array.

After: numbers.shift();

the array becomes: [10, 15, 20, 25]

Notice that .push() and .shift() actually change the original array.

Inspect the array as you work

Try printing the array after each change:

console.log("After push:", numbers);

and then:

console.log("After shift:", numbers);

Watching the array change step by step can make methods easier to understand.

Loop with .forEach()

In the previous lesson, you used a traditional for loop. Arrays also have a method called .forEach() that runs a function once for every item.

A basic example looks like: numbers.forEach((number) => { console.log(number); });

If the array contains four numbers, the function runs four times.

What is number?

Inside: numbers.forEach((number) => { ... })

the number parameter represents the current item being visited.

On the first run it might contain 10. On the next run it contains 15, and so on.

You could call this parameter something else, but a meaningful name makes the code easier to read.

What does => mean?

The => syntax creates an arrow function.

For now, you can think of it as a short way to create the function that .forEach() should run for every item.

You will explore functions in more detail as the course continues.

Double each number

Inside the .forEach() callback, multiply the current number by 2.

For example: number * 2

If number is 15, the result is 30.

Using a template literal, you could print: `${number} doubled is ${number * 2}`

Important: .forEach() does not replace the values

Printing number * 2 does not automatically change the numbers stored in the array.

The array can still contain: [10, 15, 20, 25] even though your output shows their doubled values.

Later, you will learn methods that can create a new array containing transformed values.

Experiment: Change the starting array to:

let numbers = [3, 7, 11];

Keep the same .push(), .shift(), and .forEach() code. Notice how the methods continue to work with the new values.

Try another method:

The opposite of .shift() is .pop().

Try: numbers.pop();

This removes the final item instead of the first one.

Good JavaScript habit: Pay attention to whether an array method changes the original array. Methods such as .push(), .shift(), and .pop() modify it directly.

let numbers = [5, 10, 15, 20];

numbers.push(25);
numbers.shift();

numbers.forEach((number) => {
  console.log(`${number} doubled is ${number * 2}`);
});