자바스크립트에는 배열의 내용을 문자열 형태로 반환할 수 있는 메서드가 두 가지 있습니다. 바로 toString()과 join()입니다.
이 두 메서드는 겉보기에 거의 똑같아 보이지만, 실제로는 중요한 차이가 있습니다. 이 글에서는 두 메서드의 동작 방식을 직접 테스트하면서 그 차이점을 자세히 알아보겠습니다.
테스트용 배열 준비하기
먼저 숫자 목록으로 이루어진 배열 객체 하나를 만들어 보겠습니다.
const numbersArray = [2, 4, 6, 8, 10]toString() 메서드로 배열 변환하기
배열을 문자열로 변환하기 위해 numbersArray에 toString() 메서드를 붙여 호출해 보겠습니다.
const numbersArray = [2, 4, 6, 8, 10]
numbersArray.toString()이제 결과를 출력해 보면 다음과 같습니다.
console.log(numbersArray.toString())
// 문자열 결과: "2,4,6,8,10"결과에서 확인할 수 있듯이, toString()은 숫자 배열을 아래와 같은 단일 문자열 값으로 성공적으로 변환했습니다.
"2,4,6,8,10"그런데 잠깐! 콤마 뒤에 있던 공백이 모두 사라진 것을 눈치채셨나요? 만약 단어 사이에 공백이 필요한 상황(예: 줄바꿈이나 워드랩 처리)이라면 어떻게 해야 할까요?
join() 메서드로 구분자 지정하기
다행히 자바스크립트의 join() 메서드를 사용하면 이 문제를 해결할 수 있습니다. 인자로 구분자(separator)를 전달하기만 하면 됩니다.
const numbersArray = [2, 4, 6, 8, 10]
numbersArray.join(", ")결과를 출력해 보겠습니다.
console.log(numbersArray.join(", "))
// "2, 4, 6, 8, 10"훨씬 깔끔하게 출력되죠? 이렇게 하면 필요할 때 단어 단위 또는 줄 단위로 줄바꿈(wrapping) 처리도 자유롭게 할 수 있습니다.
join()과 toString()의 차이점 정리
- 구분자 사용 가능 여부: 배열에 적용할 때
join()은toString()과 거의 같은 방식으로 동작하지만, 원하는 구분자를 직접 지정할 수 있다는 점이 다릅니다. - 적용 대상:
join()은 배열 전용 메서드이기 때문에 배열 객체에서만 사용할 수 있습니다. - 범용성: 반면
toString()은 배열뿐만 아니라 모든 타입의 객체에서 동작하는 범용 메서드입니다.