Javascript - Arrays

Arrays

Learning Goals

• Using arrays to structure multiple data elements

  • Arrays as an index-based data structure

  • Basic array methods e.g: push, length, indexOf

• Iterating through an array

• Using conditional logic on each data element from an array

• An array is based on an index

• It can store multiple data elements

• We can interact with the full array to understand its length (how many elements are inside it) and more

• We can interact with single data elements of the array by referring to an index

Peer instruction

for (let i = 0; i < 5; i++) {
    console.log("Hey guys")
}

How many times does this loop print "Hey guys"?

A: 4

B: 5

C: 6

D: Syntax error

const friends = 5;

for (let i = 0; i < 5; i++) {
    if(friends >= 5){
        console.log("Hey guys");
    }
}

A: 0

B: 5

D: Syntax error

Introduction

If you ever find yourself writing code like this...

const mentor1 = "Daniel";
const mentor2 = "Irina";
const mentor3 = "Rares";

...then it's probably time to use an array!

Arrays are data structures that hold a list of values. We call these values the elements of the array.

const mentors = ["Daniel", "Irina", "Rares"];

Arrays can hold any type of value (although almost always you only have one data type per array).

const testScores = [16, 49, 85];
const grades = ["F", "D", "A"];
const greetings = ["Hello, how are you?", "Hi! Nice to meet you!"];

Accessing elements

You can access elements in an array using the index of an element with bracket notation. If you want the first element you use index 0 which can cause some confusion 😱

const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];
trainees[0]; // "Ahmed"
trainees[3]; // "Nahidul"

🔔 Remember: All arrays start at position 0! To access the first element in an array, you need to access index 0, the second element at 1. There are some very intense reasons for this, but most people just accept it and move on.

Assigning elements

You can also assign new values to parts of an array:

const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];

trainees[2] = "Bianca";

console.log(trainees); // ["Ahmed", "Maria", "Bianca", "Nahidul", "Jack"]

.push

Elements can furthermore be "pushed" into an array. The pushed value will figure as the latest element.

const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];

trainees.push("Nicklas");

console.log(trainees); // ["Ahmed", "Maria", "Bianca", "Nahidul", "Jack", "Nicklas"]

.length

You can also get the number of elements in an array you can use the .length parameter DET HEDDER DET IKKE

const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];

console.log(trainees.length); // 5

.indexOf

If you know the value and want the index number, you can use indexOf

const trainees = ["Ahmed", "Maria", "Atanas", "Nahidul", "Jack"];

const indexOfMaria = trainees.indexOf("Maria");

console.log(indexOfMaria); // 1

More methods documented here:

• https://www.w3schools.com/js/js_array_methods.asp

Warmup exercises (individual)

📝 Exercise 1

Using the following array

const fruits = ['banana', 'apple', 'strawberry', 'kiwi', 'fig', 'orange'];

Now, using the correct indexes, get the following values from the array:

• strawberry

• kiwi

• orange

• banana

Then, replace apple with raspberry, and replace fig with pineapple.

taken from https://syllabus.codeyourfuture.io/js-core-1/week-2/lesson#arrays

📝 Exercise 2

Write some code that can get the last element in an array. You should be able to add a new element to the array and when running the code the lastElementInTheArray is the right element!

const names = ['Peter', 'Susan', 'Charlotte'];
const lastElementInTheArray = YOU WRITE CODE HERE;
console.log(lastElementInTheArray); // Charlotte

const moreNames = ['Peter', 'Susan', 'Charlotte', 'Abdullah'];
const lastElementInTheArray = YOU WRITE CODE HERE;
console.log(lastElementInTheArray); // Abdullah

📝 Exercise 3

Create an array with numbers: 2,3,4,5

• Use an array method from here: https://www.w3schools.com/js/js_array_methods.asp

To input a number "1" at the start of the array

Print the array

Pair Programming (Random groups):

William Emil Lieberkind <-> Frederik Vigsø Andersen

Lenah Nyokabi Githambo <-> Christian Pedersen

Ammar Mahmood <-> Rajana Bagaeva

Jeppe Jæger Neumann <-> Hans Nielsen

Oliver Møller Kluge <-> Deniz Okumus

Gustav Frederiksen <-> Frederik Neuchs

Vera Marrero Maheen Ilyas <-> Arne Andreas Bredahl Fogh

Lasse Daugbjerg Rasmussen <-> Klara Lelund Blauenfeldt

Gustav Friis Christensen <-> Nadine Hejazi

Amalie Julie Brandt Andersen <-> Alexander Winther Bang

Oskar Rosengreen Lansø <-> Gustav Frederik Schandorff

David Theophil <-> Alisa Shalja

Christoffer Brandt Holm <-> Nicklas Sienczak Knudsen

Abdul Raafí Hashmi <-> Azra Hamid

Mads Runge Poulsen <-> Frederik Zanchetta Kløcker

Exercise 1

• Write an array with 4 names

• Write a program that prints each name

Exercise 2

• Write an array with 5 numbers

• Write a program that calculates the average of the numbers (using loops)

• Print & verify the result

Exercise 3

• Write an array with 5 strings

• Write a program that adds every string to a new array

  • Except if the string has more than 3 characters

• Print & verify the result

Exercise 4

• Write an array with numbers 1...10

• Write a program such that the last number is printed first up until the first number of the array

• When the countdown 10, 9 ,8 ..., 1 has passed the program will print out: BOOM 🚀

Exercise 5

• Write an array with a mixed combination of strings and integers

• If the array contained most strings it will output "Most strings"

• Otherwise it will print "Most integers"

Exercise 6

• Write an array with 5 numbers

• Write a program that finds the maximum number of the array

• Print and verify the result

Advanced (Optional):

1.

• Write a program that:

• Generates an array with 10 random numbers between 1-10

  • https://www.w3schools.com/jsref/jsref_random.asp

• If the array has a sum above 50 or an average of numbers above 5

• Print: "High Jumper"

2.

• Write an array with numbers: 1,2,3,4,5,6,7

• Write a program that reverses the array

• Using .reverse() is cheating 😇