JavaScript Array For Loop
Javascript Array For Loop : Javascript Array is basically a variable which is capable of storing the multiple values inside it. Javascript array plays important role when dealing with to store multiple values. You can create array simply as – var arrayName = [] . In this tutorial we are going to explain how you can create array and access it’s element. For loop is used to access the array elements in javascript. We will explain the for loop with example and demo so that we can understand how it works.
Javascript Array For Loop
Let us go step by step to understand the JavaScript Array-
JavaScript Create Array-
You can create Array in Javascript As Below-
Javascript Array For Loop:
<script type="text/javasctipt"> var myArray = ["10","11","20","23","98","101"]; </script> |
var myArray = []; is used to declare an array in javascript. If you want to add the default element in array you can add as above. if you want want to add the more items rather than the default array items use the .push(value) for example – myArray.push(“200”) it will add a new element at the end of the javascript array. splice() method is used to delete the item from array.
If you run the above example it will give the output something like this –
The alert message will show the items of array myArray. Npw let us access the array items using the loops.
Access Array Elements Using For Loop
Array elements are accessed using for loop in javascript. The most common and simple method is use for loop to access array items.
Javascript Array For Loop: Example
<script type="text/javasctipt">
function getAllItems(){
var myArray = ["10","11","20","23","98","101"];
for(i=0; i< myArray.length; i++){
document.Write(myArray[i]+"<br>");
}
}
</script>
|
The above example will give you array elements individually. We create for loop which will run for i = 0 to i< length of array(myArray.length is used to get the length of array). This loop will give the index of each item in array. myArray[i] gives the array item at i position. If you run the above example it will give the output something like this -
More About JavaScript Array
Let us learn more about the javascript array and it’s elements.
Access array element by index in JavaScript
If You Need to access javascript array Element by index you can access as below –
Access array element by index in JavaScript:
<script type="text/javasctipt">
function getAllItems(){
var myArray = ["10","11","20","23","98","101"];
alert(myArray[0]);
}
</script>
|
If you run above example it will give you first element of array.
The index and values for the above example be As-
- myArray[0] = 10
- myArray[1] = 11
- myArray[2] = 20
- myArray[3] = 23
- myArray[4] = 98
- myArray[5] = 101
Thus you can access any element if you know it’s index otherwise you can use loop to get all values from the array.
JavaScript Array For Loop Break
Break Statement is used to jump out from the loop. It will not iterate any more. This statement is used basically to stop the iteration it can be helpful when you need to come out from loop on the basis of certain condition. Here is an example of break statement in for loop-
JavaScript Array For Loop Break Example:
<script type="text/javasctipt">
function getAllItems(){
var myArray = ["10","11","20","23","98","101"];
for(i=0; i< myArray.length; i++){
document.write(myArray[i]+"<br>");
break;
}
}
</script>
|
The above example will run only once and jump out from the loop. It will give the array’s first element – ie. 10.
JavaScript Array For Loop Conditional Break Example
Sometimes we need to use the conditional break state ie. use break statement when certain condition is fulfilled. Let us go over with some common example.
JavaScript Array get Element up to nth index –
Suppose you want the array elements up to given index and jump out when nth index is achieved. Let us get the array item up to index 3 and then break the for loop.
JavaScript Array For Loop Break Example:
<script type="text/javasctipt">
function getAllItems(){
var myArray = ["10","11","20","23","98","101"];
for(i=0; i< myArray.length; i++){
document.Write(myArray[i]+"<br>");
if(i == 3){
break;
}
}
}
</script>
|
JavaScript Array Get last Element Example:
JavaScript Array element can be simply accessed using the last index of the array. Last index can be get simply from the array’s length ie. lastIndex = myArr.length-1;. Here is a simple example to get the last elemtnt from array in plain javascript.
JavaScript Array Get last Element Example:
<script type="text/javasctipt">
function getLastItem(){
var myArray = ["10","11","20","23","98","101"];
var lastIndex = myArray.length -1;
document.write("Last Element in this array is - "+myArray[lastIndex]);
}
</script>
|
lastIndex = myArray.length -1 will give you the last index of the array myArray. If you run the above example it will give the last element from javascript array ie. “101”
JavaScript Array Continue Statement Example:
Continue statement is specially used to skip the one iteration from the loop. It skips from the current iteration and continues for the other iteration. You can use the continue statement as below-
JavaScript Array Continue Example:
<script type="text/javasctipt">
function getAllItems(){
var myArray = ["10","11","20","23","98","101"];
for(i=0; i< myArray.length; i++){
if(i == 3){
continue;
}
document.write(myArray[i]+"<br>");
}
}
</script>
|
if you look at the above example we have added continue statement if the array index is 3 then continue it means when index value is 3 will skip from that point and it will go for next iteration and it will process all other elements in the array. So the above example will give you all elements of the array except the value at index 3. If you run the above example it will produce output like this-
In the above example we can clearly see that the value at the index 3 is skipped from the loop ie. 23 is not skipped from the iteration of the array. So it becomes very important when you are working with conditional access to the elements of the array. It can improve performance when the array size is large and you only need few elements from array based upon certain condition so while dealing with big javascript array you can use break and continue statement as per your requirement.
JavaScript Array Properties
JavsScript Array has following properties-
- constructor – It Returns the function which created prototype of the Array object.
- length – This returns the lenth of the array. This is also used to set or number of elements in an array.
- prototype – This Allows us to add methods and properties in an Array object.
We hope this article was useful. If you found this useful please give us like.
Advertisements
