JavaScript Basic Array Methods

It’s recommended to go through Arrays in JavaScript. We would be discussing the following array function:

Javascript Array.push() Method: Adding Element at the end of an Array. As arrays in JavaScript are mutable objects, we can easily add or remove elements from the Array. And it dynamically changes as we modify the elements from the array. 

Syntax :

Array.push(item1, item2 …)

Parameters: Items to be added to an array.

Example: In this example, we will be adding new elements such as some numbers and some string values to the end of the array using push() method.

JavaScript

<script>
    // Adding elements at the end of an array
    // Declaring and initializing arrays
    var number_arr = [ 10, 20, 30, 40, 50 ];
    var string_arr = [ "piyush", "gourav", "smruti", "ritu" ];

    // push()
    // number_arr contains [10, 20, 30, 40, 50, 60]
    number_arr.push(60);

    // We can pass multiple parameters to the push()
    // number_arr contains
    // [10, 20, 30, 40, 50, 60, 70, 80, 90]
    number_arr.push(70, 80, 90);

    // string_arr contains
    // ["piyush", "gourav", "smruti", "ritu", "sumit", "amit"];
    string_arr.push("sumit", "amit");

    // Printing both the array after performing push operation
    console.log("After push op " + number_arr);
    console.log("After push op " + string_arr);
</script>

Output:

After push op 10,20,30,40,50,60,70,80,90
After push op piyush,gourav,smruti,ritu,sumit,amit

JavaScript Array.unshift() Method: This method is used to add elements to the front of an Array.

Syntax :

Array.unshift(item1, item2 …)

Parameters: Items to be added to the array

Example: In this example, we will be adding new elements to the beginning of the array using the unshift() method.

JavaScript

<script>
    // Adding element at the beginning of an array
    // Declaring and initializing arrays
    var number_arr = [ 20, 30, 40 ];
    var string_arr = [ "amit", "sumit" ];

    // unshift()
    // number_arr contains
    // [10, 20, 20, 30, 40]
    number_arr.unshift(10, 20);

    // string_arr contains
    // ["sunil", "anil", "amit", "sumit"]
    string_arr.unshift("sunil", "anil");

    // Printing both the array after performing unshift operation
    console.log("After unshift op " + number_arr);
    console.log("After unshift op " + string_arr);
</script>

Output:

After unshift op 10,20,20,30,40
After unshift op sunil,anil,amit,sumit

JavaScript Array.pop() Method: This method is used to remove elements from the end of an array. 

Syntax:

Array.pop()

Parameters: It takes no parameter

Example: In this example, we will be removing an element from the end of the array using the pop() method.

JavaScript

<script>
    // Removing elements from the end of an array
    // Declaring and initializing arrays
    var number_arr = [ 20, 30, 40, 50 ];
    var string_arr = [ "amit", "sumit", "anil" ];

    // pop()
    // number_arr contains
    // [ 20, 30, 40 ]
    number_arr.pop();

    // string_arr contains
    // ["amit", "sumit"]
    string_arr.pop();

    // Printing both the array after performing pop operation
    console.log("After pop op " + number_arr);
    console.log("After pop op " + string_arr);
</script>

Output:

After pop op 20,30,40
After pop op amit,sumit

JavaScript Array.shift() Method: This method is used to remove elements from the beginning of an array 

Syntax :

Array.shift()

Parameter: it takes no parameter

Example: In this example, we will be removing an element from the beginning of the array using the shift() method.

JavaScript

<script>
    // Removing element from the beginning of an array
    // Declaring and initializing arrays
    var number_arr = [ 20, 30, 40, 50, 60 ];
    var string_arr = [ "amit", "sumit", "anil", "prateek" ];

    // shift()
    // number_arr contains
    //  [30, 40, 50, 60];
    number_arr.shift();

    // string_arr contains
    // ["sumit", "anil", "prateek"]
    string_arr.shift();

    // Printing both the array after performing shifts operation
    console.log("After shift op " + number_arr);
    console.log("After shift op " + string_arr);
</script>

Output:

After shift op 30,40,50,60
After shift op sumit,anil,prateek

JavaScript Array.splice() Method: This method is used for the Insertion and Removal of elements in between an Array 

Syntax:

Array.splice (start, deleteCount, item 1, item 2….) 

Parameters: 

• Start: Location at which to perform the operation.
• deleteCount: Number of elements to be deleted, if no element is to be deleted pass 0.
• Item1, item2 …..: this is an optional parameter. 

These are the elements to be inserted from the location start 

Example: In this example, we will be removing an element and adding new elements at the same time using the splice() method.

JavaScript

<script>
    // Removing an adding element at a particular location
    // in an array
    // Declaring and initializing arrays
    var number_arr = [ 20, 30, 40, 50, 60 ];
    var string_arr = [ "amit", "sumit", "anil", "prateek" ];

    // splice()
    // deletes 3 elements starting from 1
    // number array contains [20, 60]
    number_arr.splice(1, 3);

    // doesn't delete but inserts 3, 4, 5
    // at starting location 1
    number_arr.splice(1, 0, 3, 4, 5);

    // deletes two elements starting from index 1
    // and add three elements.
    // It contains  ["amit", "xyz", "geek 1", "geek 2", "prateek"];
    string_arr.splice(1, 2, "xyz", "geek 1", "geek 2");

    // Printing both the array after performing splice operation
    console.log("After splice op " + number_arr);
    console.log("After splice op " + string_arr);
</script>

Output:

After splice op 20,3,4,5,60
After splice op amit,xyz,geek 1,geek 2,prateek

Array Functions Summary:

Function	Usage
push(element)	Adds an element to the end of the array
pop()	Removes the last element of the array
shift()	Removes the first element of the array
slice(beginIndex, endIndex)	Returns a part of the array from beginIndex to endIndex
splice(beginIndex, endIndex)	Returns a part of the array from beginIndex to endIndex and modifies the original array by removing those elements
concat(arr)	Adds new elements (from arr) into the array at the end of the array

JavaScript provides various functions on array refer to the link below:

• Functions Part 1
• Functions Part 2
• Functions Part 3

Note: All the above examples can be tested by typing them within the script tag of HTML or directly into the browser’s console.