JavaScript: How to Add Elements to an Array (push, unshift, splice, concat, spread) — Beginner to Intermediate Guide

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript is one of the essential programming languages for web development. Among its core features, arrays play a crucial role in efficiently managing and manipulating data.

In this article, we’ll explain in detail how to add elements to arrays in JavaScript, covering specific methods and how to use them. By covering everything from basic methods to more advanced techniques, this guide will be useful for beginners through intermediate learners.

2. Basic Concepts of Arrays

What Is an Array? — The Basics of Data Management

A JavaScript array (Array) is a data structure that allows you to store and manage multiple values together. It can hold various data types as elements, such as strings, numbers, and objects.

Example:

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]

You can access array elements using an index. Since indexes start at 0, the first element can be retrieved with fruits[0].

console.log(fruits[0]); // "apple"

Array Initialization and Basic Operations

You can initialize arrays in the following ways.

1. Create an empty array:

let arr = [];

2. Create an array with initial values:

let numbers = [1, 2, 3, 4];

3. Write an array across multiple lines:

let colors = [
  "red",
  "blue",
  "green"
];

As a basic array operation, you can use the length property to get the number of elements.

console.log(colors.length); // 3

3. Basic Methods for Adding Elements to an Array

3.1 Add to the End: push()

What Is push()?

The push() method is the most basic way to add elements to the end of an array. It modifies (mutates) the original array and returns the new length.

Syntax

array.push(element1, element2, ..., elementN);

Example

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Example: Adding Multiple Elements

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 Add to the Beginning: unshift()

What Is unshift()?

The unshift() method adds elements to the beginning of an array. Like push(), it modifies the original array and returns the new length.

Syntax

array.unshift(element1, element2, ..., elementN);

Example

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 Add at Any Position: splice()

What Is splice()?

The splice() method is a flexible option that allows you to add or remove elements at any position in an array.

Syntax

array.splice(start, deleteCount, item1, item2, ..., itemN);

Example

Add elements only:

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

Add and remove at the same time:

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Summary

4. Advanced Techniques: Merging Arrays and Adding Elements

4.1 Merge Arrays: concat()

What Is concat()?

The concat() method is a non-mutating (non-destructive) method used to merge multiple arrays into a new array. The original arrays are not changed, and a new array is returned.

Syntax

array1.concat(array2, array3, ...);

Example

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Merge Arrays with Spread Syntax (...)

What Is Spread Syntax?

Spread syntax (...) is a modern JavaScript feature that expands elements from arrays or objects. It allows you to merge arrays or add new elements with concise, readable code.

Syntax

[...array1, ...array2, ...elements];

Example

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 Comparing Options for Array Merging

Summary

In this section, we covered advanced techniques for merging arrays.

• concat() method: A non-mutating way to merge arrays without changing the originals.
• Spread syntax: A modern, concise approach for flexible array operations.

5. Best Practices for Efficient Array Handling

5.1 Mutating vs. Non-Mutating Methods

What Are Mutating Methods?

These are methods that directly modify the original array.

What Are Non-Mutating Methods?

These are methods that do not change the original array and instead return a new array.

5.2 Writing Performance-Conscious Code

Optimizing Loops

Efficient loop:

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

Using Method Chaining

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Improving Code Readability

Use Clear Variable Names

let userIds = [1, 2, 3];

Add Comments Appropriately

let evenIds = userIds.filter(id => id % 2 === 0);

Use Template Literals

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Summary

In this section, we introduced best practices for efficient array operations.

• Choosing between mutating and non-mutating methods
• Using performance-conscious loops and method chaining
• Improving readability through naming and comments

6. Practical Examples and Use Cases

6.1 Managing Form Input Data

Scenario: Store Form Input Values in an Array

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

Output:

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]  

Remove a Specific Element from the Array

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

Output:

["Sato", "Tanaka"]

6.2 Adding Dynamic Data in a Task Management App

Scenario: Add Tasks and Track Completion

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

Output:

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Handling Complex Data Structures

Scenario: Working with Nested Arrays and Objects

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

Output:

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Summary

In this section, we explained practical applications of array operations through real-world use cases.

1. Managing form input data – Basic operations for adding and removing items.
2. Building a task management app – Dynamic array handling and status updates.
3. Handling complex data structures – Adding and updating elements in nested arrays and objects.

7. Frequently Asked Questions (Q&A)

Q1. What’s the easiest way to empty an array?

Answer: Set the length property to 0

let arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr); // []

Q2. How can I add only unique elements (no duplicates)?

Answer: Use includes() or Set

Example 1: Duplicate check with includes()

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

Example 2: Remove duplicates with Set

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. How do I add elements to a nested array?

Answer: Use push() or spread syntax

Example 1: Add a new nested array

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

Example 2: Add an element inside a specific nested array

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Summary

8. Final Summary and Comparison Table

8.1 Overall Summary

Basic Array Operations

• What is an array? A structure that manages multiple values, and you access elements via indexes.
• Initialization and basic operations Arrays are easy to create with [], and you can check the element count with length.

Methods for Adding/Removing Elements

• Add to the end: push() Simple and widely used, but it mutates the original array.
• Add to the beginning: unshift() Useful when order matters, but be mindful of performance.
• Add/remove at any position: splice() Very flexible, but the syntax can be a bit complex.

Merging and Expanding Arrays

• concat() A non-mutating, safe way to merge multiple arrays.
• Spread syntax (...) Simple, readable, and ideal for modern JavaScript environments.

Efficiency Tips

• Mutating vs. non-mutating methods Choose non-mutating methods when you need to preserve the original data.
• Performance-focused loops Optimize for speed and memory efficiency where appropriate.

Examples and Use Cases

• Form input management Store values in an array and implement add/remove easily.
• Task management systems Add and remove tasks dynamically and track completion status.
• Nested data operations Flexibly handle complex structures with nested arrays and objects.

8.2 Comparison Table of Array Methods

Summary

In this article, we provided a structured explanation of JavaScript array operations, from basic to advanced techniques.

• Core array operations and methods for adding/removing elements.
• Advanced techniques such as array merging and expansion.
• Practical use cases and tips for efficient array management.
• Common questions and their solutions.

Next Steps

Keep learning JavaScript and strengthen your skills by applying these array techniques in real projects!