Array.prototype.join()

separator Optional

배열의 인접한 요소의 각 쌍을 구분하는 문자열입니다. 생략되면 배열 요소는 쉼표(",")로 구분됩니다.

배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 arr.length 가 0이라면, 빈 문자열을 반환합니다.

문자열로 변환된 모든 배열 요소가 하나의 문자열로 결합됩니다. 요소가 undefined, null인 경우, "null" 또는 "undefine" 문자열 대신 빈 문자열로 변환됩니다.

Array.prototype.toString()는 join 메서드를 내부적으로 인수 없이 호출합니다. 배열 인스턴스의 join을 재정의하면 해당 toString 동작도 재정의됩니다.

Array.prototype.join은 다른 배열을 포함하여 재귀적으로 각 요소를 문자열로 변환합니다. Array.prototype.toString(join() 호출과 같음)에서 반환된 문자열에는 구분 기호가 없기 때문에 중첩된 배열은 평탄화된 것처럼 보입니다. 첫 번째 수준의 구분 기호만 제어할 수 있으며, 더 깊은 수준에서는 항상 기본 쉼표를 사용합니다.

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,3;4,5,6;7,8,9

배열이 순환 배열(자체 요소를 포함)인 경우, 브라우저는 순환 참조를 무시하여 무한 재귀를 방지합니다.

const arr = [];
arr.push(1, [3, arr, 4], 2);
console.log(arr.join(";")); // 1;3,,4;2

희소 배열에 사용되는 경우, join() 메서드는 빈 슬롯의 값이 undefined인 것처럼 반복합니다.

join() 메서드는 범용 메서드입니다. this 값에는 length 속성과 정수 키 속성만 있을 것으로 예상됩니다.

다음 예제에서는 세 개의 요소가 있는 배열 a를 만든 다음, 기본 구분 기호, 쉼표와 공백, 그리고 더하기와 빈 문자열을 사용하여 배열을 네 번 연결합니다.

const a = ["바람", "물", "불"];
a.join(); // '바람,물,불'
a.join(", "); // '바람, 물, 불'
a.join(" + "); // '바람 + 물 + 불'
a.join(""); // '바람물불'

join()은 빈 슬롯을 undefined와 같이 처리하고 추가 구분 기호를 생성합니다.

console.log([1, , 3].join()); // '1,,3'
console.log([1, undefined, 3].join()); // '1,,3'

join 메서드는 this의 length 속성을 읽은 다음 키가 length보다 작은 음이 아닌 정수인 각 속성에 접근합니다.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // length가 3 이므로 join()에서 무시됨.
};
console.log(Array.prototype.join.call(arrayLike));
// 2,3,4
console.log(Array.prototype.join.call(arrayLike, "."));
// 2.3.4

• core-js의 Array.prototype.join 폴리필
• 인덱스 기반 컬렉션 안내서
• Array
• Array.prototype.toString()
• TypedArray.prototype.join()
• String.prototype.split()