How to add an item to an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Adding items to arrays is one of the most fundamental operations in JavaScript development, essential for building dynamic user interfaces and managing data collections.
With over 25 years of experience in software development and as the creator of CoreUI, a widely used open-source UI library, I have implemented array manipulation countless times in components that handle dynamic lists, navigation menus, and data tables.
From my expertise, the most efficient and widely supported method is using the push() method to add items to the end of an array.
This approach is performant, intuitive, and works consistently across all JavaScript environments.
Use the push() method to add one or more items to the end of an array.
const fruits = ['apple', 'banana']
fruits.push('orange')
// Result: ['apple', 'banana', 'orange']
The push() method modifies the original array by adding the specified element to the end and returns the new length of the array. In this example, fruits.push('orange') adds 'orange' to the end of the fruits array, changing it from ['apple', 'banana'] to ['apple', 'banana', 'orange']. This is the most common way to append data in JavaScript because it is both fast and readable.
1. Adding a Single Item
The simplest use case is appending one value to an existing array. The push() method handles all primitive types including strings, numbers, and booleans.
const colors = ['red', 'green', 'blue']
// Add a single string
colors.push('yellow')
console.log(colors)
// Result: ['red', 'green', 'blue', 'yellow']
// push() returns the new length of the array
const newLength = colors.push('purple')
console.log(newLength)
// Result: 5
The return value of push() is the updated length of the array, not the array itself. This is a detail that many developers overlook. You can use this returned length to track the size of your collection without calling a separate property access. For example, if you need to enforce a maximum number of items in a list, you can compare the return value against your limit immediately after pushing.
2. Adding Multiple Items at Once
The push() method accepts any number of arguments, allowing you to append several items in a single call. This is more efficient than calling push() multiple times because it only triggers one internal length update.
const tasks = ['Design mockup']
// Add three tasks in one call
tasks.push('Write tests', 'Deploy to staging', 'Run QA')
console.log(tasks)
// Result: ['Design mockup', 'Write tests', 'Deploy to staging', 'Run QA']
When building dynamic interfaces, this pattern is especially useful when you receive a batch of new items from an API response and need to append all of them to an existing list. Each argument is added in the order it appears, so the final array preserves the sequence you specify. This is the same pattern we use in CoreUI navigation components when dynamically inserting multiple menu entries at once.
3. Adding Objects to an Array
In real-world applications, you often work with arrays of objects rather than simple primitives. The push() method works identically with objects, adding a reference to the object at the end of the array.
const users = [
{ id: 1, name: 'Alice', role: 'Admin' }
]
const newUser = { id: 2, name: 'Bob', role: 'Editor' }
users.push(newUser)
console.log(users)
// Result: [
// { id: 1, name: 'Alice', role: 'Admin' },
// { id: 2, name: 'Bob', role: 'Editor' }
// ]
When pushing objects, JavaScript stores a reference, not a copy. This means that if you later modify newUser.name, the change will also be reflected inside the users array. If you need an independent copy, push a shallow clone using the spread operator: users.push({ ...newUser }). This is a critical distinction when managing component state in frameworks like React, where immutability matters for re-render detection.
4. Conditionally Adding Items
A common pattern is to add items to an array only when a specific condition is met. This is useful for building filtered lists, handling user permissions, or processing form inputs before submission.
const notifications = []
const hasNewMessages = true
const hasSystemAlert = false
if (hasNewMessages) {
notifications.push({ type: 'message', text: 'You have 3 new messages' })
}
if (hasSystemAlert) {
notifications.push({ type: 'alert', text: 'System maintenance scheduled' })
}
console.log(notifications)
// Result: [{ type: 'message', text: 'You have 3 new messages' }]
This guard pattern keeps your arrays clean by only including relevant data. In CoreUI dashboard templates, we use this approach to conditionally populate sidebar navigation items based on the authenticated user’s role, ensuring that admin-only links never appear for standard users.
5. Using push() Inside Loops
When processing data from an external source, you often iterate over one collection and selectively push items into another. This is a fundamental pattern for transforming and collecting data.
const rawData = [
{ name: 'Widget A', price: 25, inStock: true },
{ name: 'Widget B', price: 15, inStock: false },
{ name: 'Widget C', price: 40, inStock: true },
{ name: 'Widget D', price: 10, inStock: true }
]
const availableProducts = []
for (const product of rawData) {
if (product.inStock && product.price > 20) {
availableProducts.push(product.name)
}
}
console.log(availableProducts)
// Result: ['Widget A', 'Widget C']
This example combines a for...of loop with a conditional push() to collect only the product names that meet both criteria. While you could achieve a similar result with filter() and map(), the explicit loop with push() can be easier to read when your filtering logic involves multiple conditions or side effects. For more on array filtering, see how to filter an array in JavaScript.
6. Building Arrays Dynamically in Functions
A clean pattern for creating arrays from scratch is to initialize an empty array inside a function, populate it with push(), and return the result. This keeps your logic self-contained and testable.
function buildNavItems(userRole) {
const items = []
items.push({ label: 'Dashboard', icon: 'cil-speedometer', to: '/' })
items.push({ label: 'Profile', icon: 'cil-user', to: '/profile' })
if (userRole === 'admin') {
items.push({ label: 'User Management', icon: 'cil-people', to: '/users' })
items.push({ label: 'Settings', icon: 'cil-settings', to: '/settings' })
}
return items
}
const adminNav = buildNavItems('admin')
console.log(adminNav.length)
// Result: 4
const userNav = buildNavItems('viewer')
console.log(userNav.length)
// Result: 2
This factory pattern produces a fresh array on every call, which avoids accidental shared state between different parts of your application. It is especially valuable in component-based architectures where each instance needs its own independent copy of the data. In CoreUI, our sidebar navigation is built using exactly this kind of function to generate role-specific menu structures.
Best Practice Note:
The push() method mutates the original array in place. In contexts where immutability is required, such as React state updates, use the spread operator to create a new array instead: setItems([...items, newItem]). The push() method remains the best choice for general-purpose array building, loop accumulation, and any scenario where you own the array and mutation is safe. For removing items, see how to remove a specific item from an array in JavaScript, and for checking membership, see how to check if an array contains a value in JavaScript.
