JavaScript Remove First Element From Array
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of JavaScript remove first element from array, array is a collection of homogeneous elements. We are going to use JavaScript to delete the first element from an array.
We will be using two different methods in order to do so.
- Using shift() : the shift() property of JavaScript is used to delete the last element from an array.
- Using ‘for loop’ : in order to do deleting any element from the array we will use for loop. Let us see the syntax of the for loop first,
for (initialization ; condition ; increment/decrement)
Step By Step Guide On JavaScript Remove First Element From Array :-
Method 1 - Using Shift()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript remove first element from array </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> WELCOME TO TALKERSCODE </h1>
<h3> javascript remove first element from array </h3>
</center>
<script>
let array = [10, 20, 30, 40, 50, 60, 70 ,80] ;
var x = array.shift() ;
document.write('new array: ' +array) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write Javascript within it.
- Using Let to create an array with some values.
- Shift() method is used to delete the last element
- Using document.write() to display the array after removing the element
Method 2 - Using for Loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> javascript remove first element from array </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> WELCOME TO TALKERSCODE </h1>
<h3> javascript remove first element from array </h3>
</center>
<script>
let num = [10, 20, 30, 40, 50, 60, 70 ,80] ;
for(let i=0; i<num.length-1; i++) {
num[i] = num[i+1] ;
}
num.length = num.length-1 ;
console.log(num) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within it.
- Using Let to create an array with some values.
- Now create a for loop to by i less than array.length-1. within it set the array position to the next position
- Now set the array length to be the same as before
- Using console.log() to display the array after delete the first element.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to remove first element from array using JavaScript.
I hope this article on JavaScript remove first element from array helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
