All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Remove First Element From Array

Last Updated : Sep 5, 2023

JavaScript Remove First Element From Array

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>
  1. First, we write <! DOCTYPE html> to mention the version of the HTML file
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Attach an external CSS file using <link> tag
  5. <h1> tag used to add heading here and also adding the inline CSS here.
  6. Create a <Script> tag to write Javascript within it.
  7. Using Let to create an array with some values.
  8. Shift() method is used to delete the last element
  9. 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>
  1. First, we write <! DOCTYPE html> to mention the version of the HTML file
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Attach an external CSS file using <link> tag
  5. <h1> tag used to add heading here and also adding the inline CSS here.
  6. Create a <Script> tag to write JavaScript within it.
  7. Using Let to create an array with some values.
  8. Now create a for loop to by i less than array.length-1. within it set the array position to the next position
  9. Now set the array length to be the same as before
  10. 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.