UnderScore (9-22)

Blackwidow·2020년 12월 29일
0

Underscore.js란?

  • 자바스크립트 라이브러리로 컬렉션, 배열을 처리하는데 유용한 함수들이 제공된다.
  • Collections / Arrays / Functions / Objects / Utility 5가지로 분류되어있다.
  • 모든 함수는 안에 들어있다.(예 : .each)

collection이란?

  • 데이터의 모음으로 컬렉션을 대표하는 배열과 객체가 있다.
  • 배열 : 데이터를 순서대로 모은 자료구조
  • 객체 : 서로 관련있는 데이터들을 'key-value' 형태로 순서없는 모음으로 key를 통해 데이터에 접근할 수 있다.

collection의 데이터를 다루는 것은?

  • 배열의 요소 중 가장 큰 값을 찾기 위해서는 -> 현재 데이터가 가장 큰 값인지 확인해야 한다.
  • 배열의 모든 요소의 합을 구하려면 -> 현재 데이터를 누적값에 더해야 한다.
  • 객체에 특성 속서으이 이름(key)가 존재하는지 확인하려면 -> 현재key가 원하는 값인지 확인한다.
  • 위와 같은 예시를 보면 비슷한 처리를 반복해야 함으로 반복작업(iteration)이라고 부를 수 있다.
  • 언더스코어에는 반복을 위한 내장 매소드(arr.map, arr.filter)들이 대표적이다.

1. identify

_.identity(value)

  • 전달인지(value)가 무엇이든, 그대로 리턴한다.
  • 수학에서 f(x) = x함수가 쓸모 없어 보이지만 Underscore의 기능을 구현하거나 테스트를 위해 재사용하기 위해 이용하는 함수이다.

2. take

_.take(배열,n)

  • 배열의 처음 n개의 element를 담은 새로운 배열을 리턴한다.
  • n이 undefiend이거나 음수인 경우, 빈배열을 리턴한다.
  • n이 배열의 길이를 벗어날 경우, 전체 배열을 shallow copy한 새로운 배열을 리턴한다.

3.drop

_.drop(배열, n)

  • take와 반대로 처음 n개의 element를 제외한 새로운 배열을 리턴한다.
  • n이 undefined이거나 음수인 경우, 전체배열을 shallow copy한 새로운 배열을 리턴한다.
  • n이 배열의 길이를 벗어나는 경우, 빈배열을 리턴한다.

4. last

_.last(배열,n)

  • 배열의 마지막에서 시작하여 n개의 element를 담은 새로운 배열을 리턴한다.
  • n이 undefined이거나 음수인 경우, 배열의 마지막 요소만을 담은 배열을 리턴한다.
  • n이 배열의 길이를 벗어날 경우, 전체 배열을 shallow copy한 새로운 배열을 리턴한다

5. each

_.each(collection, iteratee) : collection(배열이나 객체), iteratee(반복되는 작업으로 콜백함수)

  • collection의 데이터인 배열이면 element 를 객체이면 property를 순회하면서 iteratee함수에 각 데이터를 인자로 전달하여 실행한다.
    -forEach와 흡사하다.
    -iteratee함수는 다양한 함수로 할당될 수 있다.
  • iteratee는 차례대로 데이터(element or value), 접근자(index or key), collection을 다룰 수 있어야 한다.
  • 배열을 입력받은경우, iteratee(ele, idx, arr)
  • 객체를 입력받은 경우, iteratee(val, key, obj) 순서대로 인자가 전달되어야 한다
  • 실제로 전다로디는 콜백함수(iteratee)는 collection의 모든정보(데이터,접근자)를 필요하지 않을 수 있다.
  • 여기서 중요한점은 배열의 length와 객체의 length가 다르다는것을 알 수 있다. 배열의 length는 each함수를 돌리면서 따로 변수를 선언해서 생성되는것이 없고, 객체의 length(key의 length, value의 length, 따로 선언된 length 총 3개)는 따로 변수로 선언되어서 each로 객체의 property를 순회하면서 증가되는것을 알 수 있다.
  • 명시적으로 어떤 값을 리턴하지 않는다.

6. indexOf

_.indexOf(배열,target)

  • target으로 전달되는 값이 배열의 요소인 경우 -> 배열에서의 위치(index)를 리턴한다.
  • 그렇지 않은 경우는 -1을 리턴한다.
  • target이 중복해서 존재하는 경우는, 가장 낮은 index를 리턴한다.

7. filter

_.filter(배열, test함수)

  • test함수를 통과하는 요소들을 담은 새로운 배열을 리턴한다.
  • test함수에 요소가 들어갔을때 결과값(return값)이 truthy일 경우, 통과입니다.
  • test함수는 각 요소에 적용해야 되기 때문에 반복됩니다.

8. reject

_.reject(배열, test함수)

  • filter와 정반대로 test함수를 통과하지 않은 요소들을 새 배열에 담아 리턴한다.

9. uqiq

_.uniq(배열)

  • 주어진 배열의 각 요소들 중 중복값이 있다면 index가 제일 작은 요소를 넣어 새로운 배열에 추가한다. 중복되지 않은 요소는 그대로 새배열에 추가된다.
  • 중복여부의 판단은 엄격한 동치연산(strict equality, ===)를 사용한다.
  • 배열의 요소는 모두 원시타입이라고 가정하자.

10. map

_.map(배열, 반복되는작업만되는 함수(iteratee))

  • 배열의 각 요소를 반복되는 작업만 되는 함수(대입이기 때문에 false가 될 수 없는)에 적용시킨 값이 참일때 새배열에 담아 리턴합니다.
  • 배열의 각 요소를 반복되는 작업만 되는 함수에 대입 또는 조건에 충족할때 다른것으로 리턴됩니다.
  • _.each와 비슷하지만(each는 리턴값이 없고) map은 각 요소에 반복되는 작업만 되는 함수를 적용한 결과를 리턴하다는 차이점이 있다.

11. pluck

_.pluck(배열, 키나 인덱스)

  • [[],[],[]] 또는 [{},{},{}]을 입력받고, 입력된 배열의 요소에서 찾고자하는 키나 인덱스를 입력받는다.
  • 찾고자하는 키와 인덱스가 있는 요소만을 추출해서 새로운 배열에 넣어 리턴한다.
  • pluck는 뽑는다라는 뜻으로 한예로 개인정보를 담은 요소(객체)를 담은 배열이 있는데 개인의 나이만으로 구성된 별도의 배열을 만들고자 한다. 그럼 찾고자 하는 key를 통해 나이를 뽑아내서 새 배열에 넣고, 만약 원하는 key가 없을경우 그 요소는 undefined된다.

13. reduce

_.reduce(배열, 함수, 초기값)

  • 배열을 순회하면서 각 요소를 반복되는작업이 무조건 되는 함수(iteratee)를 적용 -> 결과값을 계속 누적 -> 누적된 최종값 리턴한다.
  • 예로 [1,2,3,4] -> 1, 1+2, 1+2+3, 1+2+3+4
  • 배열의 다수의 정보가 하나의 값으로 되기 때문에 응축!
  • 반복되는 작업(iteratee)는 차례대로 입력받는것을 알아야 한다.
  • 배열의 iteratee (ele, idx, arr)
  • 객체의 iteratee (val, key, obj)
  • reduce는 누적되는 값을 관리하기 위해 인자 acc가 추가된다. 배열을 reduce하면 iteratee(acc, ele, idx, arr)
  • iteratee(acc, ele, idx, arr)는 처음에 acc:이전요소까지의 반복작업의 결과로 누적된 값, ele은 acc다음으로 수행할 현재의 요소이다.
  • 여기까지 정리하면,
    _.reduce(배열, 반복작업함수(iteratee)
    iteratee(acc, ele, idx, arr)
  • acc는 초기값을 지정하면 그 초기값이 acc가 된다. 초기값이 있으면 다시 초기값을 추가한다.
    _.reduce(배열, 반복작업함수(iteratee),초기값)
    iteratee(acc, ele, idx, arr)
  • 통상적으로 초기값은 acc(accumulator)와 total(tally)로 불리운다.

14. sortBy

  • 배열 정렬 메소드
  • return값을 양수면 오름차순, 음수면 내림차순으로 정렬된다.
  • 정렬한 배열은 원형이 배열된것이다. 복사본이 만들어 지지 않는다.
  • 오름차순(아래코드)
[1,3,2].sort(function(a,b) {
  return a-b
}); // [1,2,3]
  • 내림차순(아래코드)
[1,3,2].sort(function(a,b) {
return b-a
}); // [3,2,1]```        

15.zip

_.zip(...funcs)

  • 여러개의 배열을 입력받아 같은 index의 요소들을 묶어 배열로 만든다.
  • 각 index마다 하나의 배열을 만들고, 최종적으로 index별로 만든 배열에는 각 배열의 같은 인덱스의 element가 들어있다.
  • 최종적으로 리턴되는 배열들은 입력받은 배열 중 가장 긴 배열길이로 통일된다.(이때 특정 index가 없으면 undefined으로 채운다.)
profile
javascript 공부하는 sumiindaeyo

0개의 댓글