underscore 알아보기 (1)

안녕하세요.

자바스크립트 라이브러리인 언더스코어에 다한 포스트를 하려고 합니다.

매우 작은 용량과 간단한 사용이 장점이며

자바스크립트로 array []나 object {}를 다룰때 필수적으로 필요한 라이브러리입니다.

약 100여가지의 함수가 있지만 ES5, ES6를 거치면서 안쓰게 되는 함수도 있고 (ES5, ES6의 내장함수가 더 빠르기 떄문)

쓰임이 겹치는 경우도 있습니다. 

문장 몇개와 예제 하나면 이해가 되는 함수들이 있는 반면에 난해한 함수도 있습니다.

활용도가 높은 함수 위주로 설명하겠습니다.

테스트를 진행할 샘플 데이터 입니다.

var data =  [
        {
            "productName": "Change Gout",
            "mf_compony": "Jam3",
            "mf_country": "Canada",
            "date": "July 21, 2017",
            "brand": "SOTD",
            "listOfIndex": [
                '가',
                '나',
                '다',
                '라'
            ],
            "productNumber": "23"
        },
        {
            "productName": "underscore sss",
            "mf_compony": "ms",
            "mf_country": "america",
            "date": "July 21, 2017",
            "brand": "SOTD",
            "listOfIndex": [
                1,
                '',
                3,
                '아'
            ],
            "productNumber": "60"
        },
        {
            "productName": "javascript ddd",
            "mf_compony": "google",
            "mf_country": "korea",
            "date": "July 21, 2017",
            "brand": "samsung",
            "listOfIndex": [
                '자',
                0,
                '타',
                '카'
            ],
            "productNumber": "55"
        }
    ];

1. _.each

역시 제일 많이 쓰이는 건 each인데요, 

ES5의 forEach가 더 빠른 성능을 내지만 _.each는 두세번째 인자로 인덱스와 전체 데이터를 넘겨주기 때문에 사용하기 편합니다.

또한 underscore의 each는 array[]와 object{}를 모두 사용할 수 있어 좋습니다.

_.each(data, function (each_data, index, all_data) {

//실행구간

});

//실행구간은 data.length 만큼 반복되며 

콜백함수 내에서는 all_data로 data에 접근할 수 있습니다.

data로 바로 접근해도 되지만 변수 유지에 혼란을 주기도하고, 특히 크롬 개발자 도구에서 해당함수를 벗어나면

변수접근이 안되기 때문에 ( 실제로는 동작하지만 ) 사용하기도 합니다.

each_data[0]를 로그로 찍어보면 이렇게 나오게 되겠네요.

{
    "productName": "Change Gout",
    "mf_compony": "Jam3",
    "mf_country": "Canada",
    "date": "July 21, 2017",
    "brand": "SOTD",
    "listOfIndex": [
        '가',
        '나',
        '다',
        '라'
    ],
    "productNumber": "23"
}

※ _.each를 살펴봤으니 이를 활용하여 context와 this에 대해 알아보겠습니다.

var basicArray = [1, 2, 3];
var newArray = [5, 6, 7];

_.each(basicArray, function (item) {

   console.log(item);
   console.log(this);

}, newArray);

위의 상황에서 console.log(item); 은 1, 2, 3 이 차례로 나올 것입니다.

저기서 this는 무엇일까요?

바로 newArray인 [5, 6, 7]입니다.

이 구성은 목표 객체를 기준삼아 반복문을 돌고 있다 하더라도

제 3의 데이터를 활용할수 있다는데에 가치가 있습니다.

2. _.find

배열이나 객체를 첫번째 파라미터로 받고, 두번째로 받는 파라미터는 배열의 요소나 객체의 프로퍼티 값을 받아

boolean값을 반환합니다.

_.each 함수는 작동되면서 자체적으로 목적달성 후 빠져나올 수 없는데

_,find 함수는 원하는 것을 찾으면 멈출 수 있는 장점이 있습니다.

_.find(data[0].listOfIndex, function (result) {

return typeof(result) === 'string';

});

data[0].listOfIndex 를 기준 데이터로 사용하고,

return을 활용해 조건식에 부합하면 반환하고 끝납니다.

3. _.countBy

반복문을 돌면서 결과물을 분류해낼 수 있습니다.

_.countBy(data[1].listOfIndex, function (result) {

    return typeof(result) === 'string' ? 'string' : 'number';

});

위 코드를 실행한다면

이런 식으로 조건에 맞는 갯수를 세어줍니다.

4. _.reduce

독특한 기능을 하고 있어서 소개해드립니다만 

reduce라는 이름의 의미와 하는 일이 무슨 관련이 있는지 의문이 드는 함수입니다.

이 함수를 사용하게되면 배열의 값들을 누적시켜 더해줍니다.

5. _.some, _contains, _.every

얘네들은 비슷한 동작을 하는데 조금씩 다른 함수들입니다.

_.some은 

이런식으로 요소에 하나라도 true로 판명되는 요소가 있다면

결과값으로 true를 반환해주는 함수입니다.

이러한 특징으로 인해 로직을 시작하기 전에

방어코드로 사용되는 함수입니다.

_.some이 자체적으로 요소를 true/false 로 판단했다면

_.contains는 특정요소를 기준으로 충족하는지 아닌지를 판단할 수 있습니다.

첫번째 인자는 찾을 장소, 두번째 인자는 찾는 목표 입니다.

이를 보면 어떤 경우에 true를 반환하는지를 이해할 수 있게됩니다.

_.contains가 하나만 만족하면 true를 반환했지만

_.every는 모두 만족해야 true를 반환합니다.

이처럼 _.every의 두번째 인자에 함수를 집어넣고 

원하는 결과를 뽑아 낼 수 있습니다.

6. _.max, _.min

_.max는

이런식으로 가장 큰 productNumber 속성값을 가지고 있는 객체를 반환해줍니다.

_.min은 이와 반대로 가장 작은 productNumber 속성값을 가지고 있는 객체를 반환해줍니다.

7. _.sortBy, _.groupBy

_.sortBy는 특정 인자값으로 정렬을 해주는 함수입니다.

이런식으로 productNumber 기준으로 정렬을 해주거나	숫자가 아닌 문자열일 경우 알파벳 순으로 정렬해줍니다.

_.groupBy는

return 값이 같은 애들끼리 묶어줍니다.

이런식으로 'brand' 값을 키값으로 하여 헤처, 묶어줍니다.

후속 포스팅에서 계속 이어나가도록 하겠습니다.