[자바스크립트] 배열의 특정 값 추출(splice/pop)하기

* 자바스크립트의 오브젝트로 만들었을 경우에는 쉽게 특정 값에 대하여 삭제 가능하지만 배열인 경우에는 다소 어렵다. 게다가 IE8 이전 버전은 조금 귀찮기도 하다. 따라서 다음과 같은 간단한 함수를 하나 만들어둬도 괜찮을 것이다.

function remove(arr, value) {
  var i;
  if (arr.indexOf) { // IE9+,  다른 모든 브라우져
    while((i = arr.indexOf(value)) !== -1) { //해당 값이 arr에 있는 동안 루프
      arr.splice(i, 1);
    }
  } else { // IE8 이하
    for (i = arr.length; i--;) {  //뒤에서부터 배열을 탐색
      if (arr[i] === value) {
        arr.splice(i, 1);
      }
    }
  }
}

: IE9이상, 그리고 다른 모든 브라우져에서는 기존적으로 indexOf 함수가 있기 때문에 해당 배열에 indexOf 함수가 있는지 체크하고 있으면 사용하고, 없으면 루프를 돌면서 수동으로 체크한다. 뒤에서부터 루프를 도는 것은 배열의 값이 삭제되었을 때 인덱스가 수정되는 것을 방지하고자하기 위함이다. 참고로 위의 소스는 배열 내의 '모든 해당 값'을 삭제할 것이다. 하나만 삭제하려면 아래와 같이 하면 될 것이다.

function remove(arr, value) {
  var i, len;
  if (arr.indexOf) { // IE9+,  다른 모든 브라우져
    i = arr.indexOf(value);
    if(i !== -1) {
      arr.splice(i, 1);
    }
  } else { // IE8 이하
    len = arr.length;
    for (i = 0; i < arr.len; i++) {
      if (arr[i] === value) {
        arr.splice(i, 1);
        return;
      }
    }
  }
}

: 만약 remove 함수를 많이 호출해야한다면 매번 if를 하기보다는 처음에 한번 if로 indexOf가 있는지 체크해서 특정 함수를 사용하는 방법도 있다.

var remove = function (arr, value) {
  if ([].indexOf) {
    remove = function (arr, value) {  // IE9 이상, 모든 브라우져인 경우 아래 함수로 재설정
      while((i = arr.indexOf(value)) !== -1) { //해당 값이 arr에 있는 동안 루프
        arr.splice(i, 1); 
      }
    }
  } else {
    remove = function (arr, value) { // IE8이하인 경우 아래의 함수로 재설정
      for (i = arr.length; i--;) {  //뒤에서부터 배열을 탐색
        if (arr[i] === value) {
          arr.splice(i, 1);
        }
      }
    }
  }
  remove(arr, value); // 재설정된 함수로 다시 호출
}

: 이렇게 간단하게 구현해서 사용하면 된다.

끝.