[javascript] lodash.js 와 native 속도 차이, 그래도 lodash를 사용하는 이유

 

 

 

 

 목차

• lodash의 정의와 장점
• lodash적용 방법(CDN, npm install, 프로젝트 적용방법)
• 자주쓰이는 함수, native vs lodash 속도비교
• 번외 헷갈렸던 점 기록...

 

 

 

1. lodash 의 정의와 장점

---

편리하게 코드를 작성하고 웹표준에 효율적으로 맞출 수 있게 해주는 Node.js 패키지 입니다

객체, 배열 등의 데이터 구조를 간편하게 함수형으로 다룰수 있고, 쉽게 변환하고 쉽게 값을 추출할 수 있어서 편리하게 코드를 작성할 수 있습니다.

 

그렇기 때문에 빠른 작업과 간결한 코드를 사용할 수 있습니다.

 

예를들어 array나 object를 반복문을 돌면서 처리해야할 것들을 한줄로 구현할 수 있습니다.

 

-es6와 성능을 비교하자면 몇몇 함수에서 es6 가 lodash보다 속도가 더 빠릅니다. (es6 속도 > lodash속도)

이럼에도 불구하고 lodash를 많이 사용하는 이유는 함수의 확장성 때문입니다. 

 

 

2. lodash 적용방법  (CDN, npm install)

---

CDM적용방법 (https://www.jsdelivr.com/package/npm/lodash  << 여기들어가면 있습니다)

<!-- lodash 홈페이지에 들어가면 있습니다 -->
<script src="
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
"></script>

 

NPM을 통해서 적용방법

npm install lodash

 

프로젝트에서 lodash 사용하기 

//사용할 곳에서 import하기

import _ from "lodash"

 

 

3. 자주쓰이는 함수, native와 lodash 비교 

---

들어가기 전에 먼저 결과값이 네이티브 함수가 속도가 더 빠르다고 해서  더 나은 성능을 준다고 확정 지을 수는 없습니다. 

좀 더 단순하고 가독성이 좋아지고 또 확장성을 고려해야 합니다.

 

3-1. find  (속도 빠른순:  native >  lodash)

find는 컬렉션 중 조건에 만족하는 결과값의 첫번째 요소를 찾는 함수 입니다. 

 

const users = [
  { 'user': 'joey',  'age': 32 },
  { 'user': 'ross',    'age': 41 },
  { 'user': 'chandler', 'age': 39 }
]

// Native
users.find(function (o) { return o.age < 40; })

// lodash
_.find(users, function (o) { return o.age < 40; })

 

 

 

3-2. filter(속도 빠른순:  native > lodash)

filter는 컬렉션에서 특정 조건을 만족하는 모든 결과값을 추출해 줍니다. 

 

const numbers = [10, 40, 230, 15, 18, 51, 1221]       

_.filter(numbers, num => num % 3 === 0)
numbers.filter(num => num % 3 === 0)

 

 

 

 

3-3. each(속도빠른순  native < each)

_.each([1, 2, 3], (value, index) => {
  console.log(value)
})

[1, 2, 3].forEach((value, index) => {
  console.log(value)
})

_.forEach({ 'a': 1, 'b': 2 }, (value, key) => {
  console.log(key);
});

({ 'a': 1, 'b': 2 }).forEach((value, key) => { // !error
  console.log(key); 
});

 

 

lodash의 each는 브라우저의 스펙에 따라 구현을 다르게 가져가기 때문에 훨씬 빠르다고 합니다.

 

 

3-4. every (속도 빠른순: native > lodash)

every는 배열의 모든 요소가 특정한 조건을 만족시키는지 테스트한 결과를 반환 합니다.

const elements = ["cat", "dog", "bat"]

_.every(elements, el => el.length == 3)

elements.every(el => el.length == 3) //true

 

 

3-5. some (속도 빠른순: native > lodash)

some은 배열의 요소 중 하나라도 조건에 만족 하는지 체크 할 때 쓰입니다.

const elements = ["cat", "dog", "bat"]

_.some(elements, el => el.startsWith('c'))

elements.some(el => el.startsWith('c'))

 

 

 

3-6. includes (속도 빠른 순 : native > lodash)

컬렉션에 해당 요소가 존재 하는지 확인할 때 쓰입니다.

 

const primes = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,97]

_.includes(primes, 47) // true

primes.includes(79) // true

 

 

3-7. uniq (속도 빠른 순: native < lodash)

배열의 요소들 중에서 중복값을 제거한 결과를 얻을 때 사용합니다.

 

const elements = [1,2,3,1,2,4,2,3,5,3]

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

[...new Set(elements)] //  [1,2,3,4,5]

 

 

 

3-9. compact (속도 빠른순: native < lodash)

compact는 배열에서 undefined 혹은 false값을 제거하는데 사용합니다.

const array = ['a', undefined, 'b', 1, undefined, 2, 3, undefined, undefined]

_.compact(array);

array.filter(data => {
  return data !== undefined && data !== null
});

//or

array.filter(Boolean);

 

 

 

 

 

 

위에 나와있는 함수 속도 비교는 아래의 사이트에서 할 수 있습니다!

사용방법: create a benchmark > html에 lodash js CDN 코드 입력 > script preparation code 비교에 쓰일 변수 추가 > testcase 추가 > benchmark Validation click 후 완료되면 submit

https://measurethat.net/Benchmarks/Show/4831/0/native-find-vs-lodash-find

Benchmark: native find vs lodash _.find - MeasureThat.net

 

 

 

4. 번외.. 잠깐 헷갈렸던 함수

---

대문자 > 소문자로 바꿔주는 방법 3가지

//1.toLowerCase();
"HelloHiNice".toLowerCase(); // hellophinice


//2. _.toLower("HelloHiNice"); // hello
_.toLower("HelloHiNice")


//3. _.lowerCase() // hello hi nice
_.lowerCase("HelloHiNice")

 

 

 

 

 

 

 

 

 

참고: https://ui.toast.com/weekly-pick/ko_20190515

Lodash의 대체재로서의 순수 자바스크립트 함수

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡