JavaScript Arrays
Creating an Array
JavaScript arrays are used to store multiple values in a single variable.An array is a special variable, which can hold more than one value at a time.An array can hold many values under a single name, and you can access the values by referring to an index number.
JavaScript Arrays
Using an array literal is the easiest way to create a JavaScript Array. Spaces and line breaks are not important. A declaration can span multiple lines:
var cars = ["Saab", "Volvo", "BMW"];
Using the JavaScript Keyword new
The following example also creates an Array, and assigns values to it:
There is no need to use new Array(). For simplicity, readability and execution speed, use the first one (the array literal method).
var cars = new Array("Saab", "Volvo", "BMW");
Access the Elements of an Array
You access an array element by referring to the index number.This statement accesses the value of the first element in cars:
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
Changing an Array Element
This statement changes the value of the element in array:
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];
Access the Full Array
With JavaScript, the full array can be accessed by referring to the array name:
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Arrays are Objects
Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.
var person = ["John", "Doe", 46];
Objects use names to access its "members". In this example, person.firstName returns John:
var person = {firstName:"John", lastName:"Doe", age:46};
Array Elements Can Be 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:
Array Properties and Methods
The real strength of JavaScript arrays are the built-in array properties and methods:
var x = cars.length; // The length property returns the number of elements
var y = cars.sort(); // The sort() method sorts arrays
The length Property
The length property of an array returns the length of an array (the number of array elements). The length property is always one more than the highest array index.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];
Looping Array Elements
The safest way to loop through an array, is using a for loop.
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "";
for (i = 0; i < fLen; i++) {
text += "" + fruits[i] + "";
}
text += "";
You can also use the Array.forEach() function
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "";
fruits.forEach(myFunction);
text += "";
function myFunction(value) {
text += "" + value + "";
}
Adding Array Elements
The easiest way to add a new element to an array is using the push() method:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits
Adding elements with high indexes can create undefined "holes" in an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon"; // adds a new element (Lemon) to fruits
Associative Arrays
Many programming languages support arrays with named indexes. Arrays with named indexes are called associative arrays (or hashes).JavaScript does not support arrays with named indexes. In JavaScript, arrays always use numbered indexes.
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length will return 3
var y = person[0]; // person[0] will return "John"
If you use named indexes, JavaScript will redefine the array to a standard object. After that, some array methods and properties will produce incorrect results.
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will return 0
var y = person[0]; // person[0] will return undefined
The Difference Between Arrays and Objects
In JavaScript, arrays use numbered indexes In JavaScript, objects use named indexes. Arrays are a special kind of objects, with numbered indexes.When to Use Arrays. When to use Objects.
- JavaScript does not support associative arrays.You should use objects when you want the element names to be strings (text).
- You should use arrays when you want the element names to be numbers.
Avoid new Array()
There is no need to use the JavaScript's built-in array constructor new Array(). Use [] instead.
var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10]; // Good
How to Recognize an Array
A common question is: How do I know if a variable is an array? The problem is that the JavaScript operator typeof returns "object". The typeof operator returns object because a JavaScript array is an object.
To solve this problem ECMAScript 5 defines a new method Array.isArray(). The problem with this solution is that ECMAScript 5 is not supported in older browsers.
Array.isArray(fruits); // returns true
To solve this problem you can create your own isArray() function.
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
The instanceof operator returns true if an object is created by a given constructor.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array; // returns true
