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들이 있다면 적극 사용하도록 노력해야겠다.