Lodash

jude·2022년 3월 8일
0

lodash

목록 보기
1/1
post-thumbnail

Lodash

배열, 객체, 숫자, 문자열 등의 데이터를 손쉽게 변형 및 수정시킬 수 있는 다양한 기능이 들어 있는 패키지.

설치

$ npm i -D lodash

수정이력

  • 22.04.05 - camelCase, kebabCase, snakeCase 추가
  • 22.04.06 - unionBy 수정, uniqBy 추가

unionBy

  • unionBy는 앞에 중복되는 값이 있는 배열들을 인수로 넣어주고, 마지막 인수로 중복을 체크할 속성값을 지정해주면 중복이 제거된 하나의 배열을 반환한다.
import _unionBy from 'lodash/unionBy'
const user1 =[
  { name: 'jude', userId: 50},
  { name: 'kate', userId: 24}
]
const user2 =[
  { name: 'jude', userId: 50},
  { name: 'linda', userId: 42}
]
const user3 =[
  { name: 'kyle', userId: 82},
  { name: 'kanas', userId: 65}
]

_unionBy(user1, user2, user3, 'userId');

// 결과
[
  {name: 'jude', userId: 50},
  {name: 'kate', userId: 24},
  {name: 'linda', userId: 42},
  {name: 'kyle', userId: 82},
  {name: 'kanas', userId: 65}
]

uniqBy

  • uniqBy는 앞에 중복되는 값이 있는 배열을 인수로 넣어주고, 마지막 인수로 중복을 체크할 속성값을 지정해주면 중복이 제거된 하나의 배열을 반환한다.
import _unionBy from 'lodash/unionBy'
const user =[
  { name: 'jude', userId: 50},
  { name: 'kate', userId: 24},
  { name: 'jude', userId: 50},
  { name: 'linda', userId: 42},
  { name: 'kyle', userId: 82},
  { name: 'kanas', userId: 65}
]

_uniqBy(user, 'userId');

// 결과
[
  {name: 'jude', userId: 50},
  {name: 'kate', userId: 24},
  {name: 'linda', userId: 42},
  {name: 'kyle', userId: 82},
  {name: 'kanas', userId: 65}
]

upperFirst

  • upperFirst 메서드는 문자열의 맨 앞글자를 대문자로 변경

  • 기능 하나만 꺼내 쓰는 방법

import _upperFirst from 'lodash/upperFirst';

let str = 'movie';
const str2 = _upperFirst(str);

console.log(str2); // 'Movie'
  • lodash 객체에서 꺼내 쓰는 방법

import _ from 'lodash';

let str = 'movie';
const str2 = _.upperFirst(str);

console.log(str2); // 'Movie'

camelCase

  • 인수로 들어오는 문자열을 카멜케이스로 변경시켜준다.
import _camelCase from 'lodash/camelCase'

console.log( _camelCase('hello world') ) // helloWorld
console.log( _camelCase('hello_world') ) // helloWorld
console.log( _camelCase('hello-world') ) // helloWorld
console.log( _camelCase('HelloWorld') ) // helloWorld

kebabCase

  • 인수로 들어오는 문자열을 케밥케이스로 변경시켜준다.
import _kebabCase from 'lodash/kebabCase'

console.log( _kebabCase('hello world') ) // hello-world
console.log( _kebabCase('hello_world') ) // hello-world
console.log( _kebabCase('helloWorld') ) // hello-world
console.log( _kebabCase('HelloWorld') ) // hello-world

snakeCase

  • 인수로 들어오는 문자열을 스네이크케이스로 변경시켜준다.
import _snakeCase from 'lodash/snakeCase'

console.log( _snakeCase('hello world') ) // hello_world
console.log( _snakeCase('hello-world') ) // hello_world
console.log( _snakeCase('helloWorld') ) // hello_world
console.log( _snakeCase('HelloWorld') ) // hello_world
profile
UI 화면 만드는걸 좋아하는 UI개발자입니다. 프론트엔드 개발 공부 중입니다. 공부한 부분을 블로그로 간략히 정리하는 편입니다.

0개의 댓글