Pop front element from an array in JavaScript
This post will discuss how to pop the front element from an array in JavaScript.
JavaScript does not have a built-in function specifically for removing the first element of an array, but there are several ways to implement it using existing functions or custom functions. Here are some of them:
1. Using shift() function
To implement a pop front operation for an array in JavaScript, we need to use a function that can remove the first element of the array and return it. The built-in function that can do this is the shift() function, which removes the first element from an array and returns the removed element. This function changes the length and the content of the original array. Here’s an example:
|
1 2 3 4 5 6 7 |
let arr = [1, 2, 3, 4]; // remove and return the first element let first = arr.shift(); console.log(first); // 1 console.log(arr); // [2, 3, 4] |
In this example, shift() is called on the array arr, and it removes the first element 1. The modified array arr now contains [2, 3, 4], and the removed element 1 is stored in the variable first. This function requires ES6 support or a polyfill for old browsers. Also, this function may not perform well for large arrays, as it takes linear time to run.
2. Using slice() function
The shift() function is a mutating function. It changes the length and the content of the array. In case we want to return a new array with the first element removed, but keep the original array unchanged, we can use arr.slice(1) instead. Here’s an example:
|
1 2 3 4 5 6 7 |
let arr = [1, 2, 3, 4]; // return a new array with the first element removed let newArr = arr.slice(1); console.log(newArr); // [2, 3, 4] console.log(arr); // [1, 2, 3, 4] |
3. Using splice() function
Another approach is to use the splice() function to remove array elements. The splice() function changes the original array and returns an array containing the deleted elements. To implement a pop front operation using this function, we can pass 0 as the start index and 1 as the delete count. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 |
Array.prototype.pop_front = function() { // remove and return the first element return this.splice(0, 1)[0]; }; let arr = [1, 2, 3, 4]; let first = arr.pop_front(); console.log(first); // 1 console.log(arr); // [2, 3, 4] |
In this example, a custom function pop_front() is added to the Array.prototype. It uses the splice() function to remove the first element from the array and returns that element.
4. Using a for loop
We can also write our own function that takes an array as an argument and returns the first element after removing it from the array. We can use a for loop to iterate over the array and move each element one position to the left, and then use the pop() function to remove the last element. Here’s an example of how we can achieve this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function pop_front(arr) { // store the first element in a variable let first = arr[0]; // loop through the array from index 1 to length - 1 for (let i = 1; i < arr.length; i++) { // assign the current element to the previous index arr[i - 1] = arr[i]; } // remove the last element arr.pop(); // return the first element return first; } let arr = []; // remove and return the first element let first = pop_front(arr); console.log(first); // 1 console.log(arr); // [2, 3, 4] |
This function is compatible with older browsers, but it is not very efficient or elegant for large arrays, as it has a linear time complexity. That’s all about popping the front element from an array in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)