웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트 라이브러리 lodash의 union() 메소드에 대하여 알아봅니다.
메소드 union()은 lodash 라이브러리로 배열에 사용하는 메소드 중 하나로 여러 개의 배열에 사용하여 하나의 고유한(unique) 값으로 병합 할 수 있는 메소드입니다. 다시 말해서 배열을 합치면서 같은 값은 하나만 남기도록 만들 수 있습니다. 아래처럼 두 가지 기능을 한 번에 수행하는 메소드입니다.
- 여러 개의 배열을 하나의 배열로 합치기
- 합친 값에서 고유의 값만 남기기
이처럼 병합 후 동일한 값을 제외할 경우가 필요하다면 union()을 사용하면 매우 간단하죠.
다음으로 union() 문법을 알아봅니다.
_.union([arrayA, arrayB, ...])
간단한 문법은 위와 같습니다. 인자로 하나 이상의 배열을 전달할 수 있으며 하나의 배열로 병합해줍니다. 그럼 union()에 대하여 아래에서 더 자세히 알아봅니다.
간단한 예제를 만들어 봅니다.
@ 배열 두 개를 하나의 unique 값으로 합치기
만약 아래와 같이 두 개의 배열 arrayA와 arrayB가 존재하는 경우를 생각해봅니다.
이제 두 개의 배열을 병합하되 동일한 값이 없는 고유의 값만 남기려고 합니다. 어떻게 하면 될까요? 가장 간단한 방법 중 하나로 바로 lodash의 union()을 사용할 수 있죠. 아래와 같이 두 개의 배열을 병합하기 위해서 코드를 작성하였습니다.
이제 코드를 실행하면 아래와 같이 새로운 변수 arrayC에 병합된 결과가 나타납니다.
출력 결과를 확인해보니 두 개의 배열이 하나로 병합되면서 동시에 동일한 배열 값인 3이 하나만 남은 것을 확인할 수 있습니다.
이처럼 매우 쉽게 두 가지 역할을 수행하는 union()을 사용할 수 있습니다.
@ 배열 여러 개를 하나의 배열로 병합하기
이번에는 두 개가 아닌 더 많은 배열을 하나로 합치려고 합니다. 아래와 같이 여러 배열 값을 하나로 합치고 결과를 알아봅니다.
결과를 확인해보면 예상한 것과 동일하게 나타납니다.
[ 참고 ] n 차원 배열인 경우 1차원 배열로 합치기
위 예제는 1차원 배열을 1차원 배열로 합쳤지만 만약 n차원 배열 여러 개를 하나로 합쳐서 1차원 배열이 필요한 경우 아래처럼 _.flatten()을 함께 사용해도 됩니다.
상황에 따라 위와 같은 경우도 병합이 필요할 수 있으므로 참고하시면 좋을 것 같습니다.
[참고 2] 참조 값을 가지는 배열에 union() 사용할 수 있을까?
만약 1, 2, 3 ... 처럼 원시값 배열을 합치는 것이 아닌 컬렉션인 경우에 union()을 사용할 수 있을까요? 한 번 해보겠습니다. 아래처럼 객체 값을 가지는 배열 두 개를 하나로 합쳐봅니다.
객체의 값은 동일합니다.
실행 결과를 확인해보면 동일한 객체 값이지만 병합되지 않습니다. 참조값이므로 조건 arrayA === arrayB는 false이므로 어떻게 보면 예상한 결과입니다. 즉 컬렉션 값을 병합하기에는 사용할 수 없습니다.
순수 자바스크립트를 사용하는 방법은 없을까요? 여러 방법이 있겠지만 Set()을 사용할 수도 있겠습니다. Set()은 고유의 값만 가지기 때문이죠! 이제 아래에서 병합하고 고유의 값만 반환하는 코드를 작성해보겠습니다.
결과를 보니 원하는 결과가 나왔습니다. 위 코드를 확인하면 아래의 순서대로 수행하여 결과를 반환합니다.
union()을 사용하는 방법과 함께 알아두면 매우 좋겠습니다!
Set() 관련 링크 바로가기 >
https://webisfree.com/2022-05-16/[자바스크립트]-배열처럼-사용하는-set-알아보기
여기까지 lodash의 union()에 대하여 알아봤습니다. 이처럼 고유 값만 가지기 위해서 lodash의 union()을 사용할 수 있습니다.
# lodash union() 메소드는?
메소드 union()은 lodash 라이브러리로 배열에 사용하는 메소드 중 하나로 여러 개의 배열에 사용하여 하나의 고유한(unique) 값으로 병합 할 수 있는 메소드입니다. 다시 말해서 배열을 합치면서 같은 값은 하나만 남기도록 만들 수 있습니다. 아래처럼 두 가지 기능을 한 번에 수행하는 메소드입니다.
- 여러 개의 배열을 하나의 배열로 합치기
- 합친 값에서 고유의 값만 남기기
이처럼 병합 후 동일한 값을 제외할 경우가 필요하다면 union()을 사용하면 매우 간단하죠.
다음으로 union() 문법을 알아봅니다.
_.union([arrayA, arrayB, ...])
간단한 문법은 위와 같습니다. 인자로 하나 이상의 배열을 전달할 수 있으며 하나의 배열로 병합해줍니다. 그럼 union()에 대하여 아래에서 더 자세히 알아봅니다.
! union() 예제보기
간단한 예제를 만들어 봅니다.
@ 배열 두 개를 하나의 unique 값으로 합치기
만약 아래와 같이 두 개의 배열 arrayA와 arrayB가 존재하는 경우를 생각해봅니다.
arrayA = [ 1, 2, 3 ];
arrayB = [ 3, 4, 5 ];
arrayB = [ 3, 4, 5 ];
이제 두 개의 배열을 병합하되 동일한 값이 없는 고유의 값만 남기려고 합니다. 어떻게 하면 될까요? 가장 간단한 방법 중 하나로 바로 lodash의 union()을 사용할 수 있죠. 아래와 같이 두 개의 배열을 병합하기 위해서 코드를 작성하였습니다.
arrayC = _.union(arrayA, arrayB);
이제 코드를 실행하면 아래와 같이 새로운 변수 arrayC에 병합된 결과가 나타납니다.
// 출력결과
arrayC = [ 1, 2, 3, 4, 5 ]
arrayC = [ 1, 2, 3, 4, 5 ]
출력 결과를 확인해보니 두 개의 배열이 하나로 병합되면서 동시에 동일한 배열 값인 3이 하나만 남은 것을 확인할 수 있습니다.
이처럼 매우 쉽게 두 가지 역할을 수행하는 union()을 사용할 수 있습니다.
@ 배열 여러 개를 하나의 배열로 병합하기
이번에는 두 개가 아닌 더 많은 배열을 하나로 합치려고 합니다. 아래와 같이 여러 배열 값을 하나로 합치고 결과를 알아봅니다.
_.union([1, 2, 3], [4, 5, 6], [7,8,9], [10]);
// Result
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// Result
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
결과를 확인해보면 예상한 것과 동일하게 나타납니다.
[ 참고 ] n 차원 배열인 경우 1차원 배열로 합치기
위 예제는 1차원 배열을 1차원 배열로 합쳤지만 만약 n차원 배열 여러 개를 하나로 합쳐서 1차원 배열이 필요한 경우 아래처럼 _.flatten()을 함께 사용해도 됩니다.
_.flatten(_.union([[1], [2, 3]], [4, [5], 6], [7,[8,9]], [10]));
// Result
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// Result
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
상황에 따라 위와 같은 경우도 병합이 필요할 수 있으므로 참고하시면 좋을 것 같습니다.
[참고 2] 참조 값을 가지는 배열에 union() 사용할 수 있을까?
만약 1, 2, 3 ... 처럼 원시값 배열을 합치는 것이 아닌 컬렉션인 경우에 union()을 사용할 수 있을까요? 한 번 해보겠습니다. 아래처럼 객체 값을 가지는 배열 두 개를 하나로 합쳐봅니다.
arrayA = [{a: 1, b: 2}];
arrayB = [{a: 1, b: 2}];
arrayB = [{a: 1, b: 2}];
객체의 값은 동일합니다.
_.union(arrayA, arrayB);
// Result
[
{ a: 1, b: 2 },
{ a: 1, b: 2 }
];
// Result
[
{ a: 1, b: 2 },
{ a: 1, b: 2 }
];
실행 결과를 확인해보면 동일한 객체 값이지만 병합되지 않습니다. 참조값이므로 조건 arrayA === arrayB는 false이므로 어떻게 보면 예상한 결과입니다. 즉 컬렉션 값을 병합하기에는 사용할 수 없습니다.
! 자바스크립트를 사용하여 병합 후 unique 값 얻기
순수 자바스크립트를 사용하는 방법은 없을까요? 여러 방법이 있겠지만 Set()을 사용할 수도 있겠습니다. Set()은 고유의 값만 가지기 때문이죠! 이제 아래에서 병합하고 고유의 값만 반환하는 코드를 작성해보겠습니다.
var arrayA = [ 1, 2, 3 ];
var arrayB = [ 3, 4, 5 ];
var arrayC = new Array(...new Set([...arrayA, ...arrayB]));
// Result
[1, 2, 3, 4, 5]
var arrayB = [ 3, 4, 5 ];
var arrayC = new Array(...new Set([...arrayA, ...arrayB]));
// Result
[1, 2, 3, 4, 5]
결과를 보니 원하는 결과가 나왔습니다. 위 코드를 확인하면 아래의 순서대로 수행하여 결과를 반환합니다.
- 여러 개의 배열을 ...(spread operator)를 사용하여 하나로 병합
- new Set()에 적용하여 고유의 값만 남기도록 변환
- new Array()를 사용하여 Set 타입을 Array 타입으로 다시 변환
union()을 사용하는 방법과 함께 알아두면 매우 좋겠습니다!
Set() 관련 링크 바로가기 >
https://webisfree.com/2022-05-16/[자바스크립트]-배열처럼-사용하는-set-알아보기
여기까지 lodash의 union()에 대하여 알아봤습니다. 이처럼 고유 값만 가지기 위해서 lodash의 union()을 사용할 수 있습니다.
아래의 글도 찾고 계시지 않나요?
