JavaScript - join() 함수 소개

JavaScript에서 배열을 다룰 때, 요소들을 하나의 문자열로 결합하여 표현해야 하는 경우가 자주 있습니다. 이때 가장 유용하게 사용되는 함수가 join() 함수입니다. join() 함수는 배열의 모든 요소를 특정 구분자를 기준으로 결합해 문자열을 반환합니다. 이 글에서는 join() 함수의 기본 사용법, 다양한 예제, 주의 사항, 그리고 실무에서의 활용 방법을 다루어 보겠습니다.

1. join() 함수 기본 문법

array.join(separator);

• array: 문자열로 결합할 배열
• separator (optional): 배열 요소 사이에 넣을 문자열 구분자. 기본값은 콤마 ,입니다.

2. 기본 사용 예시

join() 함수의 가장 간단한 형태는 구분자를 생략한 사용입니다. 이 경우 배열 요소들은 기본 구분자인 콤마로 결합됩니다.

const fruits = ["Apple", "Banana", "Orange"];
const result = fruits.join();
console.log(result); // "Apple,Banana,Orange"

3. 구분자 지정

구분자를 지정하여 배열의 요소들을 연결할 수도 있습니다. 예를 들어, 빈 문자열을 구분자로 사용하면 배열의 모든 요소가 공백 없이 연결됩니다.

const fruits = ["Apple", "Banana", "Orange"];
const result = fruits.join(" - ");
console.log(result); // "Apple - Banana - Orange"

또는 구분자를 공백으로 설정하여 요소 사이에 간격을 줄 수 있습니다.

const result = fruits.join(" ");
console.log(result); // "Apple Banana Orange"

4. 숫자 배열에서의 사용

join() 함수는 문자열 배열뿐만 아니라 숫자 배열에서도 사용할 수 있습니다.

const numbers = [1, 2, 3, 4];
const result = numbers.join(" + ");
console.log(result); // "1 + 2 + 3 + 4"

5. join()의 다양한 활용 예시

5.1. 배열을 한 줄로 출력하기

배열을 로그로 출력할 때 요소를 한 줄로 표현하고 싶은 경우 join() 함수를 활용할 수 있습니다.

const items = ["item1", "item2", "item3"];
console.log(items.join(", ")); // "item1, item2, item3"

5.2. URL Query String 생성

서버로 요청을 보낼 때 URL에 Query String을 추가해야 할 경우, 배열을 join() 함수를 사용하여 손쉽게 생성할 수 있습니다.

const params = ["user=John", "age=25", "city=Seoul"];
const queryString = params.join("&");
console.log(queryString); // "user=John&age=25&city=Seoul"

5.3. CSV 형식으로 출력하기

데이터를 CSV (Comma Separated Values) 형식으로 변환할 때 join()을 사용하여 쉽고 빠르게 변환할 수 있습니다.

const headers = ["Name", "Age", "Country"];
const data = ["Alice", 30, "USA"];
console.log(headers.join(",")); // "Name,Age,Country"
console.log(data.join(",")); // "Alice,30,USA"

5.4. HTML 리스트 만들기

웹 개발에서 배열의 데이터를 <ul> 또는 <ol> 태그를 이용하여 리스트 형태로 출력할 때 join() 함수를 활용하여 간결하게 작성할 수 있습니다.

const items = ["Home", "About", "Contact"];
const html = `<ul><li>${items.join("</li><li>")}</li></ul>`;
console.log(html);
// <ul><li>Home</li><li>About</li><li>Contact</li></ul>

6. join() 함수의 주의 사항

6.1. 배열의 빈 요소 처리

join() 함수는 배열 내의 빈 요소도 무시하지 않고 결합합니다. 배열 내에서 빈 요소가 존재할 때는 결과 문자열에 구분자만 남게 됩니다.

const arr = ["a", , "b"];
console.log(arr.join("-")); // "a--b"

이와 같은 빈 요소는 배열의 크기만큼 구분자를 생성하기 때문에 주의가 필요합니다.

6.2. 배열이 비어 있을 때

빈 배열에 대해 join()을 호출하면, 빈 문자열을 반환합니다.

const emptyArray = [];
console.log(emptyArray.join(",")); // ""

6.3. 구분자가 빈 문자열일 때

구분자를 빈 문자열로 지정하면 배열 요소들이 공백 없이 그대로 연결됩니다.

const chars = ["H", "e", "l", "l", "o"];
console.log(chars.join("")); // "Hello"

7. 실무에서의 활용 예시

7.1. 다국어 지원 문자열 처리

다국어 지원이 필요한 애플리케이션에서 여러 문장을 배열로 관리하고, 특정 언어로 출력할 때 join()을 활용하여 각 문장을 결합할 수 있습니다.

const greetings = ["Hello", "Bonjour", "Hola"];
const message = greetings.join(" | ");
console.log(message); // "Hello | Bonjour | Hola"

8. 결론

JavaScript의 join() 함수는 배열을 쉽게 문자열로 변환할 수 있는 강력한 도구입니다. 구분자를 자유롭게 설정할 수 있기 때문에, 다양한 상황에서 배열을 하나의 문자열로 결합하는 데 유용하게 활용할 수 있습니다. 특히, 데이터를 화면에 출력하거나 서버로 전송할 때, 혹은 로그를 남길 때 실무에서 자주 사용됩니다.

join() 함수는 배열의 요소들을 결합하는 단순한 함수이지만, 그 쓰임새는 매우 다양합니다. 이 글에서 소개한 다양한 예시와 팁을 통해 join() 함수의 사용법을 더 깊이 이해하고 실무에 적용할 수 있기를 바랍니다.