자바스크립트(JavaScript)로 두 개 이상의 문자열을 하나로 합치는 방법을 알아보세요.
자바스크립트에는 두 개 이상의 문자열을 결합하는 다양한 방법이 있습니다. 대표적으로 더하기 연산자 +, 더하기 할당 연산자 +=, 그리고 concat() 메서드가 있습니다.
참고: +는 산술(arithmetic) 연산자이고, +=는 할당(assignment) 연산자입니다.
지금부터 이 세 가지 방법을 모두 직접 확인해 보겠습니다!
더하기 연산자 (+)
firstName과 lastName이라는 두 변수가 있고, 이 값들을 합쳐서 fullName이라는 새 변수에 저장하고 싶다고 가정해 봅시다. 다음과 같이 작성하면 됩니다.
const firstName = "Steve"
const lastName = "Jobs"
const fullName = firstName + lastName
console.log(fullName) // SteveJobs구분자(공백) 추가하기
fullName 값을 더 읽기 좋게 만들려면 Steve와 Jobs 사이에 공백을 넣어야 합니다. 앞선 코드를 그대로 활용하되, 이번에는 + '' + 사이에 구분자를 추가해 보겠습니다.
const firstName = "Steve"
const lastName = "Jobs"
const fullName = firstName + " " + lastName
console.log(fullName) // Steve Jobs참고: "Steve "처럼 문자열 뒤에 공백을 붙이거나 " Jobs"처럼 앞에 공백을 넣는 방법도 있지만, 프로젝트의 다른 부분에서 firstName이나 lastName 변수를 재사용할 경우 원치 않는 포맷 문제가 발생할 수 있습니다. 따라서 이 방식은 권장하지 않습니다.
더하기 할당 연산자 (+=)
어떤 이유로든 새 변수(fullName)를 만들고 싶지 않다면, += 연산자를 사용해 lastName을 기존의 firstName 변수에 바로 할당할 수 있습니다.
console.log((firstName += lastName))
// SteveJobs하지만 보시다시피 여기서도 구분자가 필요합니다. += 연산자로 여러 값을 한 번에 추가하려면 다음과 같이 작성하면 될 것이라고 생각하기 쉽습니다.
firstName += " " += lastName그러나 이 코드는 에러를 발생시킵니다.
Uncaught SyntaxError: Invalid left-hand side in assignment대신 각 값을 서로 다른 줄에서 나누어 결합해야 합니다. 먼저 공백 구분자를 firstName에 할당한 후, 그다음 lastName을 firstName에 할당하면 됩니다.
let firstName = "Steve"
let lastName = "Jobs"
// 먼저 구분자(공백)를 할당
firstName += " "
// 그다음 성(last name)을 할당
firstName += lastName
// 결과: Steve Jobsconcat() 메서드
자바스크립트의 concat() 메서드를 사용해서도 문자열을 결합할 수 있습니다.
let firstName = "Steve"
let lastName = "Jobs"
const fullName = firstName.concat(lastName)
console.log(fullName)
// SteveJobs역시 여기서도 구분자가 필요합니다. 다행히 concat()에서는 아주 간단합니다. 공백 문자열을 쉼표와 함께 인수로 전달하고, 그 뒤에 lastName 변수를 넣으면 됩니다.
const fullName = firstName.concat(" ", lastName)
console.log(fullName)
// Steve Jobs보너스: 템플릿 리터럴(Template Literals)
ES6(ES2015)부터는 백틱(`` ` ``)과 ${} 문법을 사용하는 템플릿 리터럴로도 문자열을 깔끔하게 결합할 수 있습니다. 변수와 문자열을 섞어 쓸 때 가독성이 특히 뛰어나 최근에는 가장 널리 사용되는 방식 중 하나입니다.
const firstName = "Steve"
const lastName = "Jobs"
const fullName = `${firstName} ${lastName}`
console.log(fullName)
// Steve Jobs문자열 결합에는 어떤 방법을 사용해야 할까?
성능 측면에서 Mozilla(MDN)를 비롯한 신뢰할 수 있는 자바스크립트 자료들은 가능한 한 + 또는 +=를 사용할 것을 강력히 권장합니다.
아래 JSPerf 테스트 사례에서 확인할 수 있듯이, concat()과 같은 문자열 객체(String object)는 브라우저에서 실행되는 자바스크립트 인터프리터 입장에서 +, +=와 같은 문자열 원시값(string primitive)보다 훨씬 느립니다.
