Array.join() 메서드란?
JavaScript의 Array.join() 메서드는 배열에 포함된 모든 요소를 하나로 연결한 뒤, 그 결과를 문자열(string) 형태로 반환하는 메서드입니다. 각 요소 사이에는 지정한 구분자(separator)가 자동으로 삽입되어 가독성 좋은 문자열을 만들 수 있습니다.
기본 구문
array.join(separator)
separator 매개변수에는 배열 요소를 구분할 때 사용할 문자열을 지정합니다. 몇 가지 중요한 특징은 다음과 같습니다.
- 구분자를 생략하면 기본값인 쉼표(,)가 사용됩니다.
- 빈 문자열("")을 전달하면 요소들이 구분자 없이 그대로 이어져 하나의 문자열이 됩니다.
- 원본 배열은 변경되지 않고, 새로운 문자열만 반환됩니다.
예제 1: join() 기본 사용법
다음 예제에서는 주어진 값이 배열인지 확인한 후, join() 메서드를 사용해 배열을 문자열로 변환하여 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p>Is this is an array?</p>
<p id="test"></p>
<script>
var arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
var res = document.getElementById("test");
res.innerHTML = Array.isArray(arr)+" = "+arr.join()
</script>
</body>
</html>위 코드에서 Array.isArray(arr)는 해당 값이 배열인지 검사하고, arr.join()은 구분자를 지정하지 않았으므로 쉼표(,)로 요소를 연결합니다.
실행 결과
예제 2: 구분자 직접 지정하기
join() 메서드에 원하는 구분자를 인수로 전달하면, 쉼표 대신 해당 문자열로 배열 요소가 연결됩니다. 아래 예제에서는 점 세 개("...")를 구분자로 사용했습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p id="test"></p>
<script>
var arrStud = ["Laptop", "Desktop", "Tablet"];
document.getElementById("test").innerHTML = "Initial array = "+arrStud+", <br>String with seperator = "+arrStud.join("...");
</script>
</body>
</html>실행하면 초기 배열은 "Laptop,Desktop,Tablet"으로 표시되고, 구분자를 적용한 결과는 "Laptop...Desktop...Tablet"처럼 출력됩니다.
실행 결과
정리
Array.join() 메서드는 배열 데이터를 화면에 표시하거나 CSV 형태의 문자열을 만들 때 매우 유용하게 활용됩니다. 구분자를 생략하면 쉼표(,)가 기본으로 적용된다는 점과, 원본 배열은 그대로 유지된다는 점만 기억하면 됩니다.