All TalkersCode Topics

Follow TalkersCode On Social Media

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

How To Add To An Array JavaScript

Last Updated : Mar 11, 2024

How To Add To An Array JavaScript

In this article we will show you the solution of how to add to an array JavaScript, now array is a collection of homogeneous elements. In JavaScript, we can add elements to an array at any position or at the end of the array.

We will see both of the methods to add elements to an array.

splice() method: in JavaScript, we used splice() method to add or remove elements in array. It is used to add elements at any position of the array.

Syntax: array.splice(index, item to remove, item)

push() method: in JavaScript, we used the push() method to add an element at the end of the array.

Syntax: array.push(item)

Step By Step Guide On How To Add To An Array JavaScript :-

Method 1

In this method, we are going to use splice() method to add elements to the array.

<!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> How to add to an array JavaScript </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> How to add to an array JavaScript </h3>
    </center>
    <script>
        const fruits = ['apple', 'orange', 'berry', 'grape', 'kiwi', 'olive'] ;
        console.log(fruits) ;
        console.log(fruits.splice(2, 0, 'pineapple')) ;
    </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. Using const to create an array with some values
  7. Console.log() to display the array.
  8. Now use splice() method to add an element to the index position of 2.
  9. Using console.log() to display it.

Method 2

In this method, we are going to use push() method to add elements on array.

<!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> how to add to an array javascript </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> how to add to an array javascript </h3>
    </center>
    <script>
        let people = {
            name: 'akash' ,
            age: 22,
        }
        let student = [] ;
          student.push(people) ;
          console.log(student) ;
    </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. Using Let to create an array with some values.
  7. Let’s create another empty array.
  8. Using push() to add the first array into it.
  9. Now using console.log() to display the array.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know to how to add to an array using JavaScript.

I hope this article on how to add to an array JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪