filter method로 조건에 부합하지 않는 배열 요소 걸러내기

filter method로 조건에 부합하지 않는 배열 요소 걸러내기

이번에는 배열의 filter method에 대해서 알아 보도록 하겠습니다.

저는 아직 초심자이지만 filter이름만 봐도 어떤 역할을 해 줄 녀석인지 대충 감을 잡을 수 있을 것 같습니다.

filter를 사용하면 callback 함수 내에 명시된 조건에 부합하는 배열의 요소만 걸러내어 새로운 배열을 만들 수 있습니다. (immutable)

Summary - Array.prototype.filter() - immutable - 조건에 부합하는 배열의 요소만 취해 새로운 배열을 형성

사용 예를 살펴 보도록 하겠습니다.

문제) Write a function called "removeElement". Given an array of elements, and a "discarder" parameter, "removeElement" returns an array containing the items in the given array that do not match the "discarder" parameter.

Notes: * If all the elements match, it should return an empty array. * If an empty array is passed in, it should return an empty array.

var output = removeElement([1, 2, 3, 2, 1], 2); console.log(output); // --> [1, 3, 1]

함수의 첫 번째 parameter로 배열을 받았고, 두 번째 parameter인 2를 포함하지 않는 새로운 배열을 생성해야 하는 문제 입니다.

filter method를 이용해 문제 해결을 해보면 아래와 같습니다.

function removeElement(array, discarder) {
  return array.filter(function(cur) {
    return cur !== discarder; // discarder가 아닌 요소만 새로운 배열에 추가함.
  });
}

이렇게 filter method를 이용해 두 번째 parameter로 받은 숫자 2를 포함하지 않는 새로운 배열 [1, 3, 1]을 생성할 수 있습니다.

for loop를 이용해 다른 방법으로 해결을 해 보면,

function removeElement(array, discarder) {
  newArr = [];
  for (var i = 0; i < array.length; i++) {
    if (array[i] !== discarder) {
      newArr.push(array[i]);
    }
  }
  return newArr;
}

이와 같이도 코딩을 할 수 있었습니다.

다른 방법으로 어떤 것이 있을지 생각해 보니, 지금 실력으로 떠오른 것은 slice method입니다.

function removeElement(array, discarder) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === discarder) {
      array.splice(i, 1);
    }
  }
  return array;
}

주의할 점은 위의 filter method는 원본은 보존하고 새로운 배열을 반환하는 반면(immutable), splice method는 기존의 배열을 수정하는 것이기 때문에 차이점에 대해 인지를 해야 합니다.