javascript Map vs filter 차이

https://stackoverflow.com/questions/2442798/javascript-filter-vs-map-problem

Javascript filter vs map problem

자바스크립트에서 각 요소를 순회하며 검색하는 기능을 구현하고 있었다.

map의 경우 각 요소에 접근하여 정보를 수정하는 경우

filter는 각 요소에 접근하여 특정 정보를 리턴하는 경우 사용하면 좋다고 한다.

 

Quoted from:

JavaScript: The Definitive Guide
by David Flanagan

 

map()

The map() method passes each element of the array on which it is invoked to the function you specify, and returns an array containing the values returned by that function.

For example:

a = [1, 2, 3];

b = a.map(function(x) { return x*x; });  // b is [1, 4, 9]

뭔가 가공을 해서 전달해주어야 할때는 map을 쓰되

 

filter()

The method returns an array containing a subset of the elements of the array on which it is invoked. The function you pass to it should be predicate: a function that returns true or false. The predicate is invoked just as for forEach() and map(). If the return value is true , or a value that converts to true, then the element passed to the predicate is a member of the subset and is added to the array that will become the return value.

Examples:

a = [5, 4, 3, 2, 1];

smallvalues = a.filter(function(x) { return x < 3 });   // [2, 1]

everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1]

특정 조건을 걸어서 리턴을 해주어야 할 때는 filter를 쓰면 된다고 한다.

 

나는 현재 fineOne과 같은 기능을 구현하므로 map 대신 filter를 사용하는 것이 맞는것 같다.

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 1 && word.length < 7 );

console.log(result);


> Array ["spray", "limit", "elite"]

한번 해보니 다음과 같이 비교 연산도 한줄안에 가능해져서 코드가 훨씬 깔끔해졌다.

 

여기서 더 깔끔하게 return 까지 한번에 시켜주자면

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => { return word.length > 1 && word.length < 7 });

console.log(result);

요런 식으로 해도 똑같은 결과가 나옴을 확인할 수 있었다.

 

근데 지금은 만약 값이 없다면 오류를 내면서 예외처리를 해주어야 하는 상황이다.

 

이럴때 체크용으로 사용하기 좋은 모듈은

일단 로그를 남겨야 하기 때문에 #log4js 그리고 비어있는지 확인해주는 모듈인 #lodash모듈 이다.

https://www.npmjs.com/package/lodash

lodash

const { getLogger } = require("log4js");
const { _ } = require('lodash');

요걸 해주고 예외처리를 추가한다.

lodash의 경우

_.isEmpty(비어있는지 체크하려는 자료)

이런 식으로 비어있는지 체크할 수 있는데 이건 상황에 맞게 추가하면 되고

      const funcName = "search words";
      try {
		const result = words.filter(word => { return word.length > 1 && word.length < 7 });
      } catch (error) {
        logger.error(`[${funcName}] err:`, err)
      }

요런식으로 예외처리까지 해주면 완성된다.