인기 라이브러리 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() 메소드에 대하여 알아보았습니다.