원본: JavaScript indexOf Polyfill
자바스크립트의 indexOf() 메소드는 배열이나 문자열 내 요소의 위치를 찾는 편리한 도구입니다.
이 메소드는 빌트인 메소드지만 상황에 따라 구현을 커스터마이징해야 할 때도 있습니다. 이렇게 polyfill을 만드는 것은 교육적이면서도 실용적일 수 있습니다.
이 포스트에서는 indexOf의 개념을 알아보고, polyfill 생성이 왜 중요한지 설명하고 실제로 구현해 보겠습니다.
Table of Contents
indexOf() 메소드의 이해
polyfill 생성에 대해 알아보기 전에 indexOf() 메소드의 핵심 기능을 알아보겠습니다.
이 메소드는 배열이나 문자열에서 특정 요소를 검색하고 검색된 첫 번째 인덱스를 리턴합니다.
만일 요소를 찾지 못했다면 -1을 리턴합니다.
다음의 간단한 예제를 개발자 도구에서 확인해 보겠습니다:
const message = "javascript is fun!";
const index = message.indexOf("is");
console.log(index);
이 예제에서는 “javascript is fun!”을 가지고 있는 문자열 변수 message에서 “is”의 시작 인덱스를 찾았습니다.
메소드 실행 결과 문자열에서 “is”가 처음 시작되는 인덱스인 11이 리턴되어 console.log() 메소드로 출력했습니다.
다음은 배열을 검색하는 예제입니다:
const fruits = ["apple", "banana", "cherry", "date"];
const index = fruits.indexOf("cherry");
console.log(index);
이번 예제에서는 문자열과 마찬가지로 배열에서 “cherry”에 해당하는 인덱스를 검색해 2를 리턴했습니다.
왜 indexOf()의 polyfill을 만들어야 할까
자바스크립트에 빌트인 메소드가 있는데 왜 커스텀 버전의 함수를 만들어야 하는지 궁금할 수 있습니다.
이에는 몇 가지 이유가 있습니다.
1. Compatibility: 이 메소드를 지원하지 않는 예전 브라우저 또는 실행 환경과의 호환성을 보장합니다.
2. Custom Behavior: 사용자 정의 로직이나 필요에 맞는 추가 기능을 구현합니다.
3. Learning Opportunity: polyfill을 구축하는 것은 자바스크립트와 빌트인 메소드에 대한 이해도를 높이고 공부를 하기 위한 좋은 방법입니다.
indexOf() polyfill 생성
이제 커스텀 indexOf() 함수를 만들어 보겠습니다.
이번 섹션의 목표는 배열의 기본 메소드 동작을 그대로 모방하는 것 입니다.
function customIndexOf(arr, searchElement, fromIndex = 0) {
if (!Array.isArray(arr)) {
throw new TypeError("First argument must be an array");
}
const length = arr.length;
const startIndex = fromIndex >= 0 ? fromIndex : Math.max(0, length + fromIndex);
for (let i = startIndex; i < length; i++) {
if (arr[i] === searchElement) {
return i;
}
}
return -1;
}customIndexOf() 함수의 작동 방식은 다음과 같습니다:
1. 먼저 arr(검색할 배열), searchElement(찾을 요소), fromIndex(검색을 시작할 인덱스, 기본값 0)의 세 가지 매개 변수를 받습니다.
2. 첫 번째 인수 arr이 배열인지 확인합니다. 배열이 아닌 경우 TypeError가 발행합니다.
3. 배열 arr의 길이를 계산합니다.
4. fromIndex 매개변수를 기반으로 검색을 시작할 인덱스인 startIndex를 계산합니다. fromIndex가 음수이면 배열 끝에서 시작 인덱스를 계산합니다.
5. 계산된 startIndex를 시작으로 배열에 루프를 돕니다.
6. searchElement를 찾으면 해당 요소가 발견된 인덱스를 리턴합니다.
7. 요소를 찾을 수 없으면 -1을 리턴합니다.
customIndexOf() 사용 방법
이제 customIndexOf() 함수가 완성되었습니다. 어떻게 사용하는지 알아보겠습니다:
const fruits = ["apple", "banana", "cherry", "date"];
const index1 = customIndexOf(fruits, "cherry");
const index2 = customIndexOf(fruits, "grape");
console.log(index1);
console.log(index2);
customIndexOf() 함수는 기본 메소드와 비슷하게 작동하며, 검색된 요소의 인덱스를 리턴하거나 요소가 발견되지 않으면 -1을 리턴합니다.
정리
사용자 정의 ployfill을 구축하는 것은 자바스크립트와 해당 배열의 조작 방법에 대한 이해를 높이는 좋은 연습입니다.
자바스크립트는 indexOf() 메소드와 같은 빌트인 메소드를 제공하지만, 자신만의 구현을 생성하면 특정 요구 사항에 맞게 조정할 수 있습니다.
더 많은 기능을 추가하거나 성능을 최적화하기 위해 ployfill을 자유롭게 확장할 수 있습니다.
이는 자바스크립트의 기능을 탐색하고 개발자로서 문제 해결 능력을 향상시킬 수 있는 실용적인 방법입니다.