자바스크립트의 라이브러리중 하나.
jQuery가 HTML문서를 조작하거나 DOM이벤트를 처리할 목적으로 만들어 졌다면
언더스코어는 자바스크립트를 LISP처럼 사용할 수 있게 만들어주는 라이브러리다. 매우 작은 용량에 80여가지의 function을 제공한다.
https://namu.wiki/w/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4
https://harrythegreat.tistory.com/entry/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4-%EC%A0%95%EB%A6%AC#%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4%EB%9E%80
javascript underscore 언더스코어 정리
언더스코어란? 용어설명 Context iteratee Context와 iteratee의 구분 Collection Functions (Arrays or Objects) each map reduce reduceRight find filter where findWhere reject every some contains invoke p..
harrythegreat.tistory.com
https://cyberx.tistory.com/161
underscore 알아보기 (2)
안녕하세요. underscore 알아보기 (1)에 이어 후속 내용을 이어가도록 하겠습니다. 이 전에 each, context(this), find, countBy, reduce, some, contains, every, max, min, sortBy, groupBy 를 알아보았습니다...
cyberx.tistory.com
언더스코어 선언
언더스코어 홈페이지 들어가서 라이브러리 주소를 적거나 cdn주소를 넣으면된다.
1. 홈페이지에서 라이브러리 다운 -> 프로젝트에 파일 복사 -> <script src=" 경로 "></script> 하기 2. CDN주소 선언하기 (인터넷연결이 되있어야함)
https://underscorejs.org/#
Underscore.js
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being produc
underscorejs.org
응용 1
extend로 데이터 tepm변수에 복사한다음 allkeys로 데이터 뽑아서 filter로 데이터 있는지, if문처럼 하고 map으로 한줄씩 데이터 가공해서 표만들거나 배열 생성
_.contains(list, index, [fromIndex])
contains _.contains(list, value, [fromIndex])
list: colletion으로써, 배열이나 객체가 될 수 있다.
value: 배열의 element나, 객체의 value가 될 수 있다.
[fromIndex]: list에서 value를 찾을 때, 찾기 시작하는 index이다.(생략가능)
--> list안에 value가 있는지 확인하고, 있으면, true를 리턴한다.
ex) _.contains([1, 2, 3], 3); // true
=> 간단히 말하면 첫번째 인자인 list중에 두번째인가인 value값을 찾아서 있으면 true, 없으면 false
_.extend(target, obj1, obj2,...)
응용
_.filter(list, predicate, [context])
list : colletion으로 배열리나 객체가 될 수 있다. predicate : list의 각 요소의 결과값이 true인지 확인하는 함수 [context] : predicate 함수에서 this로 바인딩 되는 것 (생략가능)
==> list에 담겨있는거를 차례대로 하나씩 가져와서 predicate에 선언한 함수대로 돌려서 true값을 리턴해준다.
let testNumber=[1,2,3,4,5,6];
const result = _.filter(testNumber, function(row){
return row % 2 == 0;
});
console.log(result);
//[2, 4, 6]
====================================================
let testObject = {"a":1, "b":2, "c":3, "d":4, "e":5, "f":6};
const result = _.filter(testObject, function(row){
return row % 2 == 0;
});
console.log(result);
//[2, 4, 6]
====================================================
let testNumber=[1,2,3,4,5,6];
let context =[10,21,30,41,50,61];
console.log("testNumber = ["+testNumber+"]");
console.log("_.filter의 파라미터중 [context] = [10,21,30,41,50,61] 일때");
const result = _.filter(testNumber, function(row){
console.log("row = "+row+", this[row] = "+this[row]);
if(this[row] % 2 == 0){
console.log(this[row]+" % 2 == 0 는 true");
}else{
console.log(this[row]+" % 2 == 0 는 false");
}
return this[row] % 2 == 0;
},
context);
console.log(result);
//[2, 4]
결과: row 는 1부터 시작해서 context의 21부터 시작하게 된다. context는 this가 되고 this[0] = 10, this[1] = 21, this[2] = 30, ... 순서대로 된다.
출처 : https://velog.io/@yunsungyang-omc/underscore.js.filter-%ED%95%A8%EC%88%98
출처 : https://medium.com/@cheonmyung0217/underscore-js-filter-%ED%95%A8%EC%88%98-51feea16b3b8
_.keys
obj의 key 반환
//_.keys(object)
_.keys({one: 1, two: 2, three: 3});
=> ["one", "two", "three"]
출처: https://harrythegreat.tistory.com/entry/언더스코어-정리
_.allKeys
obj의 모든 inherited properties 출력
//_.allKeys(object)
function Stooge(name) {
this.name = name;
}
Stooge.prototype.silly = true;
_.allKeys(new Stooge("Moe"));
=> ["name", "silly"]
출처: https://harrythegreat.tistory.com/entry/언더스코어-정리
출처 : https://harrythegreat.tistory.com/entry/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4-%EC%A0%95%EB%A6%AC