[JavaScript] 자바스크립트 join 함수

 

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

 

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

 

구문

arr.join(separator)

 

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

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

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

 

 

● 문자열 타입 요소들의 연결

const  content = ["Apple", "Banana", "Orange"]

console.log(content.join());
//  Apple,Banana,Orange
console.log(content.join(""));
// AppleBananaOrange
console.log(content.join(" "));
// Apple Banana Orange
console.log(content.join(", "));
// Apple,Banana,Orange
console.log(content.join("-"));
// Apple-Banana-Orange
console.log(content.join("+"));
// Apple+Banana+Orange

 

 

● 배열 요소들의 연결

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

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

 

● 희소 배열

const  Arr = [a, , b, undefined];

console.log(Arr.join());
// "a,,b,"
console.log(Arr.join(""));
// "ab"
console.log(Arr.join("-"));
// "a--b-"

 

활용 예제

 

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

const content = ["Apple", "Banana", "Orange"]

const htmlList = "<ul><li>" + content.join("</li><li>") + "</li></ul>";

console.log(htmlList);
// <ul><li>Apple</li><li>Banana</li><li>Orange</li></ul>

 

2) 객체 데이터 이용하기

const basket = [
     {name: "Apple",  count: 15 },
     {name: "Banana", count: 10 },
     {name: "Orange", count: 20},
] ;

const basketStrings = basket.map(function(basket) {
    return "<li>" + basket.name + "은 " + basket.count + "개 있습니다.</li>";
});

const resultString = "<ul>" + basketStrings.join("") + "</ul>";

console.log(resultString);
// <ul><li>Apple은 15개 있습니다.</li>, <li>Banana은 10개 있습니다.</li>, <li>Orange은 20개 있습니다.</li></ul>

 

 

성능 

join() 함수는 비교적 빠르고 효율적인 방법으로 배열을 문자열로 변환합니다.
그러나, 매우 큰 배열을 다룰 때는 성능에 영향을 줄 수 있으므로 주의해야 합니다.
특히  중첩된 map() 또는 다른 배열 메서드와 함께 사용할 경우, 코드의 복잡성과 성능에 주의해야 합니다.