자바스크립트 pop(), unshift(), shift() 함수란?
자바스크립트(JavaScript) 배열(Array)은 다양한 내장 메서드를 제공하여 배열 데이터를 손쉽게 추가하거나 삭제할 수 있습니다. 이 중 pop(), unshift(), shift() 메서드는 배열의 앞과 뒤에서 요소를 추가하거나 삭제할 때 사용하는 대표적인 함수입니다. 각각의 동작 방식을 이해하고 적절히 활용하면, 코드의 효율성과 가독성을 극대화할 수 있습니다.
pop() 메서드 : 배열 마지막 요소 제거
pop()의 기본 개념
pop() 메서드는 배열의 가장 마지막 요소를 제거하고, 제거된 요소를 반환합니다. 이때, 배열의 길이도 1 감소합니다.
let fruits = ['apple', 'banana', 'cherry'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 'cherry'
console.log(fruits); // ['apple', 'banana']
pop() 사용 시 주의사항
- 빈 배열에 pop()을 호출하면 undefined를 반환합니다.
- 원본 배열 자체가 변경됩니다(immutable이 아님).
pop()의 실전 활용 예시
function removeLastTask(taskList) {
let removedTask = taskList.pop();
console.log(`삭제된 작업: ${removedTask}`);
}
→ pop() 은 스택 자료구조(LIFO) 를 구현할 때 필수적인 메서드입니다.
shift() 메서드 : 배열 첫 번째 요소 제거
shift()의 기본 개념
shift() 메서드는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 나머지 요소들은 인덱스가 하나씩 앞으로 당겨집니다.
let numbers = [1, 2, 3, 4];
let firstNumber = numbers.shift();
console.log(firstNumber); // 1
console.log(numbers); // [2, 3, 4]
shift() 사용 시 주의사항
- 빈 배열에 대해 shift()를 호출하면 undefined가 반환됩니다.
- 배열의 모든 요소의 인덱스를 한 칸 앞으로 이동시키므로, 대규모 배열에 사용 시 성능에 유의해야 합니다.
shift()의 실전 활용 예시
function dequeue(queue) {
return queue.shift();
}
→ shift() 는 큐 자료구조(FIFO) 를 구현할 때 매우 중요한 역할을 합니다.
unshift() 메서드 : 배열 맨 앞에 요소 추가
unshift()의 기본 개념
unshift() 메서드는 하나 이상의 요소를 배열의 맨 앞에 추가하고, 변경된 배열의 길이를 반환합니다.
let colors = ['red', 'blue'];
let newLength = colors.unshift('green');
console.log(newLength); // 3
console.log(colors); // ['green', 'red', 'blue']
unshift() 사용 시 주의사항
- 기존 요소들의 인덱스가 하나씩 뒤로 밀리게 됩니다.
- 다수의 요소를 동시에 추가할 수 있습니다.
colors.unshift('yellow', 'purple');
console.log(colors); // ['yellow', 'purple', 'green', 'red', 'blue']
unshift()의 실전 활용 예시
function addHighPriorityTask(taskList, task) {
taskList.unshift(task);
console.log(`우선순위 작업 추가: ${task}`);
}
→ unshift() 는 긴급 작업 추가 같은 기능을 구현할 때 매우 유용합니다.
pop(), shift(), unshift() 비교
세 메서드 핵심 요약
메서드 기능 반환값 배열 변경 여부
pop() | 마지막 요소 제거 | 제거된 요소 | O |
shift() | 첫 번째 요소 제거 | 제거된 요소 | O |
unshift() | 맨 앞에 요소 추가 | 새로운 배열 길이 | O |
배열 조작 흐름도
- pop() : 마지막 → 제거
- shift() : 첫 번째 → 제거
- unshift() : 첫 번째 → 추가
메모리 성능 고려사항
- shift()와 unshift()는 배열의 모든 요소를 이동시키므로, 대규모 배열에서는 성능 저하를 일으킬 수 있습니다.
- pop()은 마지막 요소만 제거하므로 성능에 큰 부담이 없습니다.
pop(), shift(), unshift() 심화 응용
1. 큐(Queue) 구현하기
class Queue {
constructor() {
this.items = [];
}
enqueue(item) {
this.items.push(item);
}
dequeue() {
return this.items.shift();
}
}
→ FIFO 구조: 먼저 들어온 것이 먼저 나간다.
2. 스택(Stack) 구현하기
class Stack {
constructor() {
this.items = [];
}
push(item) {
this.items.push(item);
}
pop() {
return this.items.pop();
}
}
→ LIFO 구조: 나중에 들어온 것이 먼저 나간다.
3. 실시간 채팅 메시지 관리
let chatMessages = [];
function receiveMessage(msg) {
chatMessages.unshift(msg); // 새로운 메시지를 가장 앞에 추가
}
function readLatestMessage() {
return chatMessages.shift(); // 가장 최신 메시지를 읽기
}
→ 유저가 많고 실시간성이 중요한 서비스에서 빈번히 활용됩니다.
pop(), shift(), unshift()를 사용할 때의 팁
코드 가독성을 높이는 방법
- 기능별 메서드 사용 목적을 명확히 주석으로 달자.
- 스택, 큐, 일반 배열 조작 목적에 따라 일관된 방식으로 함수명을 지정하자.
오류 방지를 위한 방어 코드 작성
- 배열이 비어 있는지 먼저 체크하는 습관을 들이자.
- 빈 배열에 대해 pop()이나 shift()를 호출할 때 반환되는 undefined를 적절히 처리하자.
function safePop(arr) {
if (arr.length === 0) return null;
return arr.pop();
}
function safeShift(arr) {
if (arr.length === 0) return null;
return arr.shift();
}
결론
자바스크립트 배열을 다룰 때 pop(), shift(), unshift() 메서드는 없어서는 안 될 핵심 기능입니다. 이 세 가지 메서드를 정확히 이해하고 상황에 맞게 활용하면, 더 깔끔하고 효율적인 코드를 작성할 수 있습니다. 특히 데이터의 삽입과 삭제가 빈번하게 발생하는 프로그램에서는 반드시 숙지해야 합니다.
요약 :
- pop() : 마지막 요소 삭제
- shift() : 첫 번째 요소 삭제
- unshift() : 첫 번째에 요소 추가
'IT > 자바스크립트' 카테고리의 다른 글
JavaScript toFixed 소수점 제어 (1) | 2025.05.07 |
---|---|
JavaScript splice 용도 정리 (0) | 2025.05.07 |
자바스크립트 객체에 함수 추가하기 (0) | 2025.05.07 |
JavaScript 변수 선언 완전 정복 var, let 차이점과 사용법 (0) | 2025.05.07 |
JavaScript toString 가이드 (0) | 2025.04.28 |