자바스크립트 join() 함수 – 배열을 문자열로 변환

`Array.prototype.join()` 사용법

배열에서 join() 함수는
배열의 각 요소를 지정된 구분자로 연결(join)하여 하나의 문자열로 반환하는 함수입니다.

join() 함수는 배열을 문자열로 변환하는 간편하고 유용한 방법입니다.

JavaScript

/* 
 * 문자열 타입 요소들의 연결
 */

const fruits = ["사과", "바나나", "딸기"];

console.log(fruits.join());
// "사과,바나나,딸기"

console.log(fruits.join(""));
// "사과바나나딸기"

console.log(fruits.join(" "));
// "사과 바나나 딸기"

console.log(fruits.join(", "));
// "사과, 바나나, 딸기"

console.log(fruits.join("-"));
// "사과-바나나-딸기"

console.log(fruits.join("+"));
// "사과+바나나+딸기"


/* 
 * 숫자 타입 요소들의 연결
 */

const numbers = [1, 2, 3];

console.log(numbers.join());
// "1,2,3"

console.log(numbers.join(""));
// "123"

console.log(numbers.join("-"));
// "1-2-3"


/* 
 * Boolean 타입 요소들의 연결
 */

const bool = [true, false];

console.log(bool.join());
// "true,false"

console.log(bool.join(""));
// "truefalse"

console.log(bool.join("-"));
// "true-false"


/* 
 * 객체 타입 요소들의 연결
 */

const fruitsObject = ["사과", "바나나", {name: "딸기", color: "빨강"}];

console.log(fruitsObject.join());
// "사과,바나나,[object Object]"

console.log(fruitsObject.join(""));
// "사과바나나[object Object]"

console.log(fruitsObject.join("-"));
// "사과-바나나-[object Object]"


/* 
 * 배열 요소들의 연결
 */

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix.join());
// "1,2,3,4,5,6,7,8,9"

console.log(matrix.join(""));
// "1,2,34,5,67,8,9"

console.log(matrix.join("-"));
// "1,2,3-4,5,6-7,8,9"


/* 
 * 희소 배열
 */

const sparseArr = [1, , 3, undefined];

console.log(sparseArr.join());
// "1,,3,"

console.log(sparseArr.join(""));
// "13"

console.log(sparseArr.join("-"));
// "1--3-"

join() 함수의 형식은 다음과 같습니다.

구문

arr은 join() 함수를 적용할 배열입니다.

매개변수

배열 join() 함수의 매개변수
`separator`	옵션. 각 배열 요소를 연결할 구분자이며, 문자열로 지정합니다. 생략하면 쉼표(`,`)가 사용됩니다.

반환 값

배열의 모든 요소를 지정된 구분자로 연결한 문자열입니다.

매개변수에 따른 반환 값

매개변수에 따라 반환되는 값에 대한 예시입니다.

원본 배열이 빈 배열일 경우

원본 배열이 빈 배열일 경우 요소가 없으므로 문자열로 변환할 요소가 없고, 따라서 빈 문자열("")이 반환됩니다.

배열 요소가 `undefined`, `null`인 경우

배열 요소가 undefined, null인 경우 빈 문자열("")이 반환됩니다.

배열 요소가 하나인 경우

배열에 요소가 하나만 있는 경우에도 join() 함수는 해당 요소를 문자열로 반환합니다.
이 때 지정한 구분자는 연결할 요소가 없기 때문에 배열에 있는 하나의 요소만 문자열로 반환하게 됩니다.

활용 예제

join() 함수는 다양한 상황에서 유용하게 활용될 수 있습니다. 여기에는 몇 가지 예제를 다룹니다.

배열 요소를 뒤집어 문자열로 결합하기

코드 부연설명
배열의 reverse() 함수는 배열의 요소 순서를 역순(reverse)으로 정렬합니다.

배열 요소를 HTML 리스트 아이템으로 결합하기

JavaScript

const vegetables = ["당근", "브로콜리", "감자"];
const htmlList = "<ul><li>" + vegetables.join("</li><li>") + "</li></ul>";

console.log(htmlList);
// "<ul><li>당근</li><li>브로콜리</li><li>감자</li></ul>"

객체 데이터를 이용하기

아래의 예제는 join() 함수를 사용하여 객체 배열의 요소를 연결하는 방법을 보여줍니다. 각 요소의 객체 데이터를 활용하는 방법을 이해하는 데 도움이 될 것입니다.

JavaScript

// 객체가 담긴 배열
const people = [
    {name: "영희", age: 25},
    {name: "철수", age: 30},
    {name: "미숙", age: 28}
];

// 배열의 객체들의 이름과 나이를 연결하여 문자열로 만들기
const personStrings = people.map(function(person) {
    return "<li>" + person.name + "님은 " + person.age + "세입니다.</li>";
});

// 배열의 문자열을 <ul> 태그로 감싸고, 빈 문자열로 연결하여 전체 문자열 만들기
const resultString = "<ul>" + personStrings.join("") + "</ul>";

console.log(resultString);
// "<ul><li>영희님은 25세입니다.</li>, <li>철수님은 30세입니다.</li>, <li>미숙님은 28세입니다.</li></ul>"

코드 부연설명
map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환합니다.

동적인 URL 생성

JavaScript

const baseURL = "https://api.example.com";

const params = {
    category: "books",
    limit: 10,
    sort: "desc"
};

// 객체의 속성들을 query 문자열로 변환
const queryString = Object.keys(params)
    .map(key => key + "=" + encodeURIComponent(params[key]))
    .join("&");

const endpoint = `${baseURL}/search?${queryString}`;

console.log(endpoint);
// "https://api.example.com/search?category=books&limit=10&sort=desc"

코드 부연설명
encodeURIComponent() 함수는 URI Component를 인코딩합니다.