Why Lodash?

lodash는 현재 회사의 온보딩 교육 과정에서 처음 접했던 라이브리러리 였다.

회사의 기술 스택을 전반적으로 경험해 볼 수 있는 프로젝트 였는데, 시니어 개발자 분께서 프론트엔드에서 가장 널리 쓰이고 있는 것이니, 꼭 익숙해지라고 하셨던 생각이 난다.

아래 설문조사에 따르면, lodash가 1위를 차지한 것을 볼 수 있다.

출처: https://2022.stateofjs.com/en-US/other-tools/

이젠 필수가 되어버린 lodash를 쓰며 느낀 장점들을 써보려고 한다.

1. 코드의 가독성이 좋아진다

• 함수 이름이 직관적이고, 코드를 간결하게 쓸 수 있기 때문에 그 흐름이 비교적 쉽게 이해된다.

_.uniq([1, 1, 2]); // [1, 2]
_.intersection([2, 1], [2, 3]); // [2]

2. native 함수에서 가능하지 않았던 것들이 가능해진다.

• 예를 들어, native javascript의 .forEach(), .map()같이 Array에서만 가능했던 method들에 Object type도 적용할 수 있다.
• 함수의 확장성이 높아져서 그 활용도가 높다는 것이다.

const person = {
 name: 'Jenny',
 age: 20,
 hasDog: true
}

_.forEach(person, (value, key) => console.log(value));
// 'Jenny'
// 20
// true

_.forEach(person, (value, key) => console.log(key));
// name
// age
// hasDog

개인적으로 가장 큰 장점이라고 느꼈던 부분이다.🤩

일하면서 가장 자주 썼던 함수들은 native함수에서 복잡하게 구현하지 않아도 되는 것들이다.

• _.filter()
• _.clone() / _.cloneDeep()
• _.isEqual()
• _.remove()
• _.orderBy()
• ...

아래 항목들은 구글링으로 찾아본 장점들이다.

3. Cross-browser compatibility

• 브라우저에 상관없이 동일하게 동작하기 때문에 호환성 이슈를 신경쓰지 않아도 된다.

4. 에러 처리에 있어 안전하다.

[native JS]

const products = [
{code: ‘00123’,name: ‘Milk’ },
{code: ‘01020’,name: ‘Bread’ },
{code: ‘12232’,name: ‘Eggs’ },
]

const productCodes = products.map(product => product.code)

// productCodes -> [‘00123’, ‘01020’, ‘11232’]

• 이 때, products가 항상 Array 타입을 유지한다는 보장이 없다면? 👉 productCodes는 Error를 발생시키게 된다.

const products = await SomeAPI.fetchProducts() //-> null

const productCodes = products.map(product => product.code)
//-> Uncaught TypeError: Cannot read property 'map' of null

lodash의 _.map을 사용한다면?

const productCodes = _.map(products, product => product.code)

products가 null or undefined 이어도 _.map을 사용했기 때문에 empty Array를 return하게 된다.

API로 부터 정상적인 값을 받지 못해도, productCodes가 Array type으로 유지 되기 때문에 에러가 발생하진 않는다.

---

구글링 하면서 보다 보니, 굳이 lodash를 사용하지 않아도 된다는 의견의 글들도 여럿 보았다. (관련 링크)

이미 너무 익숙해져 버린 lodash... 자주 사용하는 method만 계속 쓰는 습관이 있는데 이외에도, 더 유용한 method들이 있다면 적극 사용하도록 노력해야겠다.