웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > lodash

lodash concat() 메소드 알아보기

Last Modified : 2023-11-04 / Created : 2023-05-05
1,728
View Count
인기 라이브러리 lodash 메서드 중 배열에 사용하는 concat()에 대하여 알아봅니다.




# lodash concat() 메서드 알아보기


여기서 알아볼 concat() 메서드는 배열 메서드로 배열의 값을 서로 합치거나 값을 추가하는데 사용할 수 있죠. 아래에서 알아 볼 내용을 요약하면 다음과 같습니다.

  • 배열 concat() 메소드는 무엇인가?
  • 간단한 문법 알아보기
  • concat() 예제보기

추가로 더 알아볼 내용은?
- 자바스크립트를 사용하여 배열에 추가하는 방법
- _.uniq()와 함께 사용하기


concat() 메서드의 기능 및 역할은?


lodash에는 다양한 배열 메서드가 존재하며 concat()은 특히 자주 사용되는 메소드로 다음의 기능을 수행합니다.

1. 새로운 배열 값을 추가하는 경우
2. 또 다른 배열을 병합하는 경우

참고로 concat() 메서드 역시 기존의 값을 변경하는 파괴적인 메서드가 아닙니다. 즉 새로운 값으로 반환하므로 따로 복제 등의 방법이 필요하지는 않죠. 다음으로 간략한 예제를 만들어봅니다.


! concat() 예제 알아보기


이제 간단한 예제를 만들어보겠습니다. 가장 먼저 배열에 새로운 값을 추가하는 방법입니다.

@ 배열 array1에 새로운 값 4 추가하기
const array1 = [1, 2, 3];
_.concat(array1, 4);

// Result
[1, 2, 3, 4]

기존의 값 [1, 2, 3]에 새로운 값 4가 추가된 것을 볼 수 있습니다.


@ 배열 array1, array2 합치기
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = _.concat(array1, array2);

// Result
[1, 2, 3, 4, 5, 6]

여러 개의 배열을 하나로 병합하는 방법으로도 사용하는 것이 가능합니다. 위에서 보시는 것처럼 두 개의 배열 array1 그리고 array2가 새로운 하나의 array3 배열로 병합되었습니다.



순수 자바스크립트를 사용하는 방법


concat() 메서드를 사용하지 않고 순수 자바스크립트를 사용하여 구현할 수도 있겠습니다. 첫 번째 예제를 동일하게 구현하려면 아래와 같이 push()를 사용한 방법도 있겠죠.
const array1 = [1, 2, 3];
array1.push(4);

// Result
[1, 2, 3, 4]

다음으로 두 개의 배열을 합치는 경우라면? 이 경우 여러 방법이 있지만 가장 간단한 spread 연산을 사용하는 방법이 가능하겠죠.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const array3 = [
  ...array1,
  ...array2
]

// Result
[1, 2, 3, 4, 5, 6]

여기까지 몇 가지 lodash의 concat()을 사용하여 배열을 병합하거나 값을 추가하는 방법을 알아봤습니다.


! 그 외 팁 및 정보


배열의 경우 유니크한 값을 얻고 싶은 경우가 많습니다. 즉 배열 값에 동일한 값이 추가되는 경우 하나의 고유한 값들만 가지길 원하면 어떻게 해야할까요? 이때 lodash uniq() 메소드를 같이 사용하면 됩니다. 예를들어 아래의 예제에서 uniq()를 함께 사용하는 경우 결과가 각각 다르게 나타날 수 있습니다.
const array1 = [1, 2, 3];
const array2 = [3, 4, 5];
_.concat(array1, array2);

// Result
[1, 2, 3, 3, 4, 5]

여기에 uniq()를 추가로 사용하면 결과는 다음과 같습니다.
_.uniq(_.concat(array1, array2));

// Result
[1, 2, 3, 3, 4, 5]

이처럼 위 결과를 통해 배열 병합 후 고유한 유니크 값을 더 쉽게 얻을 수 있게되었습니다.


여기까지 lodash의 concat() 메소드에 대하여 알아보았습니다.

Previous

lodash remove() 메소드 알아보기, 배열 값 삭제

Previous

[lodash] groupBy() 메소드를 사용하여 특정 값을 프로퍼티로 가지는 값으로 재분류 그룹핑하기