JavaScript

Arrays

Arrays#


Arrays allow us to store a comma separated set of values. Array is an indexed collection. that can contain any combination of data types (numbers, booleans, strings, undefined, objects, regular expression ...), e.g: var myMix = [ "hello", 5, {}, true ];

Arrays are objects and they are referenced types. This means that when we assign one array to another, we assign a pointer to the array.

Arrays have many built in functions. See MDN Arrays for more details.

Displaying Arrays

<p id="demo"></p>
<script>
    var cars = [ "Suzuki", "Volvo", "BMW" ];
    document.getElementById( 'demo' ).innerHTML = cars;
</script>

Spaces and line breaks are not important. A declaration can span multiple lines:
Example:

var cars = [
    "Suzuki",
    "Volvo",
    "BMW"
];

Using Keyword new

The following example also creates an Array, and assigns values to it:
Example:

var cars = new Array( "Suzuki", "Volvo", "BMW" );

There is no need to use the JavaScript's built-in array constructor new Array().Use [] instead.

Array with Different Objects

JavaScript variables can be objects. Arrays are special kinds of objects. Because of this, you can have variables of different types in the same Array. You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array:

myArray[ 0 ] = Date.now;
myArray[ 1 ] = myFunction;
myArray[ 2 ] = myCars;

Length Property

The length property of an array returns the length of an array (the number of array elements).
Example:

var fruits = [ "Banana", "Orange", "Apple", "Mango" ];
fruits.length;     // the length of fruits is 4

Adding Array Elements

The easiest way to add a new element to an array is using the push method:
Example:

var fruits = [ "Banana", "Orange", "Apple", "Mango" ];
fruits.push( "Lemon" );  // adds a new element (Lemon) to fruits
fruits[ fruits.length ] = "Lemon";  // adds a new element (Lemon)

Looping Array Elements

There are many different kinds of loops, but they all essentially do the same thing: they repeat an action some number of times (and it's actually possible that number could be zero). The various loop mechanisms offer different ways to determine the start and end points of the loop. There are various situations that are more easily served by one type of loop over the others.

The classic (and possible the fastest) way to loop through an array, is using a "for" loop:
Example:

var index;
var fruits = [ "Banana", "Orange", "Apple", "Mango" ];
for ( index = 0; index < fruits.length; index++ ) {
    text += fruits[ index ];
}

Array Methods

There are many methods (object functions) on arrays. The most popular are:

There are also concat, join, toString, slice, splice, reverse, sort ....

Note that push/pop/shift/unshift/splice methods mutate arrays — which is not best practice. To ensure arrays don’t mutate, use slice and concat over these five methods.

Example:

// add to the end of an array and get the updated array length
var newLength = friends.push( "Ron" );
newLength = friends.push( "Rani", "Tania" );

See Arrays Methods for the complete list. See also 9 New Array Functions in ES6.