STEMTrainingGrounds

Lesson 2 of 40

Lesson Progress: 0%

Code Example

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

console.log(fruits);
// ["apple", "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

An array is like a "super-box" that can hold a whole list of items instead of just one thing.
You use square brackets [ ] to act like the walls of the box that keep your list together.
Inside the box, you can mix and match different things, like words, numbers, or even other lists.
It is like having a treasure chest where you can keep your favorite toys all in the same safe place.

Code Example

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

console.log(colors[0]);
// red

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

To get something out of your list, you use a "key" number inside square brackets.
Computers are a little funny—they always start counting at 0 instead of 1!
So, the very first item in your colors box is found at spot number 0.
It is like looking at a line of people and knowing that the leader is always standing in the "zero" spot.

Code Example

const numbers = [1, 2, 3];

console.log(numbers);

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

An array is like a "number train" where each car holds a different piece of information.
By putting the numbers inside [ ], you are telling the computer to keep them all together.
The commas between the numbers act like spacers to make sure the items don't get mixed up.
It is like having a small shelf where you can line up your favorite toy blocks in a specific order.

Code Example

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

console.log(pets);

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

An array is like a "pet carrier" with different rooms for all your different animals.
The square brackets [ ] act like the walls of the carrier to keep everyone inside.
You use commas to separate the pets so the computer knows where one ends and the next one begins.
It is like having a list of names in a notebook so you don't have to carry three separate pieces of paper.

Code Example

const names = ["Ana", "Ben", "Chris"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}
// Ana
// Ben
// Chris

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

A loop is like a "repeat button" that tells the computer to go through your list one by one.
The i is like a finger pointing at the current spot in the list, starting at the very first name.
The names.length tells the computer exactly when to stop so it doesn't run past the end of the list.
It is like a teacher calling out every name on a classroom list until they reach the very last student.

Code Example

const numbers = [
  [1, 2],
  [3, 4]
];

console.log(numbers[0][1]);
// 2

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

A 2D array is like a "giant box" that holds several smaller "list boxes" inside of it.
It works just like a building with different floors, where each floor is its own separate list.
To find a number, you first look at which "floor" or row it is on by counting from top to bottom.
Next, you look sideways across that row to find the exact "room" or spot the number is in.
Remember, computers always start counting from 0, so the first row is actually row 0!
When you see numbers[0][1], you are asking for the second item on the very first floor.
It is just like a game of Tic-Tac-Toe where every square has its own special address made of two numbers.

Code Example

const groups = [
  ["Alice", "Bob"],
  ["Charlie", "Dana"]
];

console.log(groups[1][0]);
// Charlie

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

This is a 2-dimensional array, which means it is an array that holds other arrays inside it.
Each smaller array inside is like a row in a table.
We count the rows from top to bottom.
We count the items inside each row from left to right.
Counting in arrays always starts at 0, not 1.
In groups[1][0], the first number chooses the row.
The second number chooses the name inside that row, which gives us "Charlie".

Lesson Progress: 0%

Lesson Incomplete

← Previous: Scope & Hoisting

Lesson 2 of 40

Next: Array Methods →