Lesson 12, Tuesday, 2025-10-28
An array is a container type that holds multiple values:
// we create an empty array using []
let emptyArray = [];
// we put the values we want in square brackets
// separated by commas
let ages = [19, 33, 25, 40];
let cities = ['London', 'Paris', 'Berlin'];Array can hold any type of value:
let prices = [0.99, 1.49];And any quantity:
// I only have one favorite food
let favoriteFoods = ['Pizza'];
// An array holding 26 letters of the alphabet
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];A bookshelf can be thought of as an array of books
let books = ['Harry Potter', 'The Hobbit', 'Game of Thrones'];Can you think of use cases for arrays? Where would we use it?
- a todo list
- a shopping list
- ingredients in a recipe
- the students in this class
- the numbers from 1 to 10
We can access elements in the array by number using square brackets []
The numbering starts at 0 (think floors of a building):
let books = ['Harry Potter', 'The Hobbit', 'Game of Thrones'];
console.log(books[0]); // "Harry Potter"
console.log(books[1]); // "The Hobbit"
// QUIZ - how do we access "Game of Thrones" ?console.log(books[2]); // "Game of Thrones"The order of elements in the array matters!
let books = ['Harry Potter', 'The Hobbit', 'Game of Thrones'];
console.log(books[0]); // "Harry Potter"
console.log(books[1]); // "The Hobbit"
console.log(books[2]); // "Game of Thrones"
console.log(books[3]); // ???console.log(books[3]); // undefinedlet friends = ['Ada', 'Alan', 'Brendan'];
console.log(friends[1]); // ???
console.log(friends[3]); // ???console.log(friends[1]); // "Alan"
console.log(friends[3]); // undefinedBoth array and object can store multiple values:
let favoriteNumbersArray = [42, 24];
let favoriteNumbersObject = {
first: 42,
second: 24
};Use object if you want to access elements by by key (string), use arrays if you want to access elements by its index (number).
- Step 1: Create an array with your 3 top friends
- Step 2: Say "hello" on console to each friend, in the array:
hello Ada
hello Alan
hello Brendan
let friends = ['Ada', 'Alan', 'Brendan'];
console.log('hello ' + friends[0]);
console.log('hello ' + friends[1]);
console.log('hello ' + friends[2]);We can change any value using brackets:
let friends = ['Ada', 'Alan', 'Brendan'];
friends[2] = 'Bjarne';
// friends array is now ['Ada', 'Alan', 'Bjarne']
console.log(friends[2]); // "Bjarne"We can get the length of an array with the .length property:
let friends = ['Ada', 'Alan', 'Brendan'];
console.log(friends.length); // 3We can append new values to an array using .push():
let friends = ['Ada', 'Alan', 'Brendan'];
console.log(friends.length); // 3
friends.push('Bjarne');
console.log(friends.length); // 4
console.log(friends[3]); // BjarneWe can remove the last element from an array .pop():
let friends = ['Ada', 'Alan', 'Brendan', 'Bjarne'];
console.log(friends.length); // 4
friends.pop();
console.log(friends.length); // 3
console.log(friends[3]); // undefinedEvery HTML element has a children property that returns an array of its children.
<body>
<div>First</div>
<div>Second</div>
</body>How can we access the two div elements inside the body (without document.getElementById?)
let firstDiv = document.body.children[0];
let secondDiv = document.body.children[1];
// firstDiv and secondDiv now point to the two divs inside body
// we can now get/set properties
firstDiv.textContent = "This is the first div";
secondDiv.style.backgroundColor = "green";You have an array with your favorite vegetables, e.g:
// this line is given. Do not touch :)
let favoriteVeggies = ['eggplant', 'broccoli', 'potato'];Add some code that replaces 'broccoli' with 'carrot' and some code that adds 'pepper' to the end of favoriteVeggies.
After your code ran, the array should look like this:
['eggplant', 'carrot', 'potato', 'pepper']let favoriteVeggies = ['eggplant', 'broccoli', 'potato'];
favoriteVeggies[1] = 'carrot';
favoriteVeggies.push('pepper');You have the following HTML in your body:
<div id="colors">
<div>red</div>
<div>yellow</div>
<div>green</div>
</div>Write some JavaScript code that sets the backgroundColor of the three inner div elements to the color of their textContent. Example: The first div should have a red background color.
let colorElement = document.getElementById("colors");
let children = colorElement.children;
children[0].style.backgroundColor = children[0].textContent;
children[1].style.backgroundColor = children[1].textContent;
children[2].style.backgroundColor = children[2].textContent;Output your name to console.log two times.
console.log('Alan');
console.log('Alan');Output your name to console.log 14207 times.
// huh ????We use loops to run the same code in our programs repeatedly.
More generally, a loop is a way to repeat an action multiple times as long as a certain condition is true.
Let's say I want to bake a cake:
- 6 eggs
- 3 cups of sugar
- 5 cups of flour
We take an empty bowl and keep our ingredients ready.
We need 5 cups of flour.
- What's the action that we need to repeat?
- For how long do we need to repeat it?
- The action we need to repeat is adding a cup of flour to the bowl
- We repeat it 5 times
We can distinguish different parts in a loop:
- initialization: a starting point
- condition: a test to see if the loop should stop
- update: changes the value checked by the condition
- action: what we want to repeat
- initialization: no flour in the bowl (
cupsOfFlour = 0) - condition: did we put less than 5 cups of flour? (
cupsOfFlour < 5) - update: cups of flour in the bowl (
cupsOfFlour++) - action: add flour to the bowl
Let's see how to make an actual loop in JavaScript.
A while loop repeats its body while its condition is true:
while (condition) {
// body is executed while "condition" is true
console.log('Hello from while loop');
}let cupsOfFlour = 0; // initialization
while (cupsOfFlour < 5) { // condition
// action
console.log('Take a cup of flour and put it in the bowl');
// update
cupsOfFlour++;
console.log('There are now ' + cupsOfFlour + ' cups in the bowl');
}A while loop might execute zero to unlimited times:
let isHungry = false; // we just ate
while (isHungry) {
eat(); // this is never reached!
}Always make sure that a while loop's condition is eventually set to false.
Otherwise your loop will run infinitely.
let bitesOfChocolate = 0;
while (bitesOfChocolate < 10) {
console.log('Bites of chocolate: ' + bitesOfChocolate);
console.log('Still hungry.');
}
// this code will print "Bites of chocolate: 0" and
//"Still hungry" until your laptop runs out of battery,
// you close the browser, you reboot, or the universe endsLet's console.log the numbers from 1 to 5 using a while loop.
Quiz: Let's console.log the numbers from 1 to 5 using a while loop.
let i = 1; // initialize i with 1
while (i <= 5) {
// repeat this loop until we reach 5
console.log(i);
i++; // update i at every step
}What will this loop output?
let i = 0;
while (i < 2) {
console.log(i);
}Answer: 0, until you run out of battery
- How many times will the loop run?
let i = 10;
while (i < 15) {
console.log(i);
i++;
}Answer: 5 times
- Output your name five times
- Output the squares of the first 10 numbers starting with 1 (1, 4, 9, 16, ...)
Output your name five times
let i = 0;
while (i < 5) {
console.log('Carlo');
i++;
}Squaring the first 10 numbers
let i = 1;
while (i < 11) {
console.log(i * i); // or i ** 2
i++;
}- What can we do with loops?
- What are the main parts of a loop?
- Can a loop run 0 times?
- Can a loop run only 1 time?
- a loop lets us execute a block of code multiple times
- the block is executed as long as certain condition is true
- we normally need a starting point, initializing some variable
- inside the block that is repeated, we usually update some value to make sure that the loop can stop
But developers are lazy, we want to write the least amount of code as possible.
Hence, the for loop!
look at this example, can you explain how do we write a for loop?
for (let counter = 0; counter < 10; counter++){
console.log(counter);
}A for loop works like a while loop, but it's more concise.
for (initialization; condition; update) {
// loop body
}for(- initialization
;- condition
;- update
The 3 main parts of the loop are all in one line, separated by semicolons (;).
Let's replace our while loop with a for:
let i = 1; // part 1 - *initialize* the counter
while (i < 6) { // part 2 - *test* the exit *condition*
console.log(i);// loop body
i++; // part 3 - *update* the counter
}
// same code with for loop:
for (let i = 1; i < 6; i++) {
console.log(i);
}- A
whileloop executes its body while the condition istrue. - A
forloop first runs the initialization part, then tests the condition part and, if it istrue, executes the body. After every loop, it executes the update part.
- We use a
forloop if we know in advance how often it will be executed.
for (let i = 0; i < 1000; i++) {
console.log(i);
}- We use a
whileloop if we don't know how many times the loop will be executed.
while (passwordIsWrong) {
askForPassword();
}use a for loop and output the numbers between 0 and 10 (including both) to the console
for(let i = 0; i < 11; i++){
console.log(i);
}use a for loop and output the numbers between 13 and 17 (including both) to the console
for(let i = 13; i <= 17; i++){
console.log(i);
}For loops and arrays work wonderfully together!
let languages = ["english", "german", "arabic", "japanese"]
for (let i = 0; i < languages.length; i++){
console.log(languages[i]);
}use a for loop to output: hello name! for every one of your friends:
let friends = ['Abdo', 'Harald', 'Sevtap', 'Meli'];
// ????use a for loop and output the numbers between 5 and -3 (including both) to the console
for(let i = 5; i > -4; i--){
console.log(i);
}- Output the sum of the first 10 numbers (e.g. 1 + 2 + 3 + ...)
- Output a countdown from 10 to 0 to console (e.g. 10, 9, 8, ...)
- Bonus: Instead of zero, output "liftoff!"
- Bonus: Instead of counting down to console.log, write the output to a an HTML page