🚀 JavaScript 알고리즘 성능 최적화: 수만 번의 반복을 견디는 코드 작성법

단순히 ‘동작하는 코드’를 넘어 ‘빠르고 효율적인 코드’를 작성하기 위한 4가지 핵심 가이드를 정리합니다.

1. shift() 대신 인덱스 직접 참조

• 문제점: shift()는 배열의 맨 앞 요소를 제거한 뒤, 뒤에 남은 모든 요소를 한 칸씩 앞으로 당깁니다. 배열의 크기가 N이라면 N번의 연산이 추가로 발생하여 시간 복잡도가 O(N)이 됩니다. 큐(Queue)의 크기가 클수록 성능이 기하급수적으로 떨어집니다.

• 해결책: 배열은 그대로 두고, 다음에 꺼낼 요소의 위치를 가리키는 head 변수를 활용하여 인덱스 직접 참조 방식으로 관리하세요.

• 예시:

// ❌ 비효율적 (매번 배열 재정렬)
while (queue.length > 0) {
    const item = queue.shift();
}

// ✅ 효율적 (인덱스 직접 참조로 포인터만 이동)
let head = 0;
while (head < queue.length) {
    const item = queue[head++];
}

2. 전개 연산자(…) 대신 push()

• 문제점: […arr, newItem]과 같은 전개 연산자는 구문은 깔끔하지만, 실행될 때마다 새로운 배열 메모리를 할당하고 기존 데이터를 모두 복사합니다. 반복문 안에서 쓰면 매번 수만 개의 데이터를 복사하는 낭비가 발생합니다.

• 해결책: 기존 배열을 수정하는 push()를 사용하세요. push()는 배열의 끝에 요소를 추가만 하므로 훨씬 빠릅니다.

• 예시:

arr = [...arr, item] : *O(N)* (복사 비용 발생)

arr.push(item) : *O(1)* (추가 비용만 발생)

3. 구조 분해 할당(Destructuring) 대신 인덱스 직접 참조

• 문제점: const [x, y] = pos;와 같은 구조 분해 할당은 가독성은 좋지만, 내부적으로는 반복자(Iterator)를 생성하고 할당하는 추가적인 연산 과정을 거칩니다. 수만 번의 반복문 안에서는 이 작은 차이가 성능 저하로 이어질 수 있습니다.
  • 상세 설명: 자바스크립트 엔진은 배열 구조 분해를 수행할 때 해당 배열의 Symbol.iterator를 호출하여 이터레이터 객체를 만듭니다. 이후 각 요소에 대해 next() 메서드를 호출하여 값을 꺼내고 변수에 할당합니다. 단순한 값 접근에 비해 함수 호출과 객체 생성이라는 오버헤드가 발생하며, 이는 수만 번의 루프 내에서 성능 저하의 원인이 됩니다.
  • 내부 동작 예시:

  // 우리가 작성하는 코드
  const [x, y] = pos;
  
  // 엔진이 실제로 수행하는 과정 (의사 코드)
  const iter = pos[Symbol.iterator](); // 1. 이터레이터 생성
  const x = iter.next().value;         // 2. 메서드 호출 및 값 할당
  const y = iter.next().value;         // 3. 메서드 호출 및 값 할당
  // 이 과정에서 객체 생성과 여러 번의 함수 실행이 발생함
  

• 해결책: 성능이 극도로 중요하다면 pos[0], pos[1]과 같이 직접 인덱스로 접근하는 것이 가장 빠릅니다.

4. 지속적인 함수 호출 대신 인라인(Inline) 직접 계산

• 문제점: 작은 기능을 하는 함수(예: 좌표의 유효성을 검사하는 isInside(x, y))를 반복문 안에서 수만 번 호출하면, 함수 실행 컨텍스트를 생성하고 스택에 쌓는 ‘오버헤드’가 누적됩니다.

• 해결책: 성능 최적화가 절실한 구간에서는 로직을 함수로 빼지 않고 반복문 안에 직접 작성하는 것이 유리합니다.

• 예시:

// ❌ 매번 스택 생성
if (isValid(x, y)) { ... }

// ✅ 직접 조건문 작성
if (x >= 0 && x < n && y >= 0 && y < m) { ... }