JS Arrays

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Arrays

An array is a special variable, holding more than one value:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id=”demo”></p>

<script>

const cars = [“Saab”, “Volvo”, “BMW”];

document.getElementById(“demo”).innerHTML = cars;

</script>

</body>

</html>

Output

JavaScript Arrays

Saab,Volvo,BMW

Why Use Arrays?

A list of items (a list of car names, for example), stores the cars in single variables that appears like this:

let car1 = “Saab”;

let car2 = “Volvo”;

let car3 = “BMW”;

To loop through the cars and find a specific one. And if you had not 3 cars, but 300?

The solution is an array.

An array stores many values under a single name, and access the values by referring to an index number.

Creating an Array

An array literal is the easiest way to create a JavaScript Array.

Syntax:

const array_name = [item1, item2, …];     

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id=”demo”></p>

<script>

const cars = [“Saab”, “Volvo”, “BMW”];

document.getElementById(“demo”).innerHTML = cars;

</script

</body>

</html>

Output

JavaScript Arrays

Saab,Volvo,BMW

Spaces and line breaks are not important. A declaration is used span multiple lines:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id=”demo”></p>

<script>

const cars = [

  “Saab”,

  “Volvo”,

  “BMW”

];

document.getElementById(“demo”).innerHTML = cars;

</script>

</body>

</html>

Output

JavaScript Arrays

Saab,Volvo,BMW

Creating an array, and then provide the elements:

Example

<!DOCTYPE html>

<html>

<body

<h2>JavaScript Arrays</h2>

<p id=”demo”></p>

<script>

const cars = [];

cars[0]= “Saab”;

cars[1]= “Volvo”;

cars[2]= “BMW”;

document.getElementById(“demo”).innerHTML = cars;

</script>

</body>

</html>

Output

JavaScript Arrays

Saab,Volvo,BMW

Using the JavaScript Keyword new

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id=”demo”></p>

<script>

const cars = new Array(“Saab”, “Volvo”, “BMW”);

document.getElementById(“demo”).innerHTML = cars;

</script>

</body>

</html>

Output

JavaScript Arrays

Saab,Volvo,BMW

Accessing Array Elements

Accessing an array element by referring to the index number:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id=”demo”></p>

<script>

const cars = [“Saab”, “Volvo”, “BMW”];

document.getElementById(“demo”).innerHTML = cars[0];

</script>

</body>

</html>

Output

JavaScript Arrays

JavaScript array elements are accessed using numeric indexes (starting from 0).

Saab

Changing an Array Element

This statement is used to change the value of the first element in cars:

cars[0] = “Opel”;

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id=”demo”></p>

<script>

const cars = [“Saab”, “Volvo”, “BMW”];

cars[0] = “Opel”;

document.getElementById(“demo”).innerHTML = cars;

</script>

</body>

</html>

Output

JavaScript Arrays

JavaScript array elements are accessed using numeric indexes (starting from 0).

Opel,Volvo,BMW

Access the Full Array

With JavaScript, the full array are also accessed by referring to the array name:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2

<p id=”demo”></p>

<script>

const cars = [“Saab”, “Volvo”, “BMW”];

document.getElementById(“demo”).innerHTML = cars;

</script>

</body>

</html>

Output

JavaScript Arrays

Saab,Volvo,BMW

Arrays are Objects

Arrays are a special type of object. The typeof operator in JavaScript returns “object” for arrays

Arrays use numbers to access their “elements”. In this example, person[0] returns John:

Array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

<p id=”demo”></p>

<script>

const person = [“John”, “Doe”, 46];

document.getElementById(“demo”).innerHTML = person[0];

</script>

</body>

</html>

Output

JavaScript Arrays

Arrays use numbers to access its elements.

John

Objects use names to access its “members”. In this example, person.firstName returns John:

Object:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>JavaScript uses names to access object properties.</p>

<p id=”demo”></p

<script>

const person = {firstName:”John”, lastName:”Doe”, age:46};

document.getElementById(“demo”).innerHTML = person.firstName;

</script>

</body>

</html>

Output

JavaScript Objects

JavaScript uses names to access object properties.

John

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   // Returns the number of elements

cars.sort()   // Sorts the array

The length Property

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>The length property returns the length of an array.</p>

<p id=”demo”></p>

<script>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits.length;

</script>

</body>

</html>

Output

JavaScript Arrays

The length property returns the length of an array.

4

Accessing the First Array Element

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id=”demo”></p>

<script>

const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits[0];

</script>

</body>

</html>

Output

JavaScript Arrays

JavaScript array elements are accesses using numeric indexes (starting from 0).

Banana

Accessing the Last Array Element

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id=”demo”></p>

<script>

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

document.getElementById(“demo”).innerHTML = fruits[fruits.length-1];

</script>

</body>

</html>

Output

JavaScript Arrays

JavaScript array elements are accesses using numeric indexes (starting from 0).

Mango

Looping Array Elements

One way to loop through an array, is using a for loop:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>The best way to loop through an array is using a standard for loop:</p>

<p id=”demo”></p>

<script>

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>”;

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Arrays

The best way to loop through an array is using a standard for loop:

  • Banana
  • Orange
  • Apple
  • Mango
  • Adding Array Elements

    The best method to add a new element to an array is using the push() method:

    Example

    <!DOCTYPE html>

    <html>

    <body>

    <h2>JavaScript Arrays</h2>

    <p>The push method appends a new element to an array.</p>

    <button onclick=”myFunction()”>Try it</button>

    <p id=”demo”></p>

    <script>

    const fruits = [“Banana”, “Orange”, “Apple”];

    document.getElementById(“demo”).innerHTML = fruits;

    function myFunction() {

      fruits.push(“Lemon”);

     document.getElementById(“demo”).innerHTML = fruits;

    }

    </script>

    </body>

    </html>

    Output

    JavaScript Arrays

    The push method appends a new element to an array.

    Associative Arrays

    Many programming languages support arrays that have named indexes.

    Arrays consisting of named indexes are called associative arrays (or hashes).

    JavaScript does not support arrays with named indexes

    In JavaScript, arrays use numbered indexes. 

    Example

    <!DOCTYPE html>

    <html>

    <body>

    <h2>JavaScript Arrays</h2>

    <p id=”demo”></p>

    <script>

    const person = [];

    person[0] = “John”;

    person[1] = “Doe”;

    person[2] = 46;

    document.getElementById(“demo”).innerHTML =

    person[0] + ” ” + person.length;

    </script>

    </body>

    </html>

    Output

    JavaScript Arrays

    John3