[JavaScript] 배열 메서드 완벽 정리 (Array Method) 1탄 - 추가/제거

 

자바스크립트로 개발하다 보면 배열을 다루는 일이 정말 많죠. 오늘은 배열에 요소를 추가하거나 제거하는 기본적이면서도 자주 사용하는 메서드들을 정리해보겠습니다.

1. push() - 배열 끝에 요소 추가

push()는 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.

const fruits = ['사과', '바나나'];
const newLength = fruits.push('오렌지');

console.log(fruits); // ['사과', '바나나', '오렌지']
console.log(newLength); // 3

// 여러 개를 한 번에 추가할 수도 있습니다
fruits.push('포도', '딸기');
console.log(fruits); // ['사과', '바나나', '오렌지', '포도', '딸기']

 

주의사항: push()는 원본 배열을 직접 수정합니다!

 

실무 활용 예시:

// 장바구니에 상품 추가하기
const cart = [];
cart.push({ id: 1, name: '노트북', price: 1500000 });
cart.push({ id: 2, name: '마우스', price: 30000 });
console.log(cart);
// [{ id: 1, name: '노트북', price: 1500000 }, { id: 2, name: '마우스', price: 30000 }]

---

2. pop() - 배열 끝에서 요소 제거

pop()은 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.

const fruits = ['사과', '바나나', '오렌지'];
const lastFruit = fruits.pop();

console.log(lastFruit); // '오렌지'
console.log(fruits); // ['사과', '바나나']

// 빈 배열에 pop()을 사용하면 undefined를 반환합니다
const empty = [];
console.log(empty.pop()); // undefined

 

실무 활용 예시:

// 실행 취소(Undo) 기능 구현
const history = ['페이지1', '페이지2', '페이지3'];
const currentPage = history.pop(); // '페이지3'
console.log('뒤로 가기:', history); // ['페이지1', '페이지2']

---

3. unshift() - 배열 앞에 요소 추가

unshift()는 배열의 맨 앞에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.

const numbers = [3, 4, 5];
const newLength = numbers.unshift(1, 2);

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

 

주의사항: push()보다 성능이 느립니다. 모든 기존 요소의 인덱스를 재조정해야 하기 때문이죠.

 

실무 활용 예시:

// 최신 알림을 맨 위에 추가
const notifications = [
  { id: 2, message: '댓글이 달렸습니다' },
  { id: 3, message: '좋아요를 받았습니다' }
];

notifications.unshift({ id: 1, message: '새로운 메시지가 도착했습니다' });
console.log(notifications);
// [
//   { id: 1, message: '새로운 메시지가 도착했습니다' },
//   { id: 2, message: '댓글이 달렸습니다' },
//   { id: 3, message: '좋아요를 받았습니다' }
// ]

---

4. shift() - 배열 앞에서 요소 제거

shift()는 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다.

const fruits = ['사과', '바나나', '오렌지'];
const firstFruit = fruits.shift();

console.log(firstFruit); // '사과'
console.log(fruits); // ['바나나', '오렌지']

 

주의사항: pop()보다 성능이 느립니다. 모든 남은 요소의 인덱스를 재조정해야 하기 때문입니다.

 

실무 활용 예시:

// 대기열(Queue) 처리
const queue = ['작업1', '작업2', '작업3'];

while (queue.length > 0) {
  const currentTask = queue.shift();
  console.log(`처리 중: ${currentTask}`);
}
// 출력:
// 처리 중: 작업1
// 처리 중: 작업2
// 처리 중: 작업3

---

5. splice() - 배열의 중간에 추가/제거

splice()는 배열의 특정 위치에서 요소를 제거하거나 추가할 수 있는 강력한 메서드입니다.

 

문법:

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

• start: 변경을 시작할 인덱스
• deleteCount: 제거할 요소의 개수
• item1, item2, ...: 추가할 요소들 (선택사항)

5-1. 요소 제거하기

const fruits = ['사과', '바나나', '오렌지', '포도', '딸기'];

// 인덱스 2부터 2개 제거
const removed = fruits.splice(2, 2);

console.log(removed); // ['오렌지', '포도']
console.log(fruits); // ['사과', '바나나', '딸기']

5-2. 요소 추가하기

const fruits = ['사과', '바나나', '딸기'];

// 인덱스 2에 '오렌지'와 '포도'를 추가 (제거는 0개)
fruits.splice(2, 0, '오렌지', '포도');

console.log(fruits); // ['사과', '바나나', '오렌지', '포도', '딸기']

5-3. 요소 교체하기

const fruits = ['사과', '바나나', '오렌지'];

// 인덱스 1부터 1개를 제거하고, '망고'를 추가
fruits.splice(1, 1, '망고');

console.log(fruits); // ['사과', '망고', '오렌지']

 

실무 활용 예시:

// 할 일 목록에서 특정 항목 삭제
const todos = [
  { id: 1, task: '장보기' },
  { id: 2, task: '운동하기' },
  { id: 3, task: '공부하기' }
];

// id가 2인 항목을 찾아서 삭제
const indexToRemove = todos.findIndex(todo => todo.id === 2);
if (indexToRemove !== -1) {
  todos.splice(indexToRemove, 1);
}

console.log(todos);
// [
//   { id: 1, task: '장보기' },
//   { id: 3, task: '공부하기' }
// ]

---

메서드 비교표

메서드추가/제거위치원본 배열 변경반환값

push()	추가	끝	✅	새 배열 길이
pop()	제거	끝	✅	제거된 요소
unshift()	추가	앞	✅	새 배열 길이
shift()	제거	앞	✅	제거된 요소
splice()	추가/제거	임의의 위치	✅	제거된 요소 배열

---

성능 고려사항

• push(), pop(): 배열의 끝에서 작업하므로 O(1) - 가장 빠름
• unshift(), shift(): 배열의 앞에서 작업하므로 O(n) - 모든 요소를 이동해야 함
• splice(): 위치에 따라 O(n) - 중간 위치일수록 많은 요소를 이동해야 함

대량의 데이터를 다룰 때는 가능한 한 push()와 pop()을 사용하는 것이 좋습니다!

---

마무리

오늘은 자바스크립트 배열에서 요소를 추가하고 제거하는 5가지 핵심 메서드를 알아봤습니다.

 

간단 정리:

• 끝에 추가/제거: push(), pop()
• 앞에 추가/제거: unshift(), shift()
• 중간에 추가/제거: splice()

다음 2탄에서는 배열에서 원하는 요소를 찾는 탐색/검색 메서드들(find(), findIndex(), indexOf() 등)을 다뤄보겠습니다!

---

관련 포스트:

• [JavaScript] 배열 메서드 완벽 정리 (Array Method) 2탄 - 탐색/검색
• [JavaScript] 배열 메서드 완벽 정리 (Array Method) 3탄 - 변환