JavaScript에서 배열의 모든 요소를 단순히 이어 붙이는 것이 아니라, 특정 조건을 만족하는 요소만 골라서 하나의 문자열로 합치고 싶은 경우가 있습니다. 이럴 때 filter() 메서드와 join() 메서드를 함께 사용하면 아주 간단하게 해결할 수 있습니다.
아래 예제에서는 배열 요소 중 2로 나누어 떨어지는(짝수) 값들만 필터링한 뒤, 지정한 구분자로 연결하여 화면에 출력합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>조건으로 배열 조인하기</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>조건을 만족하는 배열 요소 조인하기</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 2로 나누어 떨어지는 배열 요소들이 조인됩니다.</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 11, 22, 33, 18];
sampleEle.innerHTML = arr;
let joinArr = arr.filter((el) => el % 2 == 0).join(" : ");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = joinArr;
});
</script>
</body>
</html>코드 설명
arr.filter((el) => el % 2 == 0)— 배열의 각 요소를 순회하면서 2로 나눈 나머지가 0인 요소(짝수)만 추출해 새로운 배열을 만듭니다..join(" : ")— 필터링된 배열의 요소들을 콜론(:)과 공백으로 구분하여 하나의 문자열로 연결합니다.- 버튼 클릭 시
addEventListener로 등록된 이벤트 핸들러가 실행되어 결과가 화면에 표시됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
'클릭하세요' 버튼을 누른 후 — 짝수 요소만 구분자와 함께 조인되어 표시됩니다.
이처럼 filter()와 join()을 조합하면 원하는 조건의 데이터만 손쉽게 문자열로 변환할 수 있으며, 조건식만 변경하면 홀수, 특정 범위의 숫자 등 다양한 상황에 응용할 수 있습니다.