기본 Array.prototype.slice() 메서드를 직접 덮어쓰는(오버라이딩하는) 커스텀 배열 메서드를 작성해야 한다고 가정해 보겠습니다.
일반적으로 Array.prototype.slice() 메서드는 시작 인덱스(start)와 끝 인덱스(end) 두 개의 인수를 받아, 원본 배열에서 start 인덱스부터 end-1 인덱스까지의 하위 배열을 반환합니다.
하지만 우리가 원하는 것은 이 slice() 함수가 end-1이 아닌 end 인덱스까지 포함한 하위 배열을 반환하도록 동작을 변경하는 것입니다. 이를 구현한 코드는 아래와 같습니다.
구현 방식은 간단합니다. for 루프를 사용해 배열을 순회하는데, 이는 실제로 자바스크립트에서 제공하는 다른 배열 메서드보다 실행 속도가 빠릅니다. 순회하면서 조건에 맞는 요소들을 새 배열에 담은 뒤 해당 하위 배열을 반환하고, 마지막으로 방금 작성한 메서드로 Array.prototype.slice()를 덮어써서 기본 동작을 대체합니다.
예제 코드
const arr = [5, 5, 34, 43, 43, 76, 78, 3, 23, 1, 65, 87, 9];
const slice = function(start = 0, end = this.length - 1) {
const part = [];
for (let i = start; i <= end; i++) {
part.push(this[i]);
}
return part;
};
Array.prototype.slice = slice;
console.log(arr.slice(0, 4));
console.log(arr.slice(5, 8));
console.log(arr.slice());
출력 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[ 5, 5, 34, 43, 43 ]
[ 76, 78, 3, 23 ]
[
5, 5, 34, 43, 43, 76,
78, 3, 23, 1, 65, 87,
9
]
첫 번째 호출인 arr.slice(0, 4)는 인덱스 0부터 4까지 총 5개의 요소를 반환하고, 두 번째 호출인 arr.slice(5, 8)은 인덱스 5부터 8까지 총 4개의 요소를 반환합니다. 인수 없이 호출한 arr.slice()는 기본값에 따라 전체 배열을 그대로 반환합니다.
주의 사항
내장 프로토타입(Array.prototype)을 수정하는 것은 학습 목적이나 특수한 요구 사항이 있을 때 유용하지만, 실제 운영 환경에서는 권장되지 않습니다. 표준 메서드의 동작을 변경하면 다른 라이브러리나 팀원의 코드와 충돌이 발생할 수 있으며, 예측하기 어려운 버그의 원인이 될 수 있습니다. 대신 별도의 유틸리티 함수로 분리하거나, ES2022에서 도입된 Array.prototype.toSpliced() 등의 최신 메서드를 활용하는 것이 더 안전한 접근 방식입니다.