In this tutorial, we want to share some quick tips on appending elements to an array.

Append to an array using the JavaScript push method #

The push method can be used to append an element at the end of an array.

var array = ['first', 'second'];
array.push('third');
console.log(array); // ['first', 'second', 'third']

If we want to push an array at the end of another array, we can combine the push method with the spread operator (...):

var array = ['first', 'second'];
var second_array = ['third', 'fourth'];
array.push(...second_array);
console.log(array); // ['first', 'second', 'third', 'fourth']

The spread operator (...) expands the second_array so that it can be passed directly to the push method, with no need of looping through all its element.

One important thing to remember about the push method is that it modifies the original array while returning the length of the modified array. Remember not to assign the returned value to the array itself:

// this is correct
var array = ['first', 'second'];
var array_length = array.push('third');

// this is wrong
var array = ['first', 'second'];
array = array.push('third'); // array will now be 3

Add to an array using the JavaScript unshift method #

The unshift method, like the push method, can be used to combine arrays. The difference is that the unshift method adds at the beginning of the array, rather than the end.

var array_1 = ['first', 'second'];
var array_2 = ['third', 'fourth'];
array_1.unshift(...array_2);
console.log(array_1); // ['third', 'fourth', 'first', 'second']

As the push method, unshift modifies the original array and returns the new length of the modified array.

Combine arrays with the JavaScript concat method #

Another method you can use to merge two arrays is the concat method.

var first_array = ['first', 'second'];
var second_array = ['third', 'fourth'];
var combined_array = first_array.concat(second_array);
console.log(combined_array); // ['first', 'second', 'third', 'fourth']

Unlike the push and the unshift methods, the concat method does not modify the original array but returns a new array.
It could be useful if you need to preserve your original array.

Real-world examples #

Let's see an example where these methods are used.

Drag-drop files component

Let's take a look at this drag & drop files component.

It allows users to select and upload files, dropping them in a drop area. The user can drag and drop files multiple times; each time new files are dropped, the complete list of these files needs to be updated. We can use the push method with the spread operator to merge two arrays (the complete list of dropped files and the latest dropped files).

First, we need to listen to the drop event to detect when the user drops new files in the drop area. The dataTransfer.files of a drop event stores the list of dropped files.

var dropped_files = []; // use this to store the list of dropped files

function handleEvent(event) {
  switch(event.type) {
    case 'dragenter': 
    case 'dragover':
      // dragenter/dragover events function
      break;
    case 'dragleave':
      // dragleave event function
      break;
    case 'drop':
      storeDroppedFiles(event.dataTransfer.files);
      break;
  }
};

In the example above, we use the handleEvent function to handle multiple dragging events. If you are unfamiliar with this technique, take a look at this article on handling events in JavaScript and keeping them organized.

In the storeDroppedFiles function, we update the dropped_files array:

function storeDroppedFiles(new_files) {
  dropped_files.push(...new_files);
}

Each time the user drops new files, they will be appended to the dropped_files array.