STEMTrainingGrounds

Lesson 3

Lesson 3 of 40

Array Methods

Lesson Progress: 0%

Code Example

const numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

Think of push() as a special tool that lets you add something brand new to the very end of your list.
You just put the new item you want to add inside the parentheses, and the computer snaps it onto the back of the array.
It is like standing at the end of a line and having a new friend join in right behind you.

Code Example

const pets = ["dog", "cat", "fish"];

pets.pop();

console.log(pets);
// ["dog", "cat"]

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The pop() tool is a quick way to grab the very last item off your list and take it away.
Unlike other tools, you don't need to put anything inside the parentheses because it always knows to pick the last one.
Once you use it, your list becomes one item shorter, and the item that was at the end is gone.
It is like playing a game of "Follow the Leader" and having the person at the very back of the line leave the group.

Code Example

const fruits = ["apple", "banana", "orange"];

fruits.shift();

console.log(fruits);
// ["banana", "orange"]

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The shift() tool is a special command used to remove the very first item from your list.
When the first item leaves, every other item in the list slides over one spot to fill the empty space.
You don't need to name the item inside the parentheses because the computer always knows to grab the one at the front.
It is like a line at the movies where the first person gets their ticket and leaves, and everyone else moves up one step.

Code Example

const numbers = [2, 3, 4];

numbers.unshift(1);

console.log(numbers);
// [1, 2, 3, 4]

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The unshift() tool is a special command that lets you add a new item to the very front of your list.
When you use it, the computer makes room by pushing all the other items back one spot to make space.
You put the new item you want to add inside the parentheses so the computer knows what to put at the start.
It is like a new person cutting to the very front of a line, causing everyone else to take a step back.

Code Example

const colors = ["red", "green", "blue"];

console.log(colors.includes("green"));
// true

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The includes() tool lets you ask the computer if a specific item is hiding inside your list.
You put the name of the item you are looking for inside the parentheses so the computer knows what to hunt for.
The computer will answer with true if it finds the item, or false if the item isn't there.
It is like checking your backpack to see if you remembered to pack your green crayon before you start coloring.

Code Example

const pets = ["dog", "cat", "fish"];

console.log(pets.indexOf("cat"));
// 1

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The indexOf() tool helps you find the "spot number" where a specific item is sitting in your list.
You put the name of the pet you are looking for in the parentheses, and the computer gives you its number.
Remember that computers start counting at 0, so the first item is 0 and the second item is 1.
It is like asking a teacher, "Which chair is the cat sitting in?" and having them point to the seat number.

Code Example

const letters = ["a", "b", "c", "d"];
const part = letters.slice(1, 3);
console.log(part);
// ["b", "c"]

const numbers = [10, 20, 30, 40, 50];
const part = numbers.slice(2, 4);
console.log(part);
// [30, 40]

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The slice() tool lets you copy a specific section of your list to create a brand new, smaller list.
The first number tells the computer where to start the cut, and the second number tells it where to stop.
Because we start counting at 0, a start number of 1 actually begins the cut at the second item.
It is like taking a pair of scissors to a strip of paper, cutting out a piece in the middle, and giving it to a friend.

Code Example

const words = ["Hello", "world"];
console.log(words.join(" "));
// "Hello world"

const letters = ["J", "S", "Fun"];
console.log(letters.join("-"));
// "J-S-Fun"

Instructions

▼ ← Click the triangle to hide or reveal instructions.

JavaScript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The slice() tool lets you copy a specific section of your list to create a brand new, smaller list.
The first number tells the computer where to start the cut, and the second number tells it where to stop.
Because we start counting at 0, a start number of 1 actually begins the cut at the second item.
It is like taking a pair of scissors to a strip of paper, cutting out a piece in the middle, and giving it to a friend.

Lesson Progress: 0%

Array Methods

Lesson Incomplete

← Previous: Arrays

Lesson 3 of 40

Next: Objects →

const letters = ["a", "b", "c", "d"]; const part = letters.slice(1, 3); console.log(part); // ["b", "c"] const numbers = [10, 20, 30, 40, 50]; const part = numbers.slice(2, 4); console.log(part); // [30, 40]