Underscore.js 1부 - 둘러보기

August 16th 2018

Underscore.js 1부 - 둘러보기

목차 - Underscore.js 란? - Collections 1 ) .identity 2 ) _.first] 3 ) _.last 4 ) _.each 5 ) _.filter 6 ) _.reject 7 ) _.uniq 8 ) _.map 9 ) _.pluck 10 ) _.reduce 11 ) _.contains 12 ) _.every 13 ) _.some 14 ) _.extend 15 ) _.default 16 ) _.once 17 ) _.memoize 18 ) _.delay 19 ) \.shuffle

*Collections

identity

first

Summary - Syntax : _.first(배열, [숫자]) - 인자로 받은 배열의 첫 요소를 return함. - 두번째 요소인 숫자를 함께 넘기면, 그 수 만큼의 요소를 배열의 앞에서부터 취해 새로운 배열을 return 함. - immutable

var a = [1, 2, 3, 4, 5];

_.first(a); // 1
_.first(a, 3); // [1, 2, 3]

3) _.last

Summary - Syntax : _.last(배열, [숫자]) - 인자로 받은 배열의 마지막 요소를 return함. - 두번째 요소인 숫자를 함께 넘기면, 그 수 만큼의 요소를 배열의 뒤에서부터 취해 새로운 배열을 return 함. - immutable

var a = [1, 2, 3, 4, 5];

_.last(a); // 5
_.last(a, 3); // [3, 4, 5]
_.last(a, 0); // [] 두 번째 인자로 0을 넘기면, 빈 배열이 반환됨.
_.last(a, 7); // 배열의 길이보다 큰 수를 인자로 받으며, 기존 배열 전체를 반환함.

4) _.each

Summary - Syntax : _.each(list, callback, [context]) - list : list는 배열 또는 객체가 될 수 있음. - callback : list의 각 요소 또는 value마다 적용할 함수 - [context] : 생략 가능하며 context가 주어지면, callback 함수가 이 context에 바인딩 됨. - list가 배열일 경우 : callback을 호출하면, 각 요소, 인덱스, list가 argument로 주어짐. - list가 객체일 경우 : callback을 호출하면, 각 value, key, list가 argument로 주어짐.

var arr = [1, 2, 3, 4, 5];
var obj = { first: 6, second: 7, third: 8, fourth: 9, fifth: 10 };
var newArray = [];

var iteratee = function(cur, idxOrKey, list) {
  newArray.push(cur * 2);
};

_.each(arr, iteratee);
console.log(newArray); // [2, 4, 6, 8, 10]

_.each(obj, iteratee);
console.log(newArray); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

5) _.filter

filter 함수 역시 자바스크립트의 Array method로 우리에게 익숙한 분입니다. Underscore.js에도 filter 함수가 있으며, 위의 each 함수와 마찬가지로 배열 뿐만 아니라 객체까지 소화를 해주시는 분입니다. Summary - Syntax : _.filter(list, callback, [context]) - callback 함수의 테스트 조건에 부합하는 요소만을 취해 새로운 배열을 반환함. - 객체의 경우 value가 callback 함수의 테스트 조건에 부합하는 값만 모아 새로운 배열을 반환함. - immutable

var arr = [1, 2, 3, 4, 5];
var obj = { first: 6, second: 7, third: 8, fourth: 9, fifth: 10 };
var callbackFunc = function(cur, x) {
  return cur % 2 === 0;
};

var newArray1 = _.filter(arr, callbackFunc);
console.log(newArray1); // [2, 4]

var newArray2 = _.filter(obj, callbackFunc);
console.log(newArray2); // [6, 8, 10]

// context 가 주어질 경우
var modulo = _.filter(
  [0, 1, 2, 3, 4],
  function(cur) {
    return this[cur] % 2 === 0;
  },
  arr
);
console.log(modulo); // [1, 3]

6) _.reject

reject함수는 위의 filter 함수의 반대 개념입니다. 테스트 함수에 부합하지 않는 요소들만 취해, 새로운 배열을 반환합니다. - Syntax : _.reject(list, callback, [context])

var arr = [1, 2, 3, 4, 5];
var obj = { first: 6, second: 7, third: 8, fourth: 9, fifth: 10 };
var callbackFunc = function(cur, x) {
  return cur % 2 === 0;
};

var newArray = _.reject(arr, callbackFunc);
console.log(newArray); // [1, 3, 5]

7) _.uniq

uniq함수는 배열의 중복 요소를 제거한 새로운 배열을 생성할 때 사용합니다. Summary - Syntax : _.uniq(array, [isSorted], [iteratee]) - 배열이 정리되었다면, 두 번째 인자로 true를 추가하면 좀 더 빠른 알고리즘이 실행됨. - immutable

_.uniq([1, 2, 4, 3, 4, 2]); // [1, 2, 4, 3]

8) _.map

_.map은 자바스크립트의 내장 메소드 map()과 그 기능은 동일합니다. 하지만 배열 또는 객체를 인수로 받습니다. Summary - Syntax : _.map(list, iteratee, [context]) - 배열 또는 객체의 각 요소에 callback함수를 적용 후 변형된 값을 모아 새로운 배열을 반환함. - immutable - callback 함수는 value, index (or key), callback함수를 인자로 받습니다.

_.map([1, 2, 3], function(num) {
  return num * 3;
});
// => [3, 6, 9]
_.map({ one: 1, two: 2, three: 3 }, function(num, key) {
  return num * 3;
}); // => [3, 6, 9]
_.map([[1, 2], [3, 4]], _.first);
// => [1, 3]

9 ) _.pluck

_.pluck은 map method가 사용될 수 있는 한 유형을 구체화한 method라고 할 수 있습니다. 객체를 요소로 가지고 있는 배열에서, 객체의 특정한 key의 값만을 모아 새로운 배열을 만드는 데 사용할 수 있습니다.

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

10) _.reduce

_.reduce 또한 자바스크립트의 그것과 기능이 동일합니다. 하지만 배열 또는 객체를 인수로 받습니다. Summary - Syntax : _.reduce(list, callback, [initial state], [context]) Array Reduce Method 관련 포스팅

var sum1 = _.reduce(
  [1, 2, 3],
  function(memo, num) {
    return memo + num;
  },
  0
);
// => 6이 나옴.
var sum2 = _.reduce({ first: 1, second: 2, third: 3 }, function(a, b) {
  return a + b;
});
// => 6이 나옴.

11) _.contains

.contains는 자바스크립트의 include와 기능이 동일합니다. 하지만 배열 또는 객체를 인수로 받습니다. 배열 또는 객체의 값으로 _.contains에 넘긴 value가 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다. Summary - Syntax : \.contains(list, value, [fromIndex]])

_.contains([1, 2, 3], 3);
// => true;

12) _.every

마찬가지로 자바스크립트의 Array.prototype.every 메서드와 그 기능이 동일합니다. 배열 또는 객체의 값으로 _.every 넘긴 callback의 조건에 부합하면 true를, 그렇지 않으면 false를 반환합니다. Summary - Syntax : _.every(list, callback, [fromIndex]]) - 만약 callback함수가 주어지지 않으면, list 각 요소의 값이 truthy or falthy 인지 확인 후 상응하는 boolean을 반환합니다.

_.every({ a: 2, b: 4, c: 6 }, function(cur) {
  return cur % 2 === 0;
});
// => true

_.every({ a: 2, b: 4, c: 6 });
// => true

_.every({ a: 2, b: 4, c: null });
// => false

13) _.some

14) _.extend

15) _.default

16) _.once

_.once는 전달 받은 함수를 한 번만 실행시키고, 이후의 호출시에는 실행했던 첫 번째 호출 시의 결과값을 반환해주는 method입니다. Summary - Syntax : _.once(function)

function foo() {
  return Math.ceil(Math.random * 10);
}

foo(); // -> 2 임의의 숫자
foo(); // -> 5 임의의 숫자
foo(); // -> 1 임의의 숫자

var call = _.once(foo);
call(); // -> 임의의 결과값 10 (foo가 한 번 실행된 결과값. 결과값은 closure 영역에 저장됨.)
call(); // -> 10
call(); // -> 10

memoize

delay

_.delay는 자바스크립트의 setTimeout과 유사합니다. _.delay method는 추가 arguments를 전달하면 callback 함수에 전달을 합니다. Summary - Syntax : _.delay(function, wait, [argument [, argument 1..]]) - _.delay(someFunction, 500, 'a', 'b') 호출하면 500ms 후에 someFunction('a', 'b')이 실행됨.

shuffle

sortBy

_.throttle

throttle은 인자로 callback과 시간을 argument로 전달 받습니다. 그리고 전달 받은 시간안에는 오직 한 번만 호출할 수 있는 callback을 반환합니다. 만약 어떠한 이벤트가 매우 빈번히 발행하고, 해당 이벤트에 대한 로직이 또한 무거우면 웹애플리케이션 성능에 영향을 줄 수 있습니다. 이러한 경우 함수가 적당히 호출되도록 조절할 때 유용합니다. 또한, 비싼 API 접근 제한에도 유용합니다. Summary - Syntax : _.throttle(callback, wait) - 시간은 밀리세컨 단위임.

Handmade with .