1월 26일 -lodash

Yullgiii·2024년 1월 26일

React TIL lodash

개발자로의 취업을 준비하며 TIL

목록 보기

125/309

lodash란?

lodash는 JavaScript의 함수형 프로그래밍을 쉽게 할 수 있게 도와주는 라이브러리이다.
배열, 숫자, 객체, 문자열 등을 쉽게 다룰 수 있는 다양한 함수를 제공한다.
성능 최적화에 중점을 둔 메서드를 제공하여 대규모 데이터 처리에 유용하다.
모듈화가 잘 되어 있어 필요한 기능만을 가져와 사용할 수 있다.

lodash의 주요 특징

체인 메서드(Chain Methods): 여러 lodash 함수를 연결하여 간결하게 작성할 수 있다.
게으른 평가(Lazy Evaluation): 체인 연산에서 필요한 값만 계산하여 성능을 개선한다.
함수형 프로그래밍 지원: 불변성(Immutability)과 순수 함수(Pure Function)를 지원하여 함수형 프로그래밍에 적합하다.

lodash의 주요 함수들

1. 배열 관련 함수

.map: 배열의 각 요소에 함수를 적용한 결과를 모아 새로운 배열을 생성한다.
.filter: 조건에 맞는 요소만을 모아 새로운 배열을 생성한다.
.find: 조건에 맞는 첫 번째 요소를 반환한다.
.reduce: 배열의 각 요소를 누적하여 하나의 값으로 만든다.

2. 객체 관련 함수

.assign: 여러 객체를 하나로 합친다.
.keys: 객체의 모든 키를 배열로 반환한다.
_.values: 객체의 모든 값을 배열로 반환한다.

3. 유틸리티 함수

.debounce: 함수가 너무 자주 호출되지 않도록 지연시키는 함수이다.
.throttle: 일정 시간 동안 함수가 한 번만 호출되도록 제한하는 함수이다.

4. 함수 조작

.bind: 함수의 this 컨텍스트를 고정한다.
.curry: 함수를 커링하여 인자를 부분적으로 적용할 수 있게 한다.

lodash 사용 예제

1: 배열 처리

import _ from 'lodash';

let users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false }
];

let activeUsers = _.filter(users, (user) => user.active);
console.log(activeUsers);
// => [{ 'user': 'barney', 'age': 36, 'active': true }]

2: 객체 조작

import _ from 'lodash';

let object = { 'a': 1, 'b': 2 };
let other = { 'b': 3, 'c': 4 };

let combined = _.assign(object, other);
console.log(combined);
// => { 'a': 1, 'b': 3, 'c': 4 }

3: 함수 디바운스

import _ from 'lodash';

function expensiveOperation() {
  console.log('Expensive Operation!');
}

let debouncedExpensiveOperation = _.debounce(expensiveOperation, 2000);
window.addEventListener('resize', debouncedExpensiveOperation);

lodash의 장점

다양한 유틸리티 함수 제공: lodash는 배열, 객체, 문자열, 함수 등을 다루는데 필요한 수많은 유틸리티 함수를 제공한다. 이로 인해 개발자는 일반적인 작업을 위해 직접 함수를 작성할 필요가 없어진다.
체인 메서드를 통한 간결한 코드 작성: lodash의 체인(Chain) 기능을 사용하면 여러 작업을 한 줄의 코드로 연결하여 가독성 높은 코드를 작성할 수 있다.
성능 최적화: lodash는 내부적으로 성능 최적화가 잘 되어있어, 특히 대량의 데이터를 다룰 때 유리하다.
함수형 프로그래밍 지원: lodash는 함수형 프로그래밍을 지원한다. 불변성과 순수 함수 등의 개념을 적용할 수 있어, 코드의 안정성과 테스트 용이성을 높일 수 있다.
광범위한 호환성: lodash는 다양한 브라우저와 Node.js 환경에서 널리 사용될 수 있도록 설계되었다.

lodash의 단점

파일 크기: lodash의 전체 라이브러리를 포함하면 파일 크기가 커질 수 있다. 하지만 이는 필요한 함수만을 개별적으로 import하는 방식으로 해결할 수 있다.
자바스크립트의 내장 함수와의 중복: ES6 이후로 JavaScript가 많은 유틸리티 기능을 내장하게 되면서 lodash의 일부 기능이 중복될 수 있다. 예를 들어, Array.map, Array.filter 등은 lodash 없이도 사용할 수 있다.
학습 곡선: lodash의 다양한 기능과 체인 메커니즘을 효과적으로 사용하기 위해서는 일정 수준의 학습이 필요하다.
빠른 JavaScript 환경 변화: JavaScript 생태계의 빠른 변화와 새로운 기능의 추가로 인해, lodash의 일부 기능이 구식이 되거나 덜 필요해질 수 있다.

so

lodash는 이렇게 다양한 시나리오에서 JavaScript 개발을 더 효율적으로 만들어 준다. lodash의 함수들은 단순하지만 강력하여, 코드의 가독성과 유지보수성을 크게 향상시킬 수 있다. 다양한 함수를 실험하고 적용해보며 lodash의 전체적인 사용법을 익히는 것이 좋다.