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

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-"
arr.join(separator)
const emptyArr = [];

console.log(emptyArr.join(",")); // "" => 빈 문자열 반환
const arr = [undefined, 1, null];

console.log(arr.join(",")); // ",1,"
const arr = ["김밥"];

console.log(arr.join(", ")); // "김밥"
const numbers = [1, 2, 3, 4, 5];
const reversedString = numbers.reverse().join("");

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

console.log(htmlList);
// "<ul><li>당근</li><li>브로콜리</li><li>감자</li></ul>"
// 객체가 담긴 배열
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>"
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"

caniuse.com에서 더 자세한 정보를 확인해 보세요.