3.3 Display Array Items¶

For Loop¶

Task 1: Create an array that contains 1, 2, and 3. Display each element/item of this array on a separate line.

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

The result is as follows:

1
2
3

Task 2: Re-do task 1 using for loop.

var numbers = [1, 2, 3];
for(var i =0; i<3; i++){
  console.log(numbers[i]);
}

The result is as follows:

1
2
3

We already know that numbers[0] accesses the first array element, numbers[1] accesses the second array element, and numbers[2] accesses the third array element. We created a for loop that repeats the task 3 times from 0 to 3 (3 is the array length).

Task 3: You have a list of colors: red, green, white, and black. Display each color on a separate line. Hint: use for loop and array.length.

var colors = ["red", "green", "white", "black"];
for(var i =0; i < colors.length; i++){
  console.log(colors[i]);
}

The result is as follows:

red
green
white
black

Task 4: You have a list of items: item1 to item8. Display each item on a separate line.

var items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
for(var i =0; i < items.length; i++){
  console.log(items[i]);
}

The result is as follows:

item1
item2
item3
item4
item5
item6
item7
item8

Task 5: You have a list of things to do: meditate, go to gym, watch a video, and have a healthy meal. Display each thing on a separate line.

var thingsToDo = ["meditate", "go to gym", "watch a video", "have a healthy meal"];
for(var i =0; i < thingsToDo.length; i++){
  console.log(thingsToDo[i]);
}

The result is as follows:

meditate
go to gym
watch a video
have a healthy meal

Task 6: You have a list of things to buy: papers, bread, 2 pencils, perfume, and milk. Display each thing on a separate line.

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
for(var i =0; i < thingsToBuy.length; i++){
  console.log(thingsToBuy[i]);
}

The result is as follows:

papers
bread
2 pencils
perfume
milk

for...of¶

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

var myWorkEthics = ["Concentrate", "Wait for no result", "Trust your Karma"];
for(item of myWorkEthics){
  console.log(item);
}

The result is as follows:

Concentrate
Wait for no result
Trust your Karma

for...of

for...of is another kind of JavaScript loops. It helps us to iterate over array items/elements.

The syntax of for...of is for(arrayItem of array){ // statements to execute}

Task 8: Re-do task 2 using for...of loop.

var numbers = [1, 2, 3];
for(number of numbers){
  console.log(number);
}

The result is as follows:

1
2
3

Task 9: Re-do task 3 using for...of loop.

var colors = ["red", "green", "white", "black"];
for(color of colors){
  console.log(color);
}

The result is as follows:

red
green
white
black

Task 10: Re-do task 4 using for...of loop.

var items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
for(item of items){
  console.log(item);
}

The result is as follows:

item1
item2
item3
item4
item5
item6
item7
item8

Task 11: Re-do task 5 using for...of loop.

var thingsToDo = ["meditate", "go to gym", "watch a video", "have a healthy meal"];
for(thingToDo of thingsToDo){
  console.log(thingToDo);
}

The result is as follows:

meditate
go to gym
watch a video
have a healthy meal

Task 12: Re-do task 6 using for...of loop.

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
for(thingToBuy of thingsToBuy){
  console.log(thingToBuy);
}

The result is as follows:

}
papers
bread
2 pencils
perfume
milk

array.forEach()¶

Task 13: Read the code below, and understand the result.

var numbers = [100, 200, 300, 400, 500];
numbers.forEach(function(currentItem, index, array){
  console.log(index, currentItem, array);
});

The result is as follows:

0 100 (5) [100, 200, 300, 400, 500]
1 200 (5) [100, 200, 300, 400, 500]
2 300 (5) [100, 200, 300, 400, 500]
3 400 (5) [100, 200, 300, 400, 500]
4 500 (5) [100, 200, 300, 400, 500]

array.forEach()

array.forEach() is used to iterate over items of an array.

The syntax of array.forEach() is array.forEach(function(currentItem, index, array){// statements to execute});

array.forEach() is an array method that takes a function as input. It executes the provided function on each element of the array. This function accepts up to three arguments:

currentValue: the current element being processed in the array. It is required.
index: the index of the current element. It is optional.
array: the array itself. It is optional.

Task 14: Refer to task 3; display colors array elements using forEach().

var colors = ["red", "green", "white", "black"];
colors.forEach(function(current){
  console.log(current);
});

The result is as follows:

red
green
white
black

Task 15: Refer to task 4; display items array elements using forEach().

var items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
items.forEach(function(item){
  console.log(item);
});

The result is as follows:

item1
item2
item3
item4
item5
item6
item7
item8

Task 16: Refer to task 5; display thingsToDo array elements using forEach().

var thingsToDo = ["meditate", "go to gym", "watch a video", "have a healthy meal"];
thingsToDo.forEach(function(thing){
  console.log(thing);
});

The result is as follows:

meditate
go to gym
watch a video
have a healthy meal

Task 17: Refer to task 6; display thingsToBuy array elements using forEach() and the arrow function.

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
thingsToBuy.forEach(thing => console.log(thing));

The result is as follows:

papers
bread
2 pencils
perfume
milk

Task 18: Display the index and the value of every element in the array below. Use forEach method.

var days =  ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

days.forEach(function(day, dayIndex){
   console.log(dayIndex, day);
});

The result is as follows:

0 "Sunday"
1 "Monday"
2 "Tuesday"
3 "Wednesday"
4 "Thursday"
5 "Friday"
6 "Saturday"

Task 19: Re-do task 18 using the arrow function.

var days =  ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

days.forEach((day, dayIndex) => console.log(dayIndex, day));

The result is as follows:

0 "Sunday"
1 "Monday"
2 "Tuesday"
3 "Wednesday"
4 "Thursday"
5 "Friday"
6 "Saturday"

Task 20: Display the elements of the array below using forEach and the arrow function.

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];

months.forEach(month => console.log(month));

The result is as follows:

January
February
March
April
May
June
July
August
September
October
November
December

Task 21: Refer to task 19; what is the return value of days.forEach()

var days =  ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var forEachReturn = days.forEach((day, dayIndex) => console.log(dayIndex, day));

console.log(forEachReturn);

The result is as follows:

0 "Sunday"
1 "Monday"
2 "Tuesday"
3 "Wednesday"
4 "Thursday"
5 "Friday"
6 "Saturday"
undefined

Task 22: Refer to task 20; what is the return value of months.forEach()

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October', 'November', 'December'];

var forEachReturn = months.forEach(month => console.log(month));

console.log(forEachReturn);

The result is as follows:

January
February
March
April
May
June
July
August
September
October
November
December
undefined

array.forEach()

The return value of array.forEach() is undefined

Many ways to display array items!!

Yes, there are many ways to display array items. Just use whichever of those methods you are comfortable with.

To me, it seems for...of loop is the easiest, and the most convenient.