JavaScript pop(), unshift(), shift() 정리

자바스크립트 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() : 첫 번째에 요소 추가