Array.push()

The JavaScript .push() method is a very useful tool for adding items to the end of an Array. After an item is added to the end of the Array, the .push() method returns the new length of the array.

Syntax

arr.push(element1, element2, etc...)

The .push() method accepts String, Number, Boolean, Object, Undefined, and Null data types.

Let's Try It Out

Strings

In this example, let's create an array of String's and let's give it a name ofcolors. Then let's add the color orange to it.

var colors = ['red', 'green', 'yellow', 'blue'];

colors.push('orange'); // Expected output: 5

console.log(colors);
// Expected output: ['red', 'green', 'yellow', 'blue', 'orange']

Try this the code snippet in your browser console.

Numbers

Here we'll create an array of number's called testScores and then push two new test scores to the array at the same time.

var testScores = [77, 98, 81, 76];

testScores.push(100, 71); // Expected output: 8

console.log(testScores);
// Expected output: [77, 98, 81, 76, 100, 71];

Try this the code snippet in your browser console.

Objects

In our last example, we pushed test scores to the array, but that isn't very helpful to the end-user. It would be nice to see the names of the students that the grades were for so that we could keep track of them all in one spot. Let's push Object's to our array instead.

Create an array of Object's named students.

var students = [
        {
           studentName: 'Billy',
           testScore: 77
        },
        {
           studentName: 'Sandra',
           testScore: 98
        },
        {
           studentName: 'Michelle',
           testScore: 81
        },
        {
           studentName: 'Jason',
           testScore: 76
        }
    
];
console.log(students); // Try this out!

Try this the code snippet in your browser console.

Next, let's take our students array, and add the grades for Andrea and Timmy.

students.push({studentName: 'Andrea', testScore: 100}, {studentName: 'Timmy', testScore: 71});

console.log(students);

Try this the code snippet in your browser console.

One Step Further

We can also take it one step further by accessing a particular students information. Let's say we want to see Andrea's grade, how would we do that?

We can do that by using either dot notation or bracket notation.

Dot Notation Example:

Dot notation is more popular due to readability and ease of use.

Syntax for dot notation is: objectName.propertyName.

However, keep in mind that while using dot notation, properties cannot start with a number, and they cannot be variables.

console.log(students[4].studentName); // Expected output: Andrea

Try this the code snippet in your browser console.

Bracket Notation Example:

Bracket notation has it's own purposes as well, aside from being a little more annoying to type out. With bracket notation your properties can start with numbers, and contain spaces. You can also use variables.

Syntax for bracket notation is: objectName['propertyName'].

console.log(students[4]['testScore']); // Expected output: 100

Try this the code snippet in your browser console.

Conclusion

As you can see, the .push() method has a ton of utility, and it's certainly one of the fundamentals for dealing with Arrays.

If you have any questions or if you'd like to see additional examples, feel free to reach out to me anytime at tim@timwheeler.com, and if you're enjoying my posts, please subscribe below!