Underscore.js 소개
underscore.js는 함수형 자바스크립트 라이브러리이다.
underscore.js의 function들을 간단히 정리한다.
_.each
예시코드
_.each([1,2,3],function(val,idx,list){console.log(val,idx,list);});
// 1 0 list
// 2 1 list
// 3 2 list
// [1,2,3]forEach와 다른 점
- forEach는 마지막에 undefined를 return / _.each는 자신이 받았던 첫 번째 인자를 return
- key/value쌍으로 구성된 객체를 인자로 받을 수 있음
_.reject,contains,isArray
var list = [1,2,3,4,5,6];
_.reject(list,function(num){ return num%2 === 0;});
// [1,3,5]
_.contains([1,2,3],3);
//true
_.isArray([1,2,3]);
//true- reject는 list를 받아 predicate를 실행하여 true로 평가된 값들을 제외
- contains는 첫 번째 인자인 배열에 두 번째 인자와 동일한 값이 포함되어 있는 지 체크
- isArray는 배열인지 체크
_.pluck,first,last,rest,lastIndexOf
var users=[
{ id:1, name: "ID", age:32},
{ id:2, name: "HA", age:25},
{ id:3, name: "BJ", age:32},
{ id:4, name: "PJ", age:28},
{ id:5, name: "JE", age:27},
{ id:6, name: "JM", age:32},
{ id:7, name: "HI", age:24}
];
_.pluck(users,'name');
// ["ID","HA","BJ","PJ","JE","JM","HI"]
_.first([5,4,3,2,1]);
// 5
_.first([5,4,3,2,1],1);
// [5]
_.first([5,4,3,2,1],2);
// [5,4]
_.last([5,4,3,2,1]);
// 1
_.last([5,4,3,2,1],1);
// [1]
_.last([5,4,3,2,1],2);
// [2,1]
_.rest([5,4,3,2,1]);
// [4,3,2,1]
_.rest([5,4,3,2,1],2);
// [3,2,1]
_.initial([5,4,3,2,1]);
// [5,4,3,2]
_.initial([5,4,3,2,1],2);
// [5,4,3]
_.lastIndexOf([1,2,3,1,2,3],2);
// 4
_.lastIndexOf([1,2,3,1,2,3],3);
// 5
_.lastIndexOf([1,2,3,1,3],2);
// 1
_.flatten([[1,2,3],[4,5],[6]]);
// [1,2,3,4,5,6]- pluck은 배열 내부의 값들이 key/value쌍으로 구성된 객체일 때 특정 key의 value값들을 배열로 만들어준다.
- first,last는 list[0]와 list[list.length-1]
- rest는 앞쪽의 값을 제외한 새로운 리스트 리턴
- lastIndexOf는 뒤에서부터 동일한 값을 찾아 index를 리턴
- flatten은 깊이를 가진 배열을 펴준다.
_.values,keys,exend,pick,omit
_.values({id:1,name:"ID",age:32});
// [1,"ID",32]
_.keys({id:1,name:"ID",age:32});
//["id","name","age"]
_.extend({id:1,name:"ID",age:32},{age:36,job:"Developer"});
// {id:1,name:"ID",age:36, job:"Developer"}
_.pick({id:1,name:"ID",age:32},'name','age');
// {name:'ID',age:32}
_.omit({id:1,name:"ID",age:32},'name','age');
// {id:1}- values는 객체의 값들을 return
- keys는 객체의 key값들을 return
- extend는 왼쪽에 있는 객체에 오른쪽의 객체를 덮어씌움
- pick은 두 번째 인자에 넘겨진 key들을 기준으로 key/value를 남김
- omit은 두 번째 인자로 넘겨진 key들을 제외
_.negate,noop
var eq5 = function(a){
return a == 5;
}
eq5(5);
//true
var neq5 = _.negate(eq5);
neq5(5);
//false
_.noop();
//undefined- negate는 받아 둔 함수를 실행하여 나온 결과를 반대로 바꾸는 함수
- noop는 undefined만 리턴하는 함수
._chain
_.filter(
_.map([1,2,3],function(n){return n*2;}),
function(n){return n<=4;});
//[2,4]
//Chaining
_.chain([1,2,3])
.map(function(n){return n*2;})
.filter(function(n){return n<=4;})
.value();- chain을 이용하면 값을 바꿔 나갈 객체가 생성되고 underscore의 함수들을 chain방식으로 계속 실행할 수 있다.
- value()를 실행하기 전까지는 메서드를 계속 실행할 수 있고, value를 통해 최종 값을 얻어낸다.
Underscore vs Lodash
Lodash는 Underscore의 확장판이면서 성능 개선판이다?
Lodash는 지연 평가 알고리즘을 적용하였다. Lodash는 지연 평가를 통해 메서드가 실행되기 전에 자동으로 로직을 개선한다.
비교
1. 지연 평가, 지연 실행, 성능이 Underscore대신 Lodash를 써야 하는 특별한 이유는 아니다.
2. Lodash가 훨씬 빠르고 강력하다고 단정지을 순 없다. (상황에 따라 다를 수 있음)
3. Underscore만이 가진 특별한 기능은 없지만 대부분의 컨셉은 Underscore나 javascript에서 가져왔다.
4. LOdash는 for 대신 white을 사용한 최적화와 적절한 기능 축소, 함수별로 반복문을 직접 사용하는 것 등으로부터 얻은 성능적인 이점이 있다.
5. Lodash를 사용하면서 지연 평가의 이득을 보려면 .chain을 필히 사용해야 한다. .chain을 사용하지 않거나 200개 이상의 배열을 사용하지 않거나 take를 사용하지 않는다면 지연 평가를 통한 성능적 이점은 없다.
6. 최신 환경에 대한 지원과 지속적인 업데이트면에서는 Lodash가 낫다.
