JavaScript Arrays

Arrays in JavaScript are used to store multiple values using a single variable name. In this JavaScript tutorial, you will learn how to create and use Arrays in JavaScript.

What are Arrays?

An array is a collection of multiple values under a single variable name. In the previous tutorials, we learned about JavaScript primitive data types such as string, number, and booleans, where we can only assign a single value to a variable.

Example

let student1 = "Rahul";   // primitive string
let student2 = "Ravi";     // primitive string
let student3 = "Rohan";    // primitive string

In this example, to represent 3 students, we used 3 different variable names. However, there is no problem with specifying 3 variables' names for 3 different values. But let say if we have 500 students, we can also define 500 variable names for individual students, but it would not be a good way of coding. Instead, it would be a good practice to use a data structure-like array that can store similar type values under a single variable name.

Create Array in JavaScript

There are two ways to create an array variable in JavaScript.

• Using square brackets
• Using Array() object

Create Array using Square bracket

Similar to a normal variable declaration to declare or create an array, we use the variable name followed by the assignment operator and store all the values inside the square bracket [] and separate the values by commas. Syntax

var|let|const  variable_name = [value1, value2, value3]

Example

let students = ["Ravi", "Rahul", "Rohan"];

White space and line break between two array values have no importance on the array data structure. We can also represent the array in multiple lines.

let students = ["Ravi",
                 "Rahul", 
                 "Rohan"];

Create Array using Array() object

JavaScript also provides a dedicated Array() object to create an array data structure. To create an Array using Array() object, we use the new keyword followed by the Array() object and pass all the values as the parameters in the Array() .

Syntax

let|var|const array_name = new Array(value1, value2, value3....)

Example

let students = new Array("Ravi", "Rahul", "Rohan");

We can either use the square bracket notation or Array() object to create an array both will do the trick. But for fast perfromance and better readability we alwyse use the square bracket notation to create an array.

Access Array elements

The values stored inside the array are also known as array elements. And the array store all of its elements in the sequential order as they defined during creation. To store all the elements sequentially array assigned index number to every element starting from 0 to n-1 , where n represents the total number of elements present in the array. And using the corresponding index number we can access the individual element from the array. To access the array element we use the array name followed by the square bracket and pass the element index value in the square bracket.

Syntax

array_name[index]

Example

<script>
    let students = ["Ravi", "Rohan", "Rahul"];
    console.log(students[0]);   // Ravi
    console.log(students[1]);   // Rohan
    console.log(students[2]);   // Rahul
</script>

Updating/Changing array element

We know how to access individual array elements using their index value, now we can change or update the value using the same syntax. Similar to the variable initialization we can change the value of an element inside the array. First, we access the array element using the square bracket notation then assign a new value to it using the assignment operator.

Syntax

array_name[index] = new value;

Example

<script>
    let students = ["Ravi", "Rohan", "Rahul"]

    // before changing value
    console.log(students[0]);   // Ravi

    students[0] = "Ravi Singh";  // change first value

    // after changing value
    console.log(students[0]);   // Ravi Singh

</script>

Access the complete array

Using the index number we can access the individual element from the array, but if you want to access the complete array or want to display all the elements of the array. For that, you can simply use the array name. Example

<script>
    let students = ["Ravi", "Rohan", "Rahul"]; 
    console.log(students);   //["Ravi", "Rohan", "Rahul"]
</script>

Array are Objects

An array is nothing but an object, whether we use the square bracket notation or Array() object to create an array both the structures will be treated as an object. To see the data type of array we can use the typeof operator on the variable and in return we get the object .

Example

let array = [1, 3, 5, 7, 9];

typeof array; // object

This makes sense when we look at an array data structure as a pair of index:values that resemble the structure of objects as name:value pair.

Example

<script>

    let arr_students = ["Ravi", "Rohan", "Rahul"];
    let obj_students = {0:"Ravi", 1: "Rohan", 2:"Rahul"};

    console.log( arr_students ==  obj_students );  //false
    console.log(typeof arr_students == typeof obj_students );  //true

</script>

Although both arr_studnets and obj_studnets are not the same, but both will do the same trick, and have the same data type.

Difference between JS Arrays and Objects

• An array is a special object which has numbered indexes.
• An object can have either numbered or named indexes.
• An array is used to collect different data values.
• An object is used to represent an entity in JavaScript.

Summary

• A JS array is used to store multiple values under a single variable name.
• To create an array we can either use the square notation or Array() object.
• Array assigns a unique index number to every element according to its order.
• The first element has the 0 index number and the last element has n-1 index number.