헝그리개발자

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

https://underscorejs.org/

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

현재 최신버전은 1.10.2 이다.

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

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

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

위와 같이 사용하면 된다.

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 속성에 유니크값을 넣어주면, 특정 위치를 바로 탐색할 수 있기에 유용하다.

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

자바스크립트의 언어 특성상, 배열도 자유자재로 다룰 수 있고,

자바스크립트의 배열은 다양하고 역동적이고, 자유로운 영혼이다.

배열 선언

자바스트립트의 배열을 선언하는 방법은 Array() 객체를 가지고 만드는 방법과,

이를 단순히 [] 만으로도 선언할 수 있다.

이는 객체를 만들때 new Object() 로 만들거나 {} 로 만들수 있는것과 같은 이치이다.

위의 배열 선언문은 사이즈가 0인 배열이었고,

아래와 같이 하면 배열의 사이즈를 줄 수 있다.

위 예제는 모두 사이즈가 5개인 배열을 만들었다.

new Array() 즉,

일반적인 랭귀지와 달리 자바스크립트의 배열은 Array 라는 객체라는 것을 알 수 있다.

즉, Array 도 Object 인 것이다.

Array 의 prototype 을 보면, 자바스트립트의 Array 로 무엇을 할 수 있는지 알 수 있다.

length 라는 속성외에는 전부 함수로 구성되어 있다는것을 알 수 있다.

데이터 탐색

배열에 대한 데이터 탐색은 모든 언어가 아래와 같이 사용하는것이 일반적이다.

for(var i=0; i < arrTemp.length; i++)
{
    console.log(arrTemp[i]);
}

이를 forEach 문으로 바꾸면 아래와 같이 쓸 수 있다.

arrTemp.forEach(function(d) { console.log(d) } );

이를 람다식으로 쓰면 아래와 같다.

arrTemp.forEach( d => console.log(d) );

큐(Queue)

자료구조에서 큐는 FIFO 로써, 먼저 들어간 데이터 먼저 나온다는 뜻이다.

[배열의 맨뒤에 데이터를 입력]

arrTemp.push('test');

[배열의 첫번째 데이터를 꺼내온다. (꺼내온 데이터는 삭제됨)]

console.log(arrTemp.shift());

스택(Stack)

스택은 LIFO 로써, 제일 나중에 들언간 데이터가 먼저 나온다는 뜻이다.

[배열의 맨뒤에 데이터를 입력]

arrTemp.push('test');

[배열의 마지막 데이터를 꺼내온다. (꺼내온 데이터는 삭제됨)]

console.log(arrTemp.pop());

배열에 데이터 입력

큐/스택의 예에서 처럼 배열의 맨뒤에 데이터를 입력하는 함수는 push 이다.

[배열의 맨뒤에 데이터를 입력]

arrTemp.push('test');

[배열의 맨앞에 데이터를 입력]

arrTemp.unshift('test');

[배열의 중간에 데이터를 입력]

arrTemp.splice(1, 0, 'add')

1은 데이터를 삽입할 index 이고, 0은 삭제할 count 이기 때문에, 0으로 입력하여 삭제하지 않도록 한것이다.

배열의 데이터 삭제

큐/스택의 예에서 처럼, 배열의 첫번째 삭제시는 shift() 함수를 쓰면 된다.

마지막 데이터삭제는 pop() 함수를 쓰면 된다.

[중간의 데이터 삭제는 splice 를 사용하면 된다.]

arrTemp.splice(1, 3)

배열의 index 1번 부터 시작해서, 3개의 배열항목을 삭제한다.

좀 더 심화된 자바스크립트 배열을 사용하고 싶다면, 아래 내용을 참고하면 될 것이다.

변경자 메서드

접근자 메서드

순회 메서드