Lodash : 공식적인 소개 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리입니다. 라고 표현 됩니다.
자주 사용 하는 함수들을 기본적으로 제공하는 ES6에서 제공하는 기본함수들과 비교를 좀 하면서 소개 드리겠습니다.
테스트에서 사용 하는 데이터는 아래와 같습니다.
const bookList = [
{ name: '재미있는 책', author: 'tom', pages: 123 },
{ name: '재미없는 책', author: 'tom', pages: 200 },
{ name: '그저 그런 책', author: 'tom', pages: 150 },
{ name: '재미있는 책', author: 'alice', pages: 150 },
{ name: '재미없는 책', author: 'alice', pages: 300 },
{ name: '그저 그런 책', author: 'alice', pages: 450 }
]
1. filter, find
1-1. 저자가 "tom"인 책들을 찾으시오.
_.filter(bookList, {author: 'tom'})
bookList.filter(({author}) => author === 'tom')
1-2. 저자가 "alice"고 제목이 "재미있는 책"을 찾으세요.
_.find(bookList, {author: 'alice', name: '재미있는 책'})
bookList.find(({author, name}) => author === 'alice' && name === '재미있는 책')
위와 같이 Array 기본에 있는 함수들은 검색을 하기위해서 함수를 작성을 해줘야 하지만, lodash의 함수로는 검색하고자 하는 조건을 오브젝트로 전달을 하는 것만으로도 검색이 되기에 조금더 읽기가 편해질 수 있다.
2. sort (sortBy) 페이지를 작은 순서대로 정렬하세요.
// bookList.sort(({pages: aPages}, {pages: bPages}) => aPages - bPages)
[...bookList].sort(({pages: aPages}, {pages: bPages}) => aPages - bPages)
_.sortBy(bookList, 'pages')
위 처럼 함수를 작성하는 것보다 lodash를 이용 하여 키값만 입력 해주는 것만으로도 정렬을 할 수 있다. 또한 Array.sort의 경우에는 대상이 되는 배열의 레퍼런스를 그대로 유지하면서 정렬이 되므로 기존에 있던 정렬을 해칠 수 있기에 이미 특정 순서로 정렬된 배열이라면, 주석으로 표시된 방식 대신에 새로운 레퍼런스로 생성한 배열에서 정렬을 해줘야 한다.
3. 저자 별로 작성한 책을 모아주세요. (groupBy)
bookList.reduce((bookListByAuthor, book) => {
const {author} = book
bookListByAuthor[author] = bookListByAuthor[author] || []
bookListByAuthor[author].push(book)
return bookListByAuthor
}, {})
_.groupBy(bookList, 'author')
4. 200페이지 이하인 책과 200페이지 초과하는 책을 구분해주세요. (partition)
bookList.reduce((bookListBySep, book) => {
const {pages} = book
bookListBySep[+!(pages <= 200)].push(book)
return bookListBySep
}, [[], []])
_.partition(bookList, ({pages}) => pages <= 200)
3번 4번 처럼 원래는 기존에 있는 함수를 활용하여 적절히 처리하여야 하는 함수들도 이미 의미 있는 이름의 함수로 존재 한다. 따라서 lodash에 있는 함수들을 적절히 이용 하면 데이터의 형변환을 대부분 처리가 가능하다.
여기까지 간략한 소개를 해보았다. 관심이 있다면 아래의 사이트를 확인해 보면 된다.
댓글
댓글 쓰기