본문 바로가기
React,Node,JQuery,js

[Lodash] 유용한 자바스크립트 라이브러리 : Javascript Library

by bryan.oh 2022. 6. 27.
반응형

Lo | Lodash
Javascript Library

 

https://lodash.com/

 

Lodash

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn

lodash.com

 

1. 개요

Lodash 는 javascript 에서 필요한 유용한 함수들을 제공해 줍니다.

특히 array, number, object, string 등등.

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions

복잡하게 구현해야 할 것들을 하지 않아서 코드가 많이 간결해지고, 최적화된 로직으로 빠릅니다.

 

2. 설치

  web 에서는

  <script scr="lodash.js"></script> 로 사용하면 됩니다.

  CDN 주소는 여기 에서 확인할 수 있습니다.

CDN은, 예를들면 이렇게 사용하는 것이죠.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/{VERSION}/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

 

  npm 환경에서는

$ npm i -g npm
$ npm i --save lodash

 

3. 사용

  web 에서는

<script src..> 로 include 했으면 _. 으로 바로 사용하면 됩니다.

    let a = [1,2,3,4];
    let b = _.shuffle(a);

    console.log(b); // [4,3,1,2]

 

  npm 환경 에서는

아래와 같이 골라서 사용할 수 있습니다.

<공식 홈페이지 참고>

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

 

4. 자주 쓰는

_.shuffle()

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

_.map()

function square(n) {
  return n * n;
}
 
_.map([4, 8], square);
// => [16, 64]

_.uniq()

_.uniq([2, 1, 2]);
// => [2, 1]

_.defaultTo()

    var a = 1;
    _.defaultTo(a, 10);
    // => 1
    
    a = null;
    _.defaultTo(a, 10);
    // => 10

    a = undefined
    _.defaultTo(a, 10);
    // => 10

    a = ''
    _.defaultTo(a, 10);
    // => ''

 

그밖에 공식 홈페이지 Document 를 보면 상당히 좋은 함수들을 확인 할 수 있습니다.

한번 쭉~ 둘러보시고 "이런게 있구나~" 라고 기억만 해도 나중에 찾아서 쓰기 좋을 겁니다.

728x90
반응형

댓글