Lodash라이브러리

배열메서드에서 sort를 더 쉽고 간편하게 쓸 수 있는 라이브러리

다른 것도 가능한듯

 

 

 

 

https://lodash.com/

Lodash

 

 

 

 

Lodash는 JavaScript에서 데이터 조작과 유틸리티 기능을 제공하는 인기 있는 라이브러리입니다. Lodash를 사용하면 배열, 객체, 문자열 등을 쉽게 다룰 수 있는 다양한 기능을 제공합니다. 개발자가 일반적으로 자주 수행하는 작업을 더 간결하고 직관적으로 작성할 수 있게 해줍니다.

### Lodash의 주요 기능

1. **배열 조작**
   - 배열의 요소를 필터링, 맵핑, 축소, 분할하는 등의 작업을 쉽게 수행할 수 있습니다.
   ```javascript
   const _ = require('lodash');

   const numbers = [1, 2, 3, 4, 5];

   // 필터링: 짝수만 추출
   const evens = _.filter(numbers, num => num % 2 === 0);
   console.log(evens); // [2, 4]

   // 맵핑: 모든 요소에 2를 곱함
   const doubled = _.map(numbers, num => num * 2);
   console.log(doubled); // [2, 4, 6, 8, 10]
   ```

2. **객체 조작**
   - 객체의 속성을 쉽게 복사, 병합, 분할할 수 있습니다.
   ```javascript
   const object = { 'a': 1, 'b': 2, 'c': 3 };

   // 특정 속성을 제외한 객체 반환
   const newObject = _.omit(object, ['b']);
   console.log(newObject); // { 'a': 1, 'c': 3 }

   // 객체 병합
   const object2 = { 'd': 4 };
   const mergedObject = _.assign({}, object, object2);
   console.log(mergedObject); // { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }
   ```

3. **문자열 처리**
   - 문자열을 특정 기준으로 나누거나 변환할 수 있습니다.
   ```javascript
   const str = 'hello world';

   // 첫 글자만 대문자로 변환
   const capitalized = _.capitalize(str);
   console.log(capitalized); // 'Hello world'
   ```

4. **유틸리티 함수**
   - 깊은 복사, 고유값 추출, 랜덤 값 생성 등의 유틸리티 함수들을 제공합니다.
   ```javascript
   const nestedArray = [1, [2, [3, [4]]]];

   // 깊은 복사
   const deepClone = _.cloneDeep(nestedArray);
   console.log(deepClone); // [1, [2, [3, [4]]]]

   // 고유값 추출
   const array = [1, 2, 1, 3, 1, 4];
   const uniqueValues = _.uniq(array);
   console.log(uniqueValues); // [1, 2, 3, 4]
   ```

5. **컬렉션 처리**
   - 컬렉션(배열 또는 객체)의 요소를 순회하고 특정 조건에 맞는 요소를 찾는 등의 작업을 쉽게 할 수 있습니다.
   ```javascript
   const users = [
     { 'user': 'barney', 'age': 36, 'active': true },
     { 'user': 'fred', 'age': 40, 'active': false },
   ];

   // 조건에 맞는 첫 번째 요소 반환
   const user = _.find(users, { 'age': 36, 'active': true });
   console.log(user); // { 'user': 'barney', 'age': 36, 'active': true }
   ```

### Lodash 설치 및 사용

Lodash는 npm을 통해 설치할 수 있습니다.

```sh
npm install lodash
```

설치 후, `require` 또는 `import` 문을 사용하여 Lodash를 사용할 수 있습니다.

```javascript
// CommonJS 방식
const _ = require('lodash');

// ES6 방식
import _ from 'lodash';
```

### Lodash의 장점

1. **사용하기 쉬운 API**: Lodash는 직관적인 API를 제공하여 복잡한 작업을 간단하게 수행할 수 있게 해줍니다.
2. **다양한 기능**: 배열, 객체, 문자열, 함수 등의 다양한 유틸리티 함수를 제공합니다.
3. **성능 최적화**: Lodash는 성능이 중요한 작업에서도 효율적으로 동작하도록 설계되었습니다.
4. **높은 호환성**: 다양한 JavaScript 환경에서 사용할 수 있습니다.

### 결론

Lodash는 JavaScript 개발에서 데이터 조작을 더 쉽고 효율적으로 만들기 위해 널리 사용되는 유틸리티 라이브러리입니다. 배열, 객체, 문자열 등의 조작과 관련된 많은 유용한 기능을 제공하므로, 복잡한 데이터 처리 작업을 간단하게 수행할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lodash를 배우고 싶다면, 다양한 기능을 체계적으로 익히는 것이 중요합니다. 아래는 Lodash의 기본 개념과 기능을 이해하고 실제로 사용해 볼 수 있는 방법을 안내하는 단계입니다.

### 1. Lodash 설치

먼저, Lodash를 프로젝트에 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

```sh
npm install lodash
```

### 2. Lodash 사용법

설치 후, Lodash를 사용하려면 `require` 또는 `import`를 통해 불러올 수 있습니다.

```javascript
// CommonJS 방식
const _ = require('lodash');

// ES6 방식
import _ from 'lodash';
```

### 3. Lodash의 주요 기능

#### 3.1 배열 조작

**필터링 (filter)**
```javascript
const numbers = [1, 2, 3, 4, 5];
const evens = _.filter(numbers, num => num % 2 === 0);
console.log(evens); // [2, 4]
```

**맵핑 (map)**
```javascript
const doubled = _.map(numbers, num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
```

**축소 (reduce)**
```javascript
const sum = _.reduce(numbers, (total, num) => total + num, 0);
console.log(sum); // 15
```

**병합 (concat)**
```javascript
const array1 = [1];
const array2 = [2, 3, 4];
const combined = _.concat(array1, array2);
console.log(combined); // [1, 2, 3, 4]
```

#### 3.2 객체 조작

**속성 선택 (pick)**
```javascript
const object = { 'a': 1, 'b': 2, 'c': 3 };
const picked = _.pick(object, ['a', 'c']);
console.log(picked); // { 'a': 1, 'c': 3 }
```

**속성 제외 (omit)**
```javascript
const omitted = _.omit(object, ['b']);
console.log(omitted); // { 'a': 1, 'c': 3 }
```

**병합 (assign)**
```javascript
const object1 = { 'a': 1 };
const object2 = { 'b': 2 };
const merged = _.assign({}, object1, object2);
console.log(merged); // { 'a': 1, 'b': 2 }
```

#### 3.3 문자열 처리

**첫 글자 대문자로 (capitalize)**
```javascript
const str = 'hello world';
const capitalized = _.capitalize(str);
console.log(capitalized); // 'Hello world'
```

**특정 문자열로 패딩 (pad)**
```javascript
const padded = _.pad('hello', 10, '_');
console.log(padded); // '__hello___'
```

#### 3.4 유틸리티 함수

**깊은 복사 (cloneDeep)**
```javascript
const obj = { 'a': 1, 'b': { 'c': 2 } };
const deepClone = _.cloneDeep(obj);
console.log(deepClone); // { 'a': 1, 'b': { 'c': 2 } }
```

**고유값 추출 (uniq)**
```javascript
const array = [1, 2, 1, 3, 1, 4];
const uniqueValues = _.uniq(array);
console.log(uniqueValues); // [1, 2, 3, 4]
```

**랜덤 값 생성 (random)**
```javascript
const random = _.random(1, 100);
console.log(random); // 1에서 100 사이의 랜덤 값
```

### 4. 실습 및 예제

Lodash의 다양한 기능을 익히기 위해 실습과 예제를 통해 직접 사용해보는 것이 좋습니다. 아래는 몇 가지 예제입니다.

#### 예제 1: 학생 성적 데이터 처리

```javascript
const students = [
  { name: 'John', score: 85 },
  { name: 'Jane', score: 92 },
  { name: 'Jim', score: 70 },
  { name: 'Jill', score: 60 }
];

// 80점 이상인 학생 필터링
const topStudents = _.filter(students, student => student.score >= 80);
console.log(topStudents);

// 모든 학생의 성적 합계
const totalScore = _.reduce(students, (total, student) => total + student.score, 0);
console.log(totalScore);

// 학생 이름 배열
const studentNames = _.map(students, 'name');
console.log(studentNames);
```

#### 예제 2: 객체 배열 병합

```javascript
const arr1 = [{ 'a': 1 }, { 'b': 2 }];
const arr2 = [{ 'c': 3 }, { 'd': 4 }];
const mergedArray = _.concat(arr1, arr2);
console.log(mergedArray); // [{ 'a': 1 }, { 'b': 2 }, { 'c': 3 }, { 'd': 4 }]
```

### 5. Lodash 공식 문서

Lodash의 공식 문서를 참고하여 다양한 기능과 사용법을 익힐 수 있습니다. [Lodash 공식 문서](https://lodash.com/docs/)

### 결론

Lodash는 강력하고 다양한 유틸리티 함수를 제공하는 라이브러리입니다. 배열, 객체, 문자열 등의 데이터를 효율적으로 다루기 위해 Lodash를 사용하면 개발 시간을 절약하고 코드 가독성을 높일 수 있습니다. 위의 예제들을 직접 실행해보고, Lodash 공식 문서를 참고하여 더 많은 기능을 탐구해 보세요.