JavaScript: 배열에 요소 추가하기 (push, unshift, splice, concat, spread) — 초급부터 중급까지 가이드

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

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

1. Introduction

JavaScript는 웹 개발에 필수적인 프로그래밍 언어 중 하나입니다. 핵심 기능 중 배열은 데이터를 효율적으로 관리하고 조작하는 데 중요한 역할을 합니다.

이 글에서는 JavaScript에서 배열에 요소를 추가하는 방법을 자세히 설명하고, 구체적인 메서드와 사용법을 다룹니다. 기본 메서드부터 고급 기법까지 모두 포괄하므로 초보자부터 중급 학습자까지 유용하게 활용할 수 있습니다.

2. Basic Concepts of Arrays

What Is an Array? — The Basics of Data Management

JavaScript 배열 (Array) 은 여러 값을 함께 저장하고 관리할 수 있는 데이터 구조입니다. 문자열, 숫자, 객체 등 다양한 데이터 타입을 요소로 가질 수 있습니다.

Example:

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

인덱스를 사용해 배열 요소에 접근할 수 있습니다. 인덱스는 0부터 시작하므로 첫 번째 요소는 fruits[0] 로 가져올 수 있습니다.

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

Array Initialization and Basic Operations

다음과 같은 방법으로 배열을 초기화할 수 있습니다.

1. 빈 배열 만들기:

   let arr = [];
   

2. 초기값을 가진 배열 만들기:

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

3. 여러 줄에 걸쳐 배열 작성하기:

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

기본 배열 연산으로 length 속성을 사용해 요소 개수를 얻을 수 있습니다.

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

3. Basic Methods for Adding Elements to an Array

3.1 Add to the End: push()

What Is push()?

push() 메서드는 배열의 끝에 요소를 추가하는 가장 기본적인 방법입니다. 원본 배열을 변형(뮤테이트)하고 새로운 길이를 반환합니다.

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()?

unshift() 메서드는 배열의 시작에 요소를 추가합니다. push()와 마찬가지로 원본 배열을 변형하고 새로운 길이를 반환합니다.

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()?

splice() 메서드는 배열의 임의 위치에 요소를 추가하거나 제거할 수 있는 유연한 옵션입니다.

Syntax

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

Example

요소만 추가:

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

동시에 추가 및 제거:

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()?

concat() 메서드는 여러 배열을 새로운 배열로 병합하는 비변형(non‑mutating) 메서드입니다. 원본 배열은 변경되지 않으며 새 배열이 반환됩니다.

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 구문(...)은 배열이나 객체의 요소를 확장하는 최신 JavaScript 기능입니다. 간결하고 가독성 높은 코드로 배열을 병합하거나 새로운 요소를 추가할 수 있습니다.

구문

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

예시

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 배열 병합 옵션 비교

요약

이 섹션에서는 배열 병합을 위한 고급 기술을 다루었습니다.

• concat() 메서드 : 원본을 변경하지 않고 배열을 병합하는 비변형 방식입니다.
• Spread 구문 : 유연한 배열 작업을 위한 최신의 간결한 접근 방식입니다.

5. 효율적인 배열 처리를 위한 모범 사례

5.1 변형 메서드 vs. 비변형 메서드

변형 메서드란?

이 메서드들은 원본 배열을 직접 수정합니다.

비변형 메서드란?

이 메서드들은 원본 배열을 변경하지 않고 대신 새로운 배열을 반환합니다.

5.2 성능을 고려한 코드 작성

루프 최적화

효율적인 루프:

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

메서드 체이닝 사용

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 코드 가독성 향상

명확한 변수명 사용

let userIds = [1, 2, 3];

적절한 주석 추가

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

템플릿 리터럴 사용

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

요약

이 섹션에서는 효율적인 배열 작업을 위한 모범 사례를 소개했습니다.

• 변형 메서드와 비변형 메서드 선택
• 성능을 고려한 루프와 메서드 체이닝 사용
• 명명 및 주석을 통한 가독성 향상

6. 실용 예제 및 사용 사례

6.1 폼 입력 데이터 관리

시나리오: 폼 입력 값을 배열에 저장

let userList = [];

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

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

출력:

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

배열에서 특정 요소 제거

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

removeUser("Suzuki");

출력:

["Sato", "Tanaka"]

6.2 작업 관리 앱에서 동적 데이터 추가

시나리오: 작업 추가 및 완료 추적

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);

출력:

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

6.3 복잡한 데이터 구조 처리

시나리오: 중첩 배열 및 객체 작업

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");

출력:

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

요약

이 섹션에서는 실제 사용 사례를 통해 배열 작업의 실용적인 적용을 설명했습니다.

1. 폼 입력 데이터 관리 – 항목 추가 및 제거를 위한 기본 연산.
2. 작업 관리 앱 구축 – 동적 배열 처리 및 상태 업데이트.
3. 복잡한 데이터 구조 처리 – 중첩 배열 및 객체의 요소 추가와 업데이트.

7. 자주 묻는 질문 (Q&A)

Q1. 배열을 비우는 가장 쉬운 방법은 무엇인가요?

답변: length 속성을 0으로 설정합니다.

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

Q2. 중복 없이 고유한 요소만 추가하려면 어떻게 해야 하나요?

답변: includes() 또는 Set을 사용합니다.

예시 1: includes()를 사용한 중복 검사

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

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

예시 2: 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. 중첩 배열에 요소를 추가하려면 어떻게 해야 하나요?

답변: push() 또는 스프레드 문법을 사용합니다.

예시 1: 새로운 중첩 배열 추가

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

예시 2: 특정 중첩 배열 내부에 요소 추가

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

요약

8. 최종 요약 및 비교 표

8.1 전체 요약

기본 배열 연산

• 배열이란? 여러 값을 관리하는 구조이며, 인덱스를 통해 요소에 접근합니다.
• 초기화 및 기본 연산 배열은 [] 로 쉽게 생성할 수 있으며, length 로 요소 개수를 확인할 수 있습니다.

요소 추가/제거 메서드

• 끝에 추가: push() 간단하고 널리 사용되지만, 원본 배열을 변형합니다.
• 앞에 추가: unshift() 순서가 중요할 때 유용하지만, 성능에 유의해야 합니다.
• 임의 위치에 추가/제거: splice() 매우 유연하지만, 문법이 다소 복잡할 수 있습니다.

배열 병합 및 확장

• concat() 원본을 변형하지 않고 여러 배열을 병합하는 안전한 방법입니다.
• 스프레드 문법 (...) 간단하고 가독성이 좋으며, 최신 JavaScript 환경에 적합합니다.

효율성 팁

• 변형 vs. 비변형 메서드 원본 데이터를 보존해야 할 때는 비변형 메서드를 선택합니다.
• 성능 중심 루프 상황에 맞게 속도와 메모리 효율을 최적화합니다.

예시 및 사용 사례

• 폼 입력 관리 값을 배열에 저장하고 추가/제거를 쉽게 구현합니다.
• 작업 관리 시스템 작업을 동적으로 추가·제거하고 완료 상태를 추적합니다.
• 중첩 데이터 연산 중첩 배열 및 객체를 사용해 복잡한 구조를 유연하게 처리합니다.

8.2 배열 메서드 비교 표

요약

이 글에서는 기본부터 고급 기술까지 JavaScript 배열 연산에 대한 구조화된 설명을 제공했습니다.

• 핵심 배열 연산 및 요소 추가/제거 메서드.
• 배열 병합 및 확장과 같은 고급 기술.
• 실용적인 사용 사례와 효율적인 배열 관리 팁.
• 일반적인 질문과 그 해결책.

다음 단계

JavaScript 학습을 지속하고 실제 프로젝트에 이러한 배열 기술을 적용하여 실력을 강화하세요!