JavaScript Array Remove First Element
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of JavaScript array remove first element, 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 ‘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) ;
- Using shift() : the shift() property of JavaScript is used to delete the last element from an array.
Step By Step Guide On JavaScript Array Remove First Element :-
Method 1 - 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 array remove first element </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 array remove first element </h3>
</center>
<script>
let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'] ;
array.shift() ;
document.write(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.
- Now create an array with the values
- Using array.shift() method to remove the first element
- Document.write() to display the array after removal of the first element
Method 2 - Using Shift() Method
<!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 array remove first element </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 array remove first element </h3>
</center>
<script>
let obj = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'] ;
for(let i=0; i<obj.length-1; i++) {
obj[i] = obj[i+1] ;
}
obj.length = obj.length-1 ;
document.write(obj) ;
</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 name obj with some values.
- Create a for loop. Set the value of i=0 and i < obj.length-1.
- within it set the array position to the next position
- Now set the array length to be the same as before
- Using document.write() to display the array after removing the 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 array remove first element helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
