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
    let number_arr = [ 10, 20, 30, 40, 50 ];
    let 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
    let number_arr = [ 20, 30, 40 ];
    let 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
    let number_arr = [ 20, 30, 40, 50 ];
    let 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
    let number_arr = [ 20, 30, 40, 50, 60 ];
    let 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
    let number_arr = [ 20, 30, 40, 50, 60 ];
    let 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

JavaScript Array.slice() Method: This method returns a new array containing a portion of the original array, based on the start and end index provided as arguments

Syntax : 

Array.slice (startIndex , endIndex);

Parameters :

• startIndex (optional) : An integer value representing the index at which to start extracting elements from the array. If not specified, the default value is 0, which means the slice starts at the beginning of the array.
• endIndex (optional) : An integer value representing the index at which to stop extracting elements from the array (exclusive). If not specified, the default value is the length of the array, which means the slice extends to the end of the array.

Example: The following code covers all corner cases of the slice() method .

Javascript

const originalArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Case 1: Extract the first 3 elements of the array
const case1 = originalArr.slice(0, 3);
console.log("Case 1: Extract the first 3 elements of the array: [" + case1 + "]");

// Case 2: Extract the last 3 elements of the array
const case2 = originalArr.slice(-3);
console.log("Case 2: Extract the last 3 elements of the array: [" + case2 + "]");

// Case 3: Extract elements from the middle of the array
const case3 = originalArr.slice(3, 7);
console.log("Case 3: Extract elements from the middle of the array: [" + case3 + "]");

// Case 4: Start index is greater than end index
const case4 = originalArr.slice(5, 2);
console.log("Case 4: Start index is greater than end index: [" + case4 + "]");

// Case 5: Negative start index
const case5 = originalArr.slice(-4, 9);
console.log("Case 5: Negative start index: [" + case5 + "]");

// Case 6: Negative end index
const case6 = originalArr.slice(3, -2);
console.log("Case 6: Negative end index: [" + case6 + "]");

// Case 7: Only start index is provided
const case7 = originalArr.slice(5);
console.log("Case 7: Only start index is provided: [" + case7 + "]");

// Case 8: Start index and end index are out of range
const case8 = originalArr.slice(15, 20);
console.log("Case 8: Start index and end index are out of range: [" + case8 + "]");

// Case 9: Start index and end index are negative and out of range
const case9 = originalArr.slice(-15, -10);
console.log("Case 9: Start index and end index are negative and out of range: [" + case9 + "]");

Output:

Case 1: Extract the first 3 elements of the array: [ 1,2,3]
Case 2: Extract the last 3 elements of the array: [8,9,10]
Case 3: Extract elements from the middle of the array: [4,5,6,7]
Case 4: Start index is greater than end index: []
Case 5: Negative start index: [7,8,9]
Case 6: Negative end index: [4,5,6,7,8]
Case 7: Only start index is provided: [6,7,8,9,10]
Case 8: Start index and end index are out of range: []
Case 9: Start index and end index are negative and out of range: []

Note :
   A copy of an array or a subset of an array can be obtained using the slice() method. It is crucial to remember that the slice() method only makes a shallow copy of the original array. The original array’s contents will be altered by the splice() method, in contrast to the slice() method.

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.