자바스크립트 join() 메서드란?
자바스크립트의 Array.join() 메서드는 배열에 담긴 개별 요소들을 하나의 문자열로 합쳐 변환할 때 사용하는 대표적인 배열 메서드입니다.
join() 메서드는 인자로 구분자(separator)를 받을 수 있으며, 구분자를 지정하지 않으면 기본적으로 쉼표(,)로 요소들이 연결됩니다. 빈 문자열('')을 전달하면 요소 사이에 아무 문자 없이 그대로 이어 붙일 수 있습니다.
다음은 Array.join() 메서드의 동작을 확인할 수 있는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Array join()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to convert the array into a string
</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ["H", "E", "L", "L", "O", " ", "W", "O", "R", "L", "D"];
fillEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = arr.join("");
});
</script>
</body>
</html>실행 결과
위 예제에서는 각 글자가 개별 요소로 담긴 배열을 만들고, 화면에 배열 상태를 먼저 출력합니다.
이후 “CLICK HERE” 버튼을 클릭하면 join() 메서드가 실행되어 배열의 모든 요소가 하나의 문자열 “HELLO WORLD”로 변환되어 화면에 표시됩니다.
정리
join() 메서드는 배열 데이터를 화면에 출력하거나, URL 경로·CSV 형식의 문자열 등을 만들 때 매우 유용하게 활용됩니다. 구분자만 바꿔주면 원하는 형태의 문자열을 자유롭게 조합할 수 있다는 점을 기억해 두면 좋습니다.