자바스크립트 라이브러리 underscore.js

underscore.js 는 자바스크립트 라이브러리로, 컬럭션, 배열을 처리하는데 유용한 함수들이 제공된다.

 

https://underscorejs.org/

Underscore.js

 

위 링크에서, 다운받을 수 있고, API 매뉴얼이 제공되니, 필요한거를 찾아서, 프로젝트에 적용할 수 있다.

현재 최신버전은 1.10.2 이다.

 

 

UMD 버전으로 받으면 되고, Production 버전은, min 버전으로

일단, 2개 다 다운받아 놓고, min 버전을 사용하다가, 특별한 경우.. (디버깅 등) 에는 Development 버전을 사용하면 될 것이다.

 

CDN 으로 이용하고자 한다면,

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.10.2/underscore-min.js"></script>

 

위와 같이 사용하면 된다.

 

 

Collections / Arrays / Functions / Objects / Utility 로 구분되어 있고,

모든 함수는 언더바 _ 안에 들어 있다.

 

즉, _.each  _.isDate   _.union   이렇게 사용할 수 있다.

 

prototype 을 보면, 전체 함수 내역이 들어있는걸 볼 수 있다.

 

 

 

.toString() 을 하면, 함수 구현 내용도 바로 확인이 가능하다.

 

 

 

 

 

each 함수를 보면, forEach 와 같다는걸 볼 수 있다.

자바스크립트 array 에 있는 forEach 보다, 더 유연하게 사용할 수 있다.

 

 

 

pluck 함수는 json 에서 원하는 데이터만 배열로 꺼내올때 유용하다.

 

위의 예제에서는 name 값만을 배열로 가져왔으며, 여기에 추가로, sortBy 를 호출하면, 정렬된 데이터로 가져올 수도 있다.

 

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.sortBy(_.pluck(stooges, 'name'));

 

 

 

shuffle 이나 sample 는 게임같은곳에서 유용하게 사용할 수 있는 함수로,

shuffle 는 카드를 섞는것이 셔플링이라고 하는데, 배열 또는 json obejct 을 무작위로 섞어준다.

위의 샘플에서는 array 에 대해서만, 예가 나와 있지만, json object 를 섞어줄 수 있기 때문에, 상당히 유용하다.

 

참고로, Collections 아래 있는 모든 함수는 array 와 json object 에 대해서 모두 동작하는 함수이다.

 

sample 는 첫번째 인자의 array / json object 중에서, 두번째 인자의 갯수만큼 랜덤하게 샘플링을 하는 함수이다.

 

 

 

Array 함수중에 first / initial  / last / rest 는 지정된 갯수만큼 배열을 가져오는 함수이다.

 

sample 함수가 없다면, 

 

이런식으로 샘플링도 가능하다.

 

flatten 은 평탄화 를 위미하여, 여러개의 배열을 최상단의 value 로 묶어주고, 이때, 중복된 값에 상관없이 작업이 이뤄진다.

union 은 평탄화와는 다르지만, 여러개의 배열을 묶어서 하나의 배열로 만들고, 중복된 값은 제거된다.

uniq 는 하나의 배열안에서, 중복된 값을 제거하는 함수이다.

 

 

Objects 안에 있는 함수들은 json object 를 처리하는 함수들이 있다.

 

keys, findKy, clone, has, ...  그 외에는 많은 is 함수들이 있다.

 

값이 같은지 비교하는 isEqual

값이 포함되어 있는지 isMatch

isEmpty

isElement, isArray, isObejct, isArguments, isFunction, isString, isNumber, isFinite, isBoolean, isDate, isRegExp, isError

isSymbol, isMap, isWeakMap, isSet, isWeakSet, isNaN, isNull, isUndefined

 

 

Utility 에는 유용함 함수들이 들어 있다.

 

 

 

Math.random 으로 구현해야 했던, random 함수도 있다.

 

 

uniqueId 는 고유값을 생성하는것으로, 1부터 시작해서, 순차적으로 생성이 된다.

 

동적으로 DOM 을 생성하게 될때, id 속성에 유니크값을 넣어주면, 특정 위치를 바로 탐색할 수 있기에 유용하다.

 

그 외에도, 수많은 유용한 함수들이 있으니, 필요할때 꺼내먹어요 헉...