[lodash] map VS each 알고쓰자

lodash 라이브러리에서 collection 중에 map과 each가 있다.

일단 map의 간단한 정의를 알아보자

_.map(list, iteratee, [context])
	list: colletion으로써, 배열이나 객체가 될 수 있다.
	iteratee: list의 각 element(value)를 변형시키는 함수이다.
	[context]: iteratee 함수에서 this로 바인딩 되는 것이다.(생략가능)

list의 각 element(value)를 iteratee 함수를 돌려, 값을 변형시키고, 변형된 값을 배열의 형태로 리턴한다.

list 내에 데이터 즉, 배열이나 객체 타입 변수가 들어오고, iteratee는 list에 있는 데이터 element를 꺼내와 변형하는 함수다.

코드를 예를 들어서 설명할 것이다.

 

 // list: params, iteratee: data
_.each(params, data => {	  

    	// error handling try-catch
    	try{
            const {a, b} = data;
            /*
            * a는 새로 _a const 변수를 선언하여 _.compact로 감싸서 null값이나 undefined가 있으면
            * list내에 삭제
            * _.map를 사용하여 a에 있는 list data를 꺼내와 data내에 a1를 return 되도록 반복한다.
            */
            const _a = _.compact(
            	_.map(a, data => {	
                	const { a1 } = data;
                    return a1;
                    },
                ),
            );

	   /*
            * b도 마찬가지로 새로 _b const 변수를 선언한다
            * _.map를 사용하였고 list는 _.filter라는 라이브러리를 사용하여 b라는 list내에
            * element(o)를 꺼내와 o가 'b1'인 list를 선언한 것이다.
            * item은 'b1'인 element만 가져와 return 되도록 반복한다.
            */
            const _b = _.map(
                 _.filter(b, o => {
                    return o === 'b1';
                 }),
                 item => {
                    return item;
                 },
            );
            
            /*
            * 데이터 조작이 다 이뤄진 _a, _b를 alias 처리하여 return명을 원래 a,b로 되게끔 return한다.
            */
            return {
            	a : _a,
                b : _b,
            };
         } catch (e) {
            console.log(e);
            return null;
         }
});

 

회사에서 내가 작업한 코드를 일부 발췌하여 이해하기 쉽고, 저작권에 걸리지 않게 수정해봤다.

 

코드에 이해하기 쉽도록 주석을 달아봤다. 만약 코드를 복사해서 테스트할려하면 들여쓰기가 조금 안 맞을수도 있지만 양해바랍니다😅

eslint 설정되어 있으면 자동으로 들여쓰기 되서 저장될 것이다.

 

변수 _a에 사용된 _.map은 전체적으로 null, undefined, '', false와 같은 데이터를 없애서 _a에 return 받고 싶어 compact로 감쌌지만, 결국 map은 return이 존재한다는 것이다.

 

그러면 이쯤에서 내가 포스팅한 의도가 보이는데 _.each는 return값이 존재하지 않는다는 것이다.

대학교에서 C프로그래밍 수업을 들으면 for문이 있는데 조건문이 없는 list가 배열 length만큼 루프를 도는 for문인 것이다.

 

_.each의 정의는 이렇다.

each _.each(list, iteratee, [context])
	list: colletion으로써, 배열이나 객체가 될 수 있다.
	iteratee: list의 각 element(value)를 반복적으로 돌리는 함수이다.
	[context]: iteratee 함수에서 this로 바인딩 되는 것이다.(생략가능)

_.map과 별다른 건 없다.

 

다음 each문은 이와 같은 코드로 알 수 있다.

const responseData = [];

/*
* 위에 선언한 list a와 iteratee data를 선언 후 a의 element a1를 꺼내서
* find 함수로 '에이'라는 이름을 찾아 findByA라는 변수에 return
* findByA 변수가 존재하면 위에 선언한 responseData 배열에 push
*/

_.each(a, data => {
	const { a1 } = data;
    const findByA = a1.find(v => v === '에이');
    if (findByA) {
    	responseData.push(data);
    }
});

// Array return
return responseData;

이와 같이 _.each는 return이 존재하지 않고 데이터를 조작하거나 가공하여 원하는 데이터를 추출할 수 있다.

 

지금까지 map, each 차이점과 정의, 사용법에 대해서 써봤는데 이 글의 중요한 점은 return 여부, map, each안에 list를 굳이 선언만 하지 않고 조작된 list를 넣을 수 있는 점인듯하다.