14-6. Array 오브젝트(ES5 기준) / 필터, 매핑

filter()

• forEach()처럼 시멘틱 접근

• 배열의 엘리먼트를 하나씩 읽어가면서

  • 콜백 함수에서 true를 반환하면 현재 읽은 엘리먼트를 반환

      var value = [10, 20, 30, 40];
      var fn = function (value, index, array) {
          return value > 15;
      }
      var result = value.filter(fn);
      console.log(result); // [20, 30, 40]
    

    1. [20, 30, 40]이 15보다 크므로 return value > 15에서 비교 결과가 true입니다.
    2. true일 때 현재의 엘리먼트를 반환합니다.
    3. 다수를 반환할 수 있으므로 반환되는 엘리먼트를 배열에 첨부합니다.
    4. 콜백 함수에서 false만 반환하면 즉, true가 하나도 없으면 빈 배열이 result 변수에 할당됩니다.

• 조건에 맞는 엘리먼트를 추려낼 때 유용

map()

• forEach()처럼 시맨틱 접근

• 배열의 엘리먼트를 하나씩 읽어가면서

  • 콜백 함수에서 반환한 값을 새로운 배열에 첨부하여 반환

      var value = [10, 20, 30];
      var fn = function (value, index, array) {
          return value + this.add;
      }
            
      var point = {add: 100};
      var result = value.map(fn, point);
      console.log(result); // [110, 120, 130]
    

map()과 forEach() 메소드는 배열의 엘리먼트 수만큼 반복합니다.
이런 측면에서는 같습니다.
그런데 forEach() 메소드는 반환값이 없습니다.
반환을 하려면 콜백 함수에서 의도적으로 코드를 작성해야됩니다.
하지만 map()은 값을 반환해주면 배열로 반환합니다.

값을 반환하는 측면에서 본다면 map()이 훨씬 좋지만, 그렇다고 forEach()가 map()보다 지능이 떨어지진 않습니다.

왜냐하면 map()과 forEach()는 근본적으로 서로 목적이 다릅니다.
forEach()는 for문의 확장입니다.
그리고 map()은 forEach()처럼 시맨틱 접근하면서 기본적으로 콜백함수에서 반환한 값을 반환하는 것입니다.

사용하는 목적이 다릅니다.