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>
    An index is a integer value that alwayse start from 0 for an array and goes upto n-1 (n is total number of elements of array).

    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.

    People are also reading: