Adding Elements to an Array

By: Dusty Arlia
Published on September 17, 2012
Last Updated on Friday, July 03, 2015 at 3:49 PM
Total Updates: 5

When you are attempting to add items to your array, there are a number of ways you can go about doing it. Which way you do it depends on a couple of factors like how many items do you want to add at one time and does the item order matter to you. Here are some of your options:

Add Array Items in your Declaration Statement

An array is made up of elements. These elements can be thought of as items on a list. You can add an element to your array when you first declare (make) your array or after your array is already created. You can add elements when you first create your array like this:

var fullNames = ['Dusty Arlia',
                 'Justin Bieber',
               	 'Emma Watson',
                 'Kim Kardashian',
                 'Kanye West',

Add Array Items to the End of the Array

Or you can add elements using the next expected index number. In this example, the next expected index number would be 5. Remember that the index number is one minus the position the array element is in. Here is how you would add a name to your fullNames array using the next expected index number:

fullNames[5] = 'Emma Roberts';

This code adds a 6th element to your array (Dusty Arlia is the first element with the index number of 0).

If you're writing a JavaScript program to constantly add an element to the end of an array, which is common, then you have the option to make use of the array length property. The array length property will give you the number of elements (or items) in your array. This number is equal to the next expected index number. Here's how you can add an array element to the end of your array using the array length property:

fullNames[fullNames.length] = 'Justin Timberlake';

You can also use the push() method to add an item to the end of an array. To do this just type the name of the array, followed by a period and push() like this:

fullNames.push('Lebron James');

When adding items to an array, the push() method has its benefits over other methods. When you use the push() method you are capable of adding multiple array elements at one time. Here's how that would look like:

fullNames.push('Jeremy Lin', 
               'Christian Marclay', 
               'Viola Davis',
               'Salman Khan',
       	       'Tim Tebow',
               'Ali Ferzat',
               'René Redzepi',
               'Marco Rubio',
               'Kristen Wiig',
               'Anthony Kennedy',
               'Novak Djokovic',
               'Ben Rattray',
               'Jessica Chastain',
               'Yani Tseng',
               'Raphael Saadiq',
               'Elinor Ostrom',
               'Samira Ibrahim',
               'José Andrés',
               'Ann Patchett',
               'Dulce Matuz',
               'Henrik Schärfe');

Add Array Items to the Beginning of the Array

The JavaScript unshift() method is used for placing items at the beginning of an array. Here is an example:

var fullNames = ['Kevin Kolb',
                 'Matt Ryan',
                 'Joe Flacco',
                 'Ryan Fitzpatrick',
                 'Cam Newton',
                 'Jay Cutler',
                 'Andy Dalton',
                 'Brandon Weeden',
                 'Tony Romo',
                 'Peyton Manning',
                 'Matthew Stafford'];

fullNames.unshift('Aaron Rodgers');

Or add multiple items at once:

fullNames.unshift('Matt Schaub',
                  'Andrew Luck',
                  'Blaine Gabbert',
                  'Matt Cassel',
                  'Ryan Tannehill',
                  'Christian Ponder',
                  'Tom Brady',
                  'Drew Brees',
                  'Eli Manning')

Replace Array Elements

Sometimes when you are adding an item to an array, you would like to replace an existing item. In this case what you should do is use the array's name followed by square brackets. Then in between those square brackets, insert the index number of the existing item that you would like to replace. Here's how that code would look like:

var fullNames = ['Kevin Kolb',
                 'Matt Ryan',
                 'Joe Flacco',
                 'Ryan Fitzpatrick',
                 'Cam Newton',
                 'Jay Cutler',
                 'Andy Dalton',
                 'Brandon Weeden',
                 'Tony Romo',
                 'Peyton Manning',
                 'Matthew Stafford'];
fullNames[2] = 'Dusty Arlia';

In the code above the string Joe Flacco gets replaced with the new string Dusty Arlia.