❮❮ PREV NEXT ❯❯

JAVASCRIPT - ARRAYS

A Array is a Collection that holds multiple values, of different Data Types. And in a Array the elements are ordered (We will explain it soon), the values are changeable and allows duplicate values.

The declaration of a Array Data Type is super easy. You can place multiple values inside square brackets [] and JavaScript will understand that it is a Array.

Creating a Array with values of different Data Types

Example :

<html>
<body>  
<script>

	var x = [5, "John", "JavaScript"]
	document.write(x) 
    
</script>      
</body>
</html>

Output :

5,John,JavaScript

So, in the above code we have created a Array using square brackets [].

And put an Integer type value (i.e. 5) and two String type value (i.e. John and JavaScript)

x = [5, "John", "JavaScript"]

And initialised to the variable x.

So, we can see that two different data types are assigned to a Array.

In the next line we have printed the Array using the document.write statement.

document.write(x)

Now, if we see the output,

Output :

5,John,JavaScript

An Array can also be declared using new Array().

Declaring Array using new Array()

Example :

<html>
<body>  
<script>

	var x = new Array(5, "John", "JavaScript")
	document.write(x) 
    
</script>      
</body>
</html>

Output :

5,John,JavaScript

Note : It is better to avoid creating Arrays using new Array().

Iterating a Array using for of loop

Example :

<html>
<body>  
<script>

	var x = [5, "John", "JavaScript"]
	for (i of x) {
		document.write(i, "<br>")
	}
    
</script>      
</body>
</html>

Output :

5
John
JavaScript

Similarly, in the above code we have created a Array using square brackets [].

x = [5, "John", "JavaScript"]

And initialised to the variable x.

In the next line we have used the for loop to Iterate through the Array.

for (i of x) {
	document.write(i, "<br>")
}

Now, if we see the iterations of for loop,

for (i of x)

1st Iteration

In the first Iteration the first value of the Array x (i.e. 5) is taken and put into the variable i.

And the document.write statement, prints the value of i.

Output :

2nd Iteration

Similarly, in the second Iteration the second value of the Array x (i.e. John) is taken and put into the variable i.

And the document.write statement, prints the value of i.

Output :

5
John

3rd Iteration

Similarly, in the third Iteration the third value of the Array x (i.e. JavaScript) is taken and put into the variable i.

And the document.write statement, prints the value of i.

Output :

5
John
JavaScript

Now, if you see the final output. You can find that the values of the Array are displayed in the same way they were inserted.

i.e. First 5 is printed, then the name John and finally JavaScript is printed.

And if you see the Array,

x = [5, "John", "JavaScript"]

It is printed in the same order it was inserted. And this is why a Array is said to be Ordered.

Next, let us see, how to access the elements of the Array in the next tutorial.

Iterating a Array using for in loop

Let's say, we have an Array that stores the Cities.

And as we know, square brackets [] are used to represent an Array.

cities = ["Mumbai", "Paris", "London"]

Now, if we want to Iterate through the above Array using for loop.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	cities = ["Mumbai", "Paris", "London"]
	for (i in cities) {
		document.write(cities[i], "<br/>")  
    }    
    
</script>      
</body>
</html>

Output :

Mumbai
Paris
London

So, if we look at the above code, the for loop,

for (i in cities) {
	document.write(cities[i], "<br/>")
}

Gets the values from the cities Array.

And in each Iteration, prints the value of x.

❮❮ PREV NEXT ❯❯