JavaScript / join()으로 배열을 문자열로 변환하기
Array.join()은 배열 요소를 지정한 구분자로 이어 하나의 문자열을 반환합니다. 구분자를 생략하면 쉼표를 사용하고, 빈 문자열을 주면 사이에 아무것도 넣지 않습니다. 원본 배열은 바뀌지 않습니다.
구분자를 지정하는 방법
items.join(separator)에서 separator는 요소 사이에 넣을 문자열입니다. 인수를 생략하면 쉼표 한 글자가 사용됩니다. 쉼표 뒤에 공백을 넣고 싶다면 join(", ")처럼 공백을 직접 포함하세요. 반환값의 자료형은 항상 문자열이며, 빈 배열의 결과는 빈 문자열입니다.
const places = ['서울', '부산', '제주'];
console.log(places.join()); // '서울,부산,제주'
console.log(places.join(', ')); // '서울, 부산, 제주'
console.log(places.join(' / ')); // '서울 / 부산 / 제주'
console.log(places.join('')); // '서울부산제주'
console.log([].join('-')); // ''
console.log(places); // ['서울', '부산', '제주']구분자는 각 요소 사이에만 들어갑니다. 세 요소를 연결하면 구분자는 두 번 들어가며, 앞뒤에는 자동으로 붙지 않습니다. 화면 표시용 목록에는 ", "가 읽기 좋고, 구분자 없이 붙일 때는 단어 경계를 알아볼 수 있는지도 확인하세요.
null, undefined와 빈 칸 처리
배열의 null, undefined, 비어 있는 슬롯은 연결할 때 빈 문자열로 처리됩니다. 요소의 자리는 남으므로 구분자가 연속될 수 있습니다. 반환 문자열만 보고 원래 값이 무엇이었는지는 복원할 수 없습니다.
console.log(['A', null, 'C'].join('|')); // 'A||C'
console.log(['A', undefined, 'C'].join('|')); // 'A||C'
console.log(['A', , 'C'].join('|')); // 'A||C'
console.log(['A', null, 'C'].join('')); // 'AC'빈 값을 건너뛰어야 한다면 연결 전에 원하는 기준으로 배열을 걸러야 합니다. 예를 들어 items.filter(value => value != null).join(", ")은 null과 undefined를 빼지만 빈 문자열은 유지합니다. 빈 문자열까지 제외해야 한다면 조건을 별도로 정하세요.
전체 예제로 결과 비교하기
아래 코드를 UTF-8로 array-join.html에 저장해 브라우저에서 엽니다. 배열과 구분자를 바꾸면 결과 문자열과 자료형이 바로 표시됩니다. 직접 입력을 고르면 입력칸이 활성화되므로 | 처럼 공백을 포함한 구분자도 시험할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>배열 join() 구분자 실습</title>
</head>
<body>
<label for="sample">배열</label>
<select id="sample">
<option value="places">서울, 부산, 제주</option>
<option value="missing">null과 undefined 포함</option>
</select>
<label for="separator">구분자</label>
<select id="separator">
<option value="default">기본 쉼표</option>
<option value="slash">공백 / 공백</option>
<option value="empty">빈 문자열</option>
<option value="custom">직접 입력</option>
</select>
<label for="custom">직접 입력할 구분자</label>
<input id="custom" type="text" value=" | " disabled>
<pre id="output" aria-live="polite"></pre>
<script>
const samples = {
places: ['서울', '부산', '제주'],
missing: ['서울', null, '부산', undefined, '제주'],
};
const sample = document.querySelector('#sample');
const separator = document.querySelector('#separator');
const custom = document.querySelector('#custom');
const output = document.querySelector('#output');
function render() {
const items = samples[sample.value];
let result;
if (separator.value === 'default') result = items.join();
else if (separator.value === 'empty') result = items.join('');
else if (separator.value === 'custom') result = items.join(custom.value);
else result = items.join(' / ');
custom.disabled = separator.value !== 'custom';
output.textContent = `결과 문자열: ${JSON.stringify(result)}\n` +
`자료: ${JSON.stringify(items)}\n` +
`결과 자료형: ${typeof result}`;
}
sample.addEventListener('change', render);
separator.addEventListener('change', render);
custom.addEventListener('input', render);
render();
</script>
</body>
</html>처음 화면에서는 "서울,부산,제주"가 나옵니다. 구분자를 ‘공백 / 공백’으로 바꾸면 "서울 / 부산 / 제주"가 됩니다. 배열을 ‘null과 undefined 포함’으로 바꾸고 기본 쉼표를 선택하면 "서울,,부산,,제주"가 표시됩니다. 자료 표시는 JSON.stringify()를 써서 undefined가 null처럼 보일 수 있으므로, 실제 결합 결과를 확인할 때는 ‘결과 문자열’ 줄을 보세요.
구분자로 다시 분리할 때의 주의점
join()은 단순히 요소를 문자열로 변환해 이어 붙입니다. 요소 안에 구분자 자체가 들어 있으면 split()으로 다시 나눠 원래 배열을 정확히 되살릴 수 없습니다. null이나 중첩 배열도 원래 구조를 보존하지 않습니다. 데이터를 저장하거나 주고받는 용도라면 구조가 필요한지 먼저 판단하고, 구조가 필요하다면 JSON 같은 적절한 직렬화 형식을 사용하세요.
const names = ['Kim, Mina', 'Lee, Jun'];
const text = names.join(', ');
console.log(text); // 'Kim, Mina, Lee, Jun'
console.log(text.split(', ')); // ['Kim', 'Mina', 'Lee', 'Jun']또한 중첩 배열은 내부 배열의 요소도 문자열로 변환되므로 구분자의 범위를 혼동하기 쉽습니다. MDN의 Array.join() 문서에서 중첩 배열과 빈 슬롯 동작을 확인할 수 있습니다.
