[ JavaScript ] Lodash 라이브러리 사용해보기.

안녕하세요, 오늘은 Lodash 라는 라이브러리를 사용해보겠습니다.

 

Lodash는 자바스크립트 라이브러리로 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와주며, _ 라는 기호를 사용하여 lodash 라고 라이브러리명이 지어진 것 같습니다. 데이터를 다룰 때 복잡한 자바스크립트 코드 대신에 이 라이브러리를 사용함으로써 좀더 효율적인 코드를 작성할 수 있게 됩니다.

 

 

설치방법 : 

- CDN 사용

<script 
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">
</script>

https://www.jsdelivr.com/package/npm/lodash

 

 

- npm 사용

npm install --save lodash

 

 

 

먼저 간단한 예제를 통해 Lodash 라이브러리를 사용해보겠습니다.

 

다음은 fruits  라는 배열에서 값이 '복숭아'인 요소를 제거한 후 나머지 요소들을 출력하는 코드입니다.

const fruits = [
    '사과',
    '포도',
    '수박',
    '복숭아',
    '복숭아',
    '사과',
    '망고'
]

const newArray = _.without(fruits, '복숭아')

console.log(newArray)

 

실행된 결과는 다음과 같습니다. 

 

Lodash 라이브러리를 사용하지 않았다면 자바스크립트의 filter() 함수 등을 사용해서 좀더 코드가 길어질 수 있습니다.

 

 

 

 

다음은 두 번째 예제입니다. 

 

자바스크립트에서 두 객체(object)를 비교할 때는 '==' 혹은 '==='와 같은 연산자를 사용할 수 없습니다. 자바스크립트에서 객체는 참조 타입이기 때문입니다. 그래서 보통 자바스크립트로 두 객체를 비교할 때는 'JSON.stringify()' 메서드를 사용해서 객체를 JSON 문자열로 변환한 후 일치 연산자(===)를 사용해서 비교합니다. 이 때, Lodash 라이브러리를 사용한다면 isEqual() 메소드를 사용해서 비교할 수 있습니다.

 

const obj1 = { name: 'Kim', age: 25 };
const obj2 = { name: 'Kim', age: 25 };

// 자바스크립트 사용
JSON.stringify(obj1) === JSON.stringify(obj2); // true

// Lodash 라이브러리 사용
_.isEqual(obj1, obj2); // true

 

 

하지만 JSON.stringify() 메소드를 사용할 경우에는 키-값 쌍의 순서가 다르면 같은 객체로 취급되지 않습니다. 

 

예를 들어, 위 예제에서 obj2 를 다음과 같이 키-값 쌍의 순서를 바꾼 후 다시 비교해보겠습니다.

const obj1 = { name: 'Kim', age: 25 };
const obj2 = { age: 25, name: 'Kim' };

// 자바스크립트 사용
JSON.stringify(obj1) === JSON.stringify(obj2); // false

// Lodash 라이브러리 사용
_.isEqual(obj1, obj2); // true

이번에는 자바스크립트 JSON.stringify() 메소드를 사용해서 비교했을 때 두 객체가 같지 않다고 나옵니다. 하지만 Lodash 라이브러리의 isEqual() 메소드를 사용하면 여전히 두 객체는 같은 객체라는 비교 결과가 나오게 됩니다.

 

 

이처럼 오늘은 Lodash 라이브러리가 무엇인지, 자바스크립트 함수 대신에 이 라이브러리를 쓰면 어떤 차이가 발생하는지 간단한 예제를 통해 알아보았습니다.