JavaScript Array Append: Methods and Best Practices

Introduction

Appending elements to a JavaScript array is a common task that every developer encounters. Whether you’re collecting data from users, building dynamic interfaces, or processing lists of items, arrays are at the core of efficient JavaScript code. But beyond the simple cases, there are multiple ways to add items to an array, each with its own trade-offs.

In this guide, we’ll explore the primary methods to append elements, compare their behaviors, and discuss best practices. You’ll learn how to choose the right approach for performance and readability, and see real code examples that you can apply immediately.

Using push

The most straightforward method to append one or more elements to the end of an array is the push() method. It modifies the original array and returns the new length:

const fruits = ['apple', 'banana']
const newLength = fruits.push('orange')
console.log(fruits) // ['apple', 'banana', 'orange']
console.log(newLength) // 3

You can push multiple items at once:

fruits.push('grape', 'melon')
// ['apple', 'banana', 'orange', 'grape', 'melon']

Tip: Use push when you need to modify the original array in place and care about the updated length. For retrieving length, use arr.length or see how to check array size in JavaScript.

Using unshift

If you need to add elements to the beginning of an array, use unshift(). It works like push but adds items to the front:

const numbers = [3, 4]
numbers.unshift(1, 2)
console.log(numbers) // [1, 2, 3, 4]

unshift() can be slower on large arrays because it shifts all existing elements. Keep that in mind for performance-sensitive code.

Using concat

To avoid mutating the original array, concat() returns a new array with the added items:

const base = [1, 2]
const extended = base.concat(3, 4)
console.log(base) // [1, 2]
console.log(extended) // [1, 2, 3, 4]

This approach is great for functional programming patterns. It also works to merge two arrays:

const a = [1, 2]
const b = [3, 4]
const merged = a.concat(b)
// [1, 2, 3, 4]

For more on initializing arrays, see create an array with predefined elements.

Spread operator

The spread operator (...) is a concise way to append elements while creating a new array:

const oldArray = ['x', 'y']
const newArray = [...oldArray, 'z']
console.log(newArray) // ['x','y','z']

This syntax is flexible:

• Append at end: [..., item]
• Prepend: [item, ...arr]
• Merge arrays: [...arr1, ...arr2]

Note: Spread also creates a shallow copy of nested objects. It also applies to objects and JSON structures; see JSON notation.

Appending multiple items

When adding many elements, you can combine methods:

let data = []
data.push('a')
data = [...data, 'b', 'c']
// ['a','b','c']

However, for pure performance, batch operations like push with multiple args are usually faster than repeated spread operations.

Performance tips

Benchmarks vary by engine, but general rules:

• push is fastest for in-place additions
• unshift is slower due to reindexing
• concat and spread have overhead for creating new arrays

For critical loops, prefer push or manual index assignment:

const arr = []
for (let i = 0; i < 100000; i++) {
  arr[i] = i
}

Common pitfalls

1. Accidentally merging nested arrays:

const a = [1]
const b = [2, [3]]
const c = a.concat(b)
// [1, 2, [3]] // nested array stays nested

1. Forgetting return value:

const nums = [1]
nums.push(2)
// returns 2, not the array

1. Using spread on very large arrays can impact memory.

Conclusion

Appending elements to JavaScript arrays is fundamental, yet it offers multiple approaches suited to different needs. Use push for simple, in-place additions. Choose concat or the spread operator for immutable patterns. Keep performance in mind: unshift and repeated spreads have higher costs. By understanding each method’s behavior, you’ll write clearer, more efficient code.

In your next project, pick the array append strategy that aligns with your style—mutable or functional—and watch your code stay clean and performant.