JavaScript 배열의 `includes()` 메서드 동작 원리

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 배열 조작 및 디버깅에 관심 있는 개발자, 특히 includes() 메서드의 내부 로직 이해가 필요한 중급 이상 개발자

핵심 요약

• includes()는 SameValueZero 알고리즘을 기반으로 요소 비교 → NaN 포함 검출 가능
• fromIndex 매개변수는 음수/초과 시 검색 범위 제한 → 성능 최적화 가능
• fromIndex가 undefined일 경우 0부터 시작 → 기본 동작 이해 필수

섹션별 세부 요약

1. `includes()` 기본 동작

• 배열에 searchElement 존재 여부를 boolean로 반환
• fromIndex가 생략되면 0부터 검색 시작
• 예: ['a', 'b'].includes('b') → true

2. `fromIndex`의 영향

• 양수: 지정된 인덱스부터 검색 (ex: fromIndex=2 → index 2 이후 검색)
• 음수: array.length + fromIndex로 변환 (ex: fromIndex=-1 → array.length-1부터 검색)
• fromIndex > array.length: 즉시 false 반환 (검색 수행 X)

3. `NaN` 처리 특징

• NaN === NaN → false지만 includes()는 SameValueZero 알고리즘 사용
• SameValueZero(NaN, NaN) → true
• SameValueZero(0, -0) → true (0과 -0 동일 처리)

4. `SameValueZero` 알고리즘 구조

• x === y → true
• x !== x && y !== y → true (NaN 비교 시)
• ==와 ===와의 차이: 1 === '1' → false vs SameValueZero → false

결론

• includes() 메서드 사용 시 SameValueZero 알고리즘과 fromIndex의 영향을 고려해야 함
• NaN 검출이 필요한 경우 includes()가 적합하고, fromIndex를 통해 검색 범위를 제한하면 성능 향상 가능
• 디버깅 시 SameValueZero의 특성을 기억하여 예상치 못한 결과를 방지해야 함