JavaScript Arrays
An array is a special variable, which
can hold more than one value:
const cars = ["Saab", "Volvo", "BMW"];
Try it Yourself »
Why Use Arrays?
If you have a list of items (a list of car
names, for example), storing the cars
in single variables could look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
However, what if you want to loop
through the cars and find a specific
one? And what if you had not 3 cars,
but 300?
The solution is an array!
An array can hold many values under a
single name, and you can access the
values by referring to an index number.
Creating an Array
Using an array literal is the easiest way
to create a JavaScript Array.
Syntax:
const array_name = [item1, item2, ...];
It is a common practice to declare
arrays with the const keyword.
Learn more about const with arrays in
the chapter: JS Array Const.
Spaces and line breaks are not
important. A declaration can span
multiple lines:
You can also create an array, and then
provide the elements:
Example
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Try it Yourself »
Using the JavaScript
Keyword new
The following example also creates an
Array, and assigns values to it:
The two examples above do exactly the
same.
There is no need to use new Array().
For simplicity, readability and
execution speed, use the array literal
method.
Accessing Array Elements
You access an array element by
referring to the index number:
Note: Array indexes start with 0.
[0] is the first element. [1] is the second
element.
Changing an Array Element
This statement changes the value of
the first element in cars:
Converting an Array to a
String
The JavaScript method toString()
converts an array to a string of (comma
separated) array values.
Example
const fruits = ["Banana", "Orange",
"Apple", "Mango"];
document.getElementById("demo").in
nerHTML = fruits.toString();
Result:
Banana,Orange,Apple,Mango
Try it Yourself »
Access the Full Array
With JavaScript, the full array can be
accessed by referring to the array
name:
Example
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").in
nerHTML = cars;
Try it Yourself »
Arrays are Objects
Arrays are a special type of objects.
The typeof operator in JavaScript
returns "object" for arrays.
But, JavaScript arrays are best
described as arrays.
Arrays use numbers to access its
"elements". In this example,
person[0] returns John:
Objects use names to access its
"members". In this example,
person.firstName returns John:
Object:
const person = {firstName:"John",
lastName:"Doe", age:46};
Try it Yourself »
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:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Array Properties and
Methods
The real strength of JavaScript arrays
are the built-in array properties and
methods:
cars.length cars.sort()
Array methods are covered in the next
chapters.
The length Property
The length property of an array
returns the length of an array (the
number of array elements).
Example
const fruits = ["Banana", "Orange",
"Apple", "Mango"];
let length = fruits.length;
Try it Yourself »
The length property is always one
more than the highest array index.
Accessing the First Array
Element
Example
const fruits = ["Banana", "Orange",
"Apple", "Mango"];
let fruit = fruits[0];
Try it Yourself »
Accessing the Last Array
Element
Example
const fruits = ["Banana", "Orange",
"Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Try it Yourself »
Looping Array Elements
One way to loop through an array, is
using a for loop:
Example
const fruits = ["Banana", "Orange",
"Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
Try it Yourself »
You can also use the
Array.forEach() function:
Example
const fruits = ["Banana", "Orange",
"Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
Try it Yourself »
Adding Array Elements
The easiest way to add a new element
to an array is using the push()
method:
Example
const fruits = ["Banana", "Orange",
"Apple"];
fruits.push("Lemon");
Try it Yourself »
New element can also be added to an
array using the length property:
Example
const fruits = ["Banana", "Orange",
"Apple"];
fruits[fruits.length] = "Lemon";
Try it Yourself »
WARNING !
Adding elements with high indexes
can create undefined "holes" in an
array:
Example
const fruits = ["Banana", "Orange",
"Apple"];
fruits[6] = "Lemon";
Try it Yourself »
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.
Example
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; person[0];
Try it Yourself »
WARNING !!
If you use named indexes, JavaScript
will redefine the array to an object.
After that, some array methods and
properties will produce incorrect
results.
Example:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; person[0];
Try it Yourself »
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.
JavaScript new Array()
JavaScript has a built-in array
constructor new Array().
But you can safely use [] instead.
These two different statements both
create a new empty array named
points:
const points = new Array();
const points = [];
These two different statements both
create a new array containing 6
numbers:
const points = new Array(40, 100, 1, 5,
25, 10);
const points = [40, 100, 1, 5, 25, 10];
Try it Yourself »
The new keyword can produce some
unexpected results:
A Common Error
const points = [40];
is not the same as:
const points = new Array(40);
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":
const fruits = ["Banana", "Orange",
"Apple"];
let type = typeof fruits;
Try it Yourself »
The typeof operator returns object
because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5
(JavaScript 2009) defined a new
method Array.isArray():
Solution 2:
The instanceof operator returns
true if an object is created by a given
constructor:
const fruits = ["Banana", "Orange",
"Apple"];
(fruits instanceof Array);
Try it Yourself »
Nested Arrays and Objects
Values in objects can be arrays, and
values in arrays can be objects:
Example
const myObj = {
name: "John",
age: 30,
cars: [
{name:"Ford", models:["Fiesta",
"Focus", "Mustang"]},
{name:"BMW", models:["320", "X3",
"X5"]},
{name:"Fiat", models:["500",
"Panda"]}
]
}
To access arrays inside arrays, use a
for-in loop for each array:
Example
for (let i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "
</h1>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
Try it Yourself »
Complete Array Reference
For a complete Array reference, go to
our:
Complete JavaScript Array Reference.
The reference contains descriptions
and examples of all Array properties
and methods.
