Javascript - 배열(Array)에서 value 값으로 삭제하기

  일을 하고 있던 와중에 배열에서 value 값을 찾아서 삭제해야 하는 경우가 생겼습니다. 그래서 열심히 구글링을 해보니 아래와 같은 방법이 있었습니다.

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};
 
var ary = ['three', 'seven', 'eleven'];
 
ary.remove('seven');
 
/* 배열 자체에 프로토 타입으로 선언하여 생성 */
 
function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}
var ary = ['three', 'seven', 'eleven'];
removeA(ary, 'seven');
 
/* function 으로 만들어준 형태 */

 이렇게 선언해주고 배열에서 삭제를 해보려 했더니 잘 동작하지 않았습니다. F12를 눌러서 console 창을 보니 뻘건 에러가 나고 있었는데, 뭐가 원인인지 찾아보니 IE에서는 indexOf가 작동하지 않음을 알게 되었습니다. 그래서 다시 구글링을 해보니 아래와 같은 내용을 찾을 수 있었습니다.

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(what, i) {
        i = i || 0;
        var L = this.length;
        while (i < L) {
            if(this[i] === what) return i;
            ++i;
        }
        return -1;
    };
}

 바로 indexOf를 prototype으로 만들어주는 코드입니다. 이렇게 해서 배열에서 value값을 찾아 삭제하여 일이 끝난 줄 알았는데....
 이렇게 하니 생긴 문제가, 다른 곳에서 배열을 잃어 들이다가 이 prototype들을 value로 판단하여 for문 안에서 이 구문을 값으로 하여 로직이 도는 경우가 있었습니다. 그래서 애써 찾은 코드들을 지우고 다시 찾아보기 시작했습니다. 해답은 역시 jQuery에 있었습니다. jQuery에서 제공해주는 API 중 하나인 grep을 사용하니 손쉽게 해결 되었습니다.

 위 사진은 jQuery 홈페이지에서 캡쳐한 사진입니다. grep은 위와 같이 사용하면 되는데 여기서 n은 value를 뜻하고 i는 index를 의미합니다. return은 다시 돌려줄 배열을 의미합니다. 따라서, 예를 들어 제가 [0, 1, 2]라는 배열에서 지우고 싶은 값이 '1' 이라면

$.grep( [ 0, 1, 2 ], function( n, i ) {
    return n != 1;
}, true );

 위와 같이 해주면 됩니다. 역시 jQuery만큼 편한게 없네요. 사실 간단히 생각하면 배열 for문 돌린 후 해당 값이 아닌 값들만 다시 배열에 넣어주기만 하면 되는 일이긴 한데, 어째 jQuery API를 보니 그런 생각이 나는걸 보니 머리가 굳긴 했나 봅니다. 아무튼, 다들 유용하게 쓰시길 바랍니다.