JavaScript Array: 첫번째 요소 쉽게 추가하고 삭제하기

JavaScript 배열은 데이터를 쉽게 다룰 수 있게 해주는 유용한 자료구조입니다. 특히 배열의 첫번째 요소를 추가하거나 삭제하는 방법은 여러 상황에서 자주 사용됩니다. 이 글에서는 unshift와 shift 메서드를 이용해 배열의 첫번째 요소를 쉽게 추가하고 삭제하는 방법을 살펴보겠습니다.

배열의 첫번째 요소 추가하기

배열의 첫번째 요소를 추가하려면 Array.prototype.unshift 메서드를 사용합니다. 이 메서드는 새로운 요소를 배열의 앞쪽에 추가하고, 그 결과로 배열의 새로운 길이를 반환합니다.

예제를 통해 사용법을 알아보겠습니다:

javascript
let fruits = ['banana', 'orange', 'apple'];
let newLength = fruits.unshift('strawberry');
console.log(fruits); // ['strawberry', 'banana', 'orange', 'apple']
console.log(newLength); // 4

이 예제에서 fruits 배열의 첫번째 요소로 strawberry가 추가되고, 배열의 길이는 4가 되었습니다. unshift 메서드는 배열을 변경하는 파괴적인 메서드입니다. 따라서 원본 배열이 수정된다는 점을 유의해야 합니다.

배열의 첫번째 요소 제거하기

배열의 첫번째 요소를 제거하려면 Array.prototype.shift 메서드를 사용합니다. 이 메서드는 배열의 첫번째 요소를 제거하고, 그 제거된 요소를 반환합니다.

다음 예제를 통해 사용법을 살펴보겠습니다:

javascript
let fruits = ['strawberry', 'banana', 'orange', 'apple'];
let removedElement = fruits.shift();
console.log(fruits); // ['banana', 'orange', 'apple']
console.log(removedElement); // 'strawberry'

이 예제에서 fruits 배열의 첫번째 요소인 strawberry가 제거되고, 제거된 값은 removedElement에 저장됩니다. 이 역시 배열을 변경하는 파괴적인 메서드로, 원본 배열이 변경됩니다.

unshift와 shift 메서드의 활용 사례

두 메서드는 매우 유용하지만, 이를 사용할 때 몇 가지 주의할 사항도 있습니다. 반복문에서 shift나 unshift를 사용하면 성능이 저하될 수 있습니다. 이는 배열의 길이가 길어질수록 더 많은 요소를 이동해야 해서 생기는 문제입니다. 따라서, 큰 배열에 반복적으로 요소를 추가하거나 제거해야 한다면, 다른 자료구조를 고려하는 것이 좋습니다.

다음은 실생활에서 shift와 unshift를 활용하는 몇 가지 사례입니다.

1. 큐(Queue) 자료구조

큐는 선입선출(FIFO) 방식을 따르는 자료구조입니다. 먼저 들어간 것이 먼저 나오는 방식으로, 이를 구현하기 위해 shift와 unshift를 사용할 수 있습니다.

javascript
class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(element) {
    this.items.unshift(element);
  }

  dequeue() {
    if (this.isEmpty()) {
      return 'Queue is empty';
    }
    return this.items.shift();
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

let queue = new Queue();
queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);
console.log(queue.dequeue()); // 10
console.log(queue.dequeue()); // 20

2. 실시간 데이터 처리

실시간 데이터 처리 작업에서도 shift와 unshift 메서드는 데이터의 순차적인 추가와 제거를 효율적으로 도와줍니다. 예를 들어, 실시간으로 유저의 활동 로그를 저장하고, 일정 기간이 지나면 오래된 로그를 제거하는 시스템을 구현할 수 있습니다.

javascript
let activityLog = [];

function logActivity(activity) {
  activityLog.unshift(activity);
  if (activityLog.length > 100) { // 로그가 100개를 초과하면 오래된 로그를 제거
    activityLog.pop();
  }
}

logActivity('User logged in');
logActivity('User clicked button');
console.log(activityLog);

결론

JavaScript에서 배열의 첫번째 요소를 추가하거나 제거하는 것은 unshift와 shift 메서드를 통해 쉽게 할 수 있습니다. 이 메서드들은 다양한 상황에서 유용하게 사용될 수 있지만, 성능 상의 주의사항을 염두에 두고 사용하는 것이 좋습니다. 이 글에서 다룬 내용을 통해 배열을 더욱 효율적으로 다루는 방법을 익히길 바랍니다.