Javascript Arrays

In this post, you will be learning about Javascript array.

Arrays are a special variable that stores more than one value at a time. We can use an array when we want to store multiple related values in the same place. One advantage of using an array is it makes it easy to loop through all the value.

Javascript Code var colors = [“red”, “orange”, “yellow”, “green”];

In a common array we can access them using an index.

Syntax The syntax of how to create an array. var array_name = [element1,element2,element3…]

Javascript Code var colors = Array(“red”, “orange”, “yellow”, “green”);

You can use new Array() instead of the square brackets.

Changing Elements In An Array

Javascript Code

var colors = ["red", "orange", "yellow", "green"];
colors[1] = "blue";

Accessing Elements

You can access an element using its index number. By default the first index number is 0, the second is 1, etc.

Javascript Code

var colors = [“red”, “orange”, “yellow”, “green”]; document.write(color[1]);

Here in our example when we access the array.

Result

Arrays Are Objects Javascript Code

var person = ["John", "Smith", "22"]

Arrays are technically objects. When you check an array via typeof, it returns a type of object. However, you are better thinking arrays are array rather than objects.

The reason is that arrays access values using index numbers.

Objects access values using names. Below is the example written as an object

Javascript Code

var person = ["firstname": "John", "lastname":"Smith", "age":"22"];

Built in Arrays Functions

Arrays come with a number of built-in factions.

Length You can use length you can use find number of elements.

Javascript Code

var fruits = ["Apples", "Orange", "Grape", "Blueberry", "Kiwi"];
fruits.length;   // the length of fruits is 5

Result

Accessing the First and Last Element Can access the first element of the last element below with the appropriate index number (0 and the length of the array minus 1).

Looping through an array Javascript Code

var fruits, text, flength, i;
fruits = ["Appple", "Pear", "Orange", "Plum"];
flength = fruits.length;
text = "<ul>";
for (i = 0; i < flength; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Result

Adding New Element Javascript Code

var fruits = ["Apple", "Orange", "Pears", "Plums"];
fruits.push("Blueberry");

Result

An alternative syntax is to use fruits.length as the index value for the new element.

Javascript Code

var fruits = ["Apple", "Orange", "Pears", "Plums"];
fruits[fruits.length]= "Blueberry";

Result

Associative Arrays

Javascript doesn’t cover associative arrays. The keys must always be numbers.

Javascript Code

var person = ["John", "Smith", "46"];
person[0]
person[1];
person[2];
person.length;

Difference between arrays and objects Objects use named index. Array use number index.

Do not use new Array() Instead declare your array as a [] square bracket.

Javascript Code

var a = new Array("a", "b", "c", "d", "e");