DONATE  
MENU
MYSQL
PHP
CSS
JSON
AJAX
JAVASCRIPT
HTML

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Arrays » Looping Arrays
Share Tweet WhatsApp

Looping Arrays

Looping is the continuous execution of a code block until a condition is met. Looping of arrays is the process of continuously executing statements that will help us access or perform operations with more than one value of an array until a condition is met e.g after accessing all values of the array we want. For example, you can loop through or access all the values of an array to compare and get the highest or lowest value if it contains numbers. How Looping Arrays Work We have previously learnt that looping is the continuous execution of a code block. For example, I can create a loop containing a statement to add a value to a particular number 10 times. When we loop arrays, we are accessing the individual values separately and continuously. If properly built, the loop will access the first value, run again to access the second and so on till a specified condition is met e.g after accessing all values. How To Loop Array Objects To loop through an array, we can either use the for loop statement(Recommended & widely used) or the while loop statememt(Not recommended). You had previously learnt about the for loop here and the while loop here. PROCEDURE FOR LOOPING ARRAYS (FOR LOOP)
  1. Create array.
  2. Find the length of the array: This can be done by accessing the length property of the array object.
  3. Declare and assign zero(0) to the for loop's initialized variable (e.g var i = 0;) so that for the first loop execution, the initialized variable will be 0 and can therefore serve as an index number in getting or accessing the first value of the array since arrays' index numbers start from 0.
  4. So basically, the initialized variable should be assigned the index number of the array value to start accessing from e.g 5 to start from the sixth value.
  5. The for loop's condition should be initialized variable less than array length (e.g i < array.length;). This means that while our array length may be 5 (human perspective) for example, array length for JavaScript is 4 (0, 1, 2, 3, 4). So, our loop should run five times with initialized variable from 0 to 4 in order to get all five values.
  6. Increase initialized variable (e.g i++). It may be a decrement(i--) though depending on how you are trying to access the values.
  7. Finally, use the initialized variable (i) as index number to access array values in the for loop's code block (e.g array[i]). So that whenever the loop executes and, i is 0 - FIRST LOOP - We have access to first array value. when i becomes 1 - SECOND LOOP - We have access to the second array value. And so on.
EXAMPLE (FOR LOOP)
<script>
//THE ARRAY
var array = [1, 4, 7];

//THE ARRAY LENGTH
var len = array.length; //value will be 3

//The initialized variable started from 0 cause we want to start accessing from the first array value

for (var i = 0; i < len; i++){
//"i" which contains a number can now be use as index number to access the array each time it runs
alert(array[i]);
}
</script>

Copy PRACTICE IT

<script>

//THE ARRAY
var arr = [200, 55, 63, 1000, 32, 1];

//THE ARRAY LENGTH
var len = arr.length;
var max = arr[0];
for (var i = 0; i < len; i++){
//WE CAN NOW ACCESS ALL THE VALUES HERE
if (arr[i] > max){
max = arr[i];
}
}
alert("The maximum is "+max);
</script>

Copy PRACTICE IT

Above, we want to find the highest value in an array while we loop. Before the loop, we assigned the first value(200) of the array to a variable (max). While the loop is running and for each of the individual executions of the loop, we check if the accessed value in the array is greater than the value of the variable (max). If the value is greater, the variable (max) is then assigned or carries that value and continues till the loop ends. LOOPING ARRAYS WITH THE WHILE STATEMENT
<script>
//THE ARRAY
var array = [1, 8, 3];

//array length
var len = array.length;

//"i" will serve as the array index
//"i" will increase every time the loop runs
//"i" is assigned 0 so that we start accessing from first array value
var i = 0;

while (i < len){
alert(array[i]);
i++; //increases "i" every time a particular loop is about to finish execution
}
</script>

Copy PRACTICE IT

LOOP ARRAYS STARTING WITH LAST VALUE In the various examples above, we looped arrays starting with the first values. Below is an example to loop arrays starting with the last value, FOR LOOP
<script>
//THE ARRAY
var arr = ["Stack", "Beginner","Developer"];

//The length
var len = arr.length;

//"i" will be initialized with the array length - 1
//This is because,
//if array length is 4, the array last index is 3 (0, 1, 2, 3)
//when we initialize i with array length - 1, we get the last array value first
//The condition is that i is greater than or equal to 0 so that the loop continues whenever i is still greater than or equal to 0
//We decrease i to meet up with the condition 3 -> 2 -> 1 -> 0

for (var i = len - 1; i >= 0; i--){
alert(arr[i]);
}
</script>

Copy PRACTICE IT

WHILE LOOP EQUIVALENT
<script>
//THE ARRAY
var arr = ["stack","beginner","developer"];

//THE LENGTH
var len = arr.length;

//"i" is initialized with array length - 1 to enable us get first value
var i = len - 1;

while (i >= 0){
alert(arr[i]);
i--; //Decrease i to meet up with condition
}
</script>

Copy PRACTICE IT

SUMMARY
  1. Since looping is the continuous execution of a code block, , we can therefore use the technique to continuously access more than one value of an array.
  2. With proper statements, we can use the for loop and while loop in looping arrays.
  3. While looping arrays, we not only access the values but we can also use them for whatever operations.
Take a short quiz on Looping Arrays.
Ask a question or tell us if Looping Arrays is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode