🚀 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) { ... }

5. Array.includes() 대신 Set.has() 활용하기

• 문제점: 배열의 includes()는 처음부터 끝까지 요소를 하나씩 대조하는 전체 탐색(O(N))방식입니다. 데이터가 많아질수록 “방문 여부”를 확인하는 속도가 매우 느려집니다.

• 해결책: 중복을 허용하지 않는 Set객체를 사용하세요. Set.has()는 데이터 양과 상관없이 즉시 값을 찾는 O(1) 성능을 보장합니다.

  • 왜 Set이 더 빠른가요?: “배열 인덱스 직접 참조”를 컴퓨터가 내부적으로 아주 고도화해서 구현해 놓은 것이라고 보시면 돼요!
    1. 해싱(Hasing): 입력된 값을 고유한 숫자 주소로 변환합니다.
    2. 직접 참조: 변환된 주소로 직접 점프해서 데이터가 있는지 확인합니다.

📦 배열 (Array): "줄 세우기" 방식
배열은 데이터가 들어온 순서대로 0번, 1번, 2번... 번표를 붙여서 줄을 세웁니다.
* 찾기(includes): "여기 'apple' 있니?"라고 물으면, 컴퓨터는 0번부터 끝번까지 하나하나 대조하며 걸어갑니다. (데이터가 10,000개면 최악의 경우 10,000번 걸어야 해요.) → 시간 복잡도 O(N)

🗺️ 세트 (Set): "사물함" 방식 (Hash Table)
Set은 데이터를 넣을 때 **'해시 함수'**라는 마법의 계산기를 통과시킵니다.
* 저장: 'apple'을 넣으면 계산기가 "너는 502번 사물함으로 가!"라고 주소를 딱 정해줍니다.
* 찾기(has): "여기 'apple' 있니?"라고 물으면, 컴퓨터는 다시 계산기를 돌려 바로 502번 사물함만 열어봅니다. 다른 데이터는 쳐다보지도 않죠. → 시간 복잡도 O(1)