JavaScript에서 concat() 메서드는 두 개 이상의 문자열을 하나로 합칠 때 사용하는 대표적인 문자열 메서드입니다.
concat() 메서드 기본 사용법
예를 들어 이름과 성을 각각 저장하는 두 개의 변수가 있고, 이를 하나의 문자열로 합치고 싶다고 가정해 보겠습니다. concat() 메서드를 활용하면 다음과 같이 간단하게 처리할 수 있습니다.
const firstName = "David"
const lastName = "Tromholt"
var fullName = firstName.concat(lastName)
console.log(fullName)
// "DavidTromholt"정말 간단하죠? concat() 메서드는 호출한 문자열 뒤에 인수로 전달된 문자열들을 순서대로 이어 붙여 새로운 문자열을 반환합니다.
문자열 사이에 공백 추가하기
그런데 위 예제의 결과를 보면 "DavidTromholt"처럼 이름과 성이 붙어 있어 자연스럽지 않습니다. 두 문자열 사이에 공백을 넣고 싶다면 어떻게 해야 할까요? 몇 가지 방법이 있습니다.
방법 1: 변수 값에 직접 공백 포함하기
가장 간단한 방법은 문자열 값 자체에 공백을 추가하는 것입니다. 예를 들어 "David "처럼 말이죠.
const firstName = "David " // 공백 추가
const lastName = "Tromholt"
var fullName = firstName.concat(lastName)
console.log(fullName)
// "David Tromholt"방법 2: concat() 메서드 안에 공백 전달하기
또는 공백 문자열을 concat() 메서드의 인수로 직접 전달할 수도 있습니다. 이 방식은 원본 데이터를 수정하지 않으면서 원하는 형태로 문자열을 조합할 수 있어 더 깔끔합니다.
const firstName = "David"
const lastName = "Tromholt"
const fullName = firstName.concat(" ", lastName) // 변수 사이에 공백 추가
console.log(fullName)
// David Tromholt정리
concat() 메서드는 여러 개의 인수를 받을 수 있기 때문에 세 개 이상의 문자열도 한 번에 연결할 수 있습니다. 다만 실무에서는 가독성과 성능 면에서 + 연산자나 템플릿 리터럴(백틱)을 더 많이 사용하는 편이니, 상황에 맞게 선택하시면 됩니다.