_.union() 메서드란?
_.union() 메서드는 자바스크립트 유틸리티 라이브러리인 Underscore.js에서 제공하는 함수입니다. 이 함수는 여러 개의 배열을 인자로 받아, 모든 배열에 담긴 값을 하나로 합친 뒤 중복을 제거한 새로운 배열(합집합)을 반환합니다. 각 배열의 모든 값을 하나하나 검사하여 고유한 값만 골라 새 배열에 담아주기 때문에, 데이터 정리나 병합 작업에서 매우 유용하게 활용됩니다.
문법(Syntax)
_.union( array1, array2, .... );
인자로 전달되는 배열의 개수에는 제한이 없으며, 최소 한 개 이상의 배열을 넘겨주면 됩니다. 반환되는 배열은 값이 처음 등장한 순서를 기준으로 정렬됩니다.
예제 1: 숫자 배열의 고유 요소 구하기
다음 예제에서는 _.union()을 사용해 세 개의 숫자 배열에서 중복을 제거한 고유 요소 배열을 얻습니다.
<html>
<body>
<script
src ="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
document.write(_.union([1, 2, 9, 40],
[1, 20, 3, 2],
[9, 2]));
</script>
</body>
</html>출력 결과
1,2,9,40,20,3
세 배열에 공통으로 포함된 1, 2, 9는 각각 한 번씩만 출력된 것을 확인할 수 있습니다.
예제 2: 다양한 타입의 값 다루기
배열에는 숫자나 문자열뿐만 아니라 빈 문자열("")이나 falsy 값(undefined, null 등)도 포함될 수 있습니다. _.union()은 값의 타입에 관계없이 동일하게 동작합니다.
다음 예제에서는 배열에 문자열, 숫자, 빈 문자열, undefined, null 등 다양한 값이 섞여 있지만, _.union()은 문제없이 고유한 값들로 이루어진 새 배열을 반환합니다.
<html>
<body>
<script
src ="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
document.write(_.union(["hello",2, "hi", 1, ""],
['the', undefined],
['', null],
["*", ""]));
</script>
</body>
</html>출력 결과
hello,2,hi,1,,the,,,*
정리
_.union() 메서드는 여러 배열을 하나로 병합하면서 중복을 자동으로 제거해 주는 편리한 도구입니다. 특히 서로 다른 출처에서 가져온 데이터 목록을 합치거나, 태그·카테고리 같은 값의 집합을 만들 때 코드를 크게 단순화해 줍니다. 단, 객체(Object)가 포함된 배열의 경우 참조(reference) 기준으로 비교되므로 내용이 같아도 다른 객체로 판단된다는 점은 유의해야 합니다.