3.1 Arrays¶

Creating an Array¶

Task 1: Create a variable called color1. Set its value to "red".

var color1 = "red";

Task 2: Create another variable called color2. Set its value to "white".

var color2 = "white";

Task 3: Create another variable called color3. Set its value to "green".

var color3 = "green";

Task 4: Read the following code, and understand the result.

var colors = ["red", "white", "green"];
console.log(colors);

The result is: (3) ["red", "white", "green"]

Instead of putting every single color in a single variable, we put all the colors in a single variable. In Task 4, the value of colors is a list of colors. We call this list an array in JavaScript.

Task 5: Create a list/array of numbers from 1 to 5. Display this list in the console.

var numbers = [1, 2, 3, 4, 5];
console.log(numbers);

The result is: (5) [1, 2, 3, 4, 5].

As you can see, a JavaScript array is enclosed in square brackets [].

Task 6: Create an array that contains user names and their phones numbers: "user123", 1563, "user846", 5528, "user887", 6542.

var userData = ["user123", 1563, "user846", 5528, "user887", 6542];
console.log(userData);

The result is: (6) ["user123", 1563, "user846", 5528, "user887", 6542]

What is this number that appears before the array in the console?!

Array Length¶

Task 7: Read the following code, and understand the result.

var colors = ["red", "white", "green"];
console.log(colors, colors.length);

var numbers = [1, 2, 3, 4, 5];
console.log(numbers, numbers.length);

var userData = ["user123", 1563, "user846", 5528, "user887", 6542];
console.log(userData, userData.length);

The result is as follows:

(3) ["red", "white", "green"] 3
(5) [1, 2, 3, 4, 5] 5
(6) ["user123", 1563, "user846", 5528, "user887", 6542] 6

I hope that it is clear now. The number displayed beside the array in the console is the number of array items. You can see; there are 3 colors in the colors array, so colors.length is 3. There are 5 numbers in the numbers array, so numbers.length is 5. And there are 6 items in the userData array, so userData.length is 6.

Task 8: Suppose you have this array var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"]. Display the length of this array in the console.

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo.length);

The result is: 4.

Array Elements¶

Task 9: Display the third item of task 8 array in the console. Hint: use array[2].

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo[2]);

The result is: Listen to a song

The first item of an array has position 0, the second has position 1, the third has position 2, and so on. We can access an array item by enclosing its position in square brackets []. In our case, we wrote toDo[2]

Task 10: Display the first item of the colors array in the console.

var colors = ["red", "white", "green"];
console.log(colors[0]);

The result is: red

Task 11: Display the fourth item of the toDo array in the console.

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo[3]);

The result is: Meditate for 15 minutes

Task 12: Display the sixth item of the toDo array in the console.

var toDo = ["Clean the house", "Read a book", "Listen to a song", "Meditate for 15 minutes"];
console.log(toDo[5]);

The result is: undefined

Task 13: Create an empty array. Display this array in the console.

var emptyArr = [];
console.log(emptyArr);

The result is: []

Task 14: What is the length of the array created in task 13.

var emptyArr = [];
console.log(emptyArr.length);

The result is: 0

Task 15: Display the first element of task 14 array.

var emptyArr = [];
console.log(emptyArr[0]);

The result is: undefined

Array Items Types¶

Task 16: Create a new array with the following items: "user56", true, 10, null, 5, undefined. Display the array in the console.

var newArr = ["user56", true, 10, null, 5, undefined];
console.log(newArr);

The result is: (6) ["user56", true, 10, null, 5, undefined]

Task 17: Check the type of every item in the task 16 array. Display the result in the console.

var newArr = ["user56", true, 10, null, 5, undefined];
console.log(typeof newArr[0]);
console.log(typeof newArr[1]);
console.log(typeof newArr[2]);
console.log(typeof newArr[3]);
console.log(typeof newArr[4]);
console.log(typeof newArr[5]);

The result is as follows:

string
boolean
number
object
number
undefined

Nested Arrays¶

Task 18: Sanad needs to buy things for himself and his house. He organized the things, which he needs to buy in multiple lists. He created a list of vegetables, which contains potatoes and tomatoes. A list of fruits, which contains bananas, apples, and oranges. A list of office needs, which contains papers and 3 pens. Help Sanad to create these lists in JavaScript.

var vegetables = ["potatoes", "tomatoes"];
var fruits = ["bananas", "apples", "oranges"];
var office = ["papers", "3 pens"];

Task 19: Refer to task 18; Sanad wants you to add all these sub-lists to the things to buy list. Display the result in the console.

var vegetables = ["potatoes", "tomatoes"];
var fruits = ["bananas", "apples", "oranges"];
var office = ["papers", "3 pens"];
var thingsToBuy = [vegetables, fruits, office];
console.log(thingsToBuy);

The result is: (3) [Array(2), Array(3), Array(2)]

What does this mean? It simply means that our thingsToBuy array contains 3 arrays. The first inner array Array(2) has a length of 2 because it has 2 items. The second inner array Array(3) has a length of 3 because it has 3 items. The last array Array(2) has a length of 2 because it has 2 items.

Task 20: Refer to task 19; Help Sanad to get the first item in the vegetables list.

var firstList = thingsToBuy[0];
var firstVegToBuy = firstList[0];
console.log(firstVegToBuy);

You will get: potatoes

You can also write:

var firstVegToBuy = thingsToBuy[0][0];
console.log(firstVegToBuy);

Task 21: Refer to task 19; Help Sanad to get the second item in the office list.

var secondOfficeThingToBuy = thingsToBuy[2][1];
console.log(secondOfficeThingToBuy);

The result is: 3 pens

Task 22: Refer to task 19; Help Sanad to get the third item in the fruits list.

var thirdFruitToBuy = thingsToBuy[1][2];
console.log(thirdFruitToBuy);

The result is: oranges