자바스크립트 특정 값을 지워주는 내장 함수 만들어보기(feat. splice)

별 이유는 없지만 모든 배열에서 짝수를 없에는 내장 함수를 만들고 싶을 수 있다.

 

 

let Num = [1, 2, 3, 3, 4, 5, 9, 135, 100, 500, 141, 800, 900, 400, 300];

 

이 배열에서 짝수를 없에는 것은 쉽지만 이 배열 뿐 아니라 모든 배열에서 짝수를 죄다 삭제하고 싶다.

prototype에 함수를 지정해주면 된다.

Num은 배열이기 때문에 Num의 프로토타입은 Array이다.

 

 

Array.prototype.removeCouple = function () {
  for (let i = 0; i < this.length; i++) {
    if (this[i] % 2 === 0) {
      this.splice(i, 1);
    }
  }
};

논리적으로 완벽한 코드이다.

배열을 for문으로 돌면서 2로 나눴을 때 나머지가 0인 값을 모두 지우고 나머지만을 반환하게 된다.

그러면 직접 함수를 실행하고 코드를 출력해보자.

 

 

num.removeCouple();
console.log(num);

 

오잉.. 결과 값의 상태가..??

이유는 간단하다. splice 함수가 배열 자체를 변형시키기 때문에 일어난 일이다.

 

 

 

인덱스 1번부터 시작한 거 실화인가요? 죄송합니다.

배열의 값이 지워지면 그림과 같이 뒤에 있던 값들이 모두 앞으로 인덱스를 한 칸씩 옮기게 된다.

그러니까 5가 지워지면 6이 인덱스 [5]에 들어가기 때문에 6은 splice함수가 체크하지 못하고 지나간다는 것이다.

 

이를 해결하려면 어떻게 해야할까? for문을 돌릴 때 i가 인덱스 번호를 count하는 역할을 하고 있으니 splice 함수가 발동될 때마다 i도 값을 1씩 빼주면 된다.

 

 

let num = [1, 2, 3, 3, 4, 5, 9, 135, 100, 500, 141, 800, 900, 400, 300];

Array.prototype.removeCouple = function () {
  for (let i = 0; i < this.length; i++) {
    if (this[i] % 2 === 0) {
      this.splice(i, 1);
      --i;
    }
  }
};

num.removeCouple();

console.log(num);

 

정상적으로 원하는 값이 출력되는 것을 확인할 수 있다.