JavaScript Array Method

    In the previous tutorial, we learned about JavaScript arrays and how to define them using square bracket notation and Array() object. We also learned that Array is a special JS object, and like other objects Array also comes with some inbuilt methods and properties. And in this tutorial, we will learn some of the most important Array methods and properties.

    Find the JS array length

    Array supports the length property that returns the total number of elements present in the array. Syntax

    array_name.length

    Example

    <script>
        let array0 = []; //empty array
        let array1= ["Ravi", "Rahul"];
        let array2 = [true, false, 0,1, "zero",  "one"]
    
        console.log(array0.length );  //0
        console.log(array1.length );  //2
        console.log(array2.length)     // 6
    </script>

    Convert JS array to string

    With the help of toString() method, we can convert an array to a comma-separated string. Syntax

    array_name.toString()
    

    Example

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

    JS also supports the join() method that joins all the array elements as a string with a specified separator. Syntax

    array_name.join(separator)

    Example

    <script>
        let array= ["Ravi", "Rahul", "Rohan"];
    
        console.log(array.join("-") );  //Ravi-Rahul-Rohan
        console.log(array.join("*"));   //Ravi*Rahul*Rohan
    </script>

    Pushing and Popping Elements

    While working with the array, we came across the cases where we want to add and remove elements between the array.

    pop() method

    Using the pop() method we can remove the last element from the array. The pop() method not only removes the last element but also returns it. syntax

    array_name.pop()

    Example

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

    push() method

    The push() method is used to add new elements at the last of the array. syntax

    array_name.push(new_element)

    Example

    <script>
        let array= ["Ravi", "Rahul", "Rohan"];
        popped = array.push("Rakesh");  
        console.log(array);     //["Ravi", "Rahul", "Rohan", "Rakesh"]
    </script>

    shift() method

    The shift() shift all the elements of the array to one index toward the left and remove the first value. syntax

    array_name.shift()

    Example

    <script>
        let array= ["Ravi", "Rahul", "Rohan"];
        removed = array.shift(); 
        console.log(removed)   //Ravi
        console.log(array);     //["Rahul", "Rohan"]
    </script>
    The shift() method is used to remove the first element of the array.

    unshift() method

    The unshift() method is used to add a new element at the beginning of the array. syntax

    array_name.unshift()

    Example

    <script>
        let array= ["Ravi", "Rahul", "Rohan"];
        removed = array.unshift("Rakesh"); 
        console.log(array);    //["Rakesh", "Ravi", "Rahul", "Rohan"]
    </script>

    Delete an element from the array

    To delete an element from the array we can use the delete keyword. syntax

    delete array_name[index]

    Example

    <script>
        let array= ["Ravi", "Rahul", "Rohan"];
        delete array[0] ;   // delete first element 
    
        console.log(array);     //[empty, "Rahul", "Rohan"]
    </script>
    The delete keyword-only deletes the element by leaving the place empty or undefined and maintain the array length. So it would be a good practice to use pop() or shift() to delete elements.

    JS array splice() method

    The splice() method is used to add and remove elements from the array at the same time. syntax

    array_name.splice(insert_index, delete_element, new_values1, new_value2)

    The splice() method can accept 3. insert_index represent the starting index value from where the new elements should be inserted. delete_elements represent the number of elements that should be deleted, after the specified index value. The rest of the parameters new_value1 , new_value2 represent the new values that should be added to the array. Example

    <script>
        let array= ["Ravi", "Rahul", "Rohan"];
        removed = array.splice(1, 0, "new value1", "new value2");
        console.log(array);     //["Ravi", "new value1", "new value2", "Rahul", "Rohan"]
    </script>

    Merge two arrays in JavaScript

    To add/merge or concatenate two arrays we can use the array concat() method. syntax

    array_name1.concat(array_name2);

    Example

    <script>
        let sectionA =["Ravi", "Rahul", "John"];
        let sectionB = ["Rahul", "Rohan", "kate"]
    
        let all_students = sectionA.concat(sectionB); //merge sectionA and sectionB
        console.log(all_students); //["Ravi", "Rahul", "John", "Rahul", "Rohan", "kate"]
    </script>

    JS Array Slicing

    The slice() method is used to slice out a subarray from an array. The slice() method does not remove any element from the array, it just returns a new subarray of the existing array. Syntax

    array_name.slice(start_index, end_index)

    The slice method can accept two optional parameters. start_index represent the starting index point from where the slicing should start. end_index represent the end index point up to which the slicing should perform. The end_index point is excluded, which means the ending index value does not slice. both the parameters start_index and end_index are optional, by default their value is 0 and n-1 (n is the total number of elements present in the array) respectively. Example

    <script>
        let studnets =["Ravi", "Rahul", "John", "Rohan", "Smith"];
        console.log(studnets.slice(1,3));  // ["Rahul", "John"]
        console.log(studnets.slice(2));    //["John", "Rohan", "Smith"]
    </script>

    Summary

    These are some of the most important array methods that we often used while working with JS array. There are many other methods supported by the JS array that we will discuss in further tutorials, it is impossible to learn every method and property supported by an individual data structure or data type, but with practice, we came across the important ones. People are also reading: