1 -5 . Introduction to JavaScript - String Concatenation

1-4 . Introduction to JavaScript - Arithmetic Operators (feat. -0)

이번에는 문자열을 합치는 방법에 대하여 알아봅니다.

 

여러 가지 방법이 있지만, 여기서는 가장 많이 사용하는 + Operator를 사용하는 방법을 정리합니다.

이제는 + 연산자로 문자열을 합치는 것이 거의 모든 언어에서 사용되는 일반적인 방법이지만, 제가 학창 시절에 C를 배울 때만 해도, 이런 것들은 보지 못했던 것 같아요.

 

+는 숫자를 더할 때나 쓰는 건데,

+ 연산자로 문자열을 합친다는 것을 처음 보았을 때 얼마나 신기하던지...

그래서, 연산자에 이어 String Cocatenation을 정리해 봅니다.

 

사용하는 방법은 간단합니다.

그냥 String과 String 사이에 +를 사용하기만 하면 그대로 두 문자열이 합쳐집니다.

빈칸의 유무까지도 포함해서 말이죠.

 

그래서, 유의사항을 알아보면

const str1 = 'Hello' + 'World';
const str2 = 'Hello' + ' ' + 'World';
const str3 = 'Hello ' + 'World';
const str4 = 'Hello' + ' World';

console.log(str1);	// HelloWorld
console.log(str2);	// Hello World
console.log(str3);	// Hello World
console.log(str4);	// Hello World

str1에서 'Hello World'를 나타내기 위하여, 'Hello'와 'World'를 더하였는데,

생각과는 달리 'HelloWorld'가 나타납니다.

바로 빈칸의 유무까지도 그대로 합쳐지기 때문이기 때문이죠.

 

따라서, 우리가 원하는 'Hello World'를 나타내고 싶으면,

str2처럼 중간에 빈칸 ' '을 또 더해주어야 한답니다.

 

이것이 정확하기는 하지만, +를 한 번 더 써야 되는 귀찮음이 있으니,

str3이나 str4처럼 아예 처음부터 빈칸을 더해주기도 합니다.

 

또한 +=도 그대로 사용이 가능해요.

let str5 = 'Hello';
str5 += ' ';
str5 += 'World';
console.log(str5); // Hello World

이런 식으로 말이죠.

 

그럼, 여기서 궁금한 점.

 

숫자들을 더하는 + 연산자를 사용하여,

문자열을 더할 수 있다는 것을 알게 되었는데요.

그렇다면 문자열과 숫자를 더하면 어떻게 될까요?

const str = 'Year';
const number = 2021;

let strPlusNumber = str + number;
let numberPlusStr = number + str;

console.log(strPlusNumber);	// Year2021
console.log(numberPlusStr);	// 2021Year

문자열이 들어가면, 숫자도 문자열로 간주하여 문자열의 합과 같은 결과가 나옵니다.

 

그럼, 조금 더 응용하여,

3 + 4 + "5"는 어떻게 될까요?

console.log(3 + 4 + "5");	// 75

결과는 75입니다.

3 + 4는 숫자이니까 7이 되고,

7 + "5"는 숫자와 문자열의 합이니, 75가 됩니다.

 

이번에는 최종 마무리.

3 + 4 + "5" + 6 + 7

은 어떤 값이 될까요?

console.log(3 + 4 + "5" + 6 + 7);	// 7567

3 + 4 = 7은 동일하지만,

문자열 "5" 뒤에 나오는

6 + 7 = 13이 아니라,

문자열이 나온 이후에는 모두 문자열의 합으로 간주하여,

앞의 결괏값인 75에 6과 7을 그대로 이어 붙여 7567이 됩니다.

 

이외에도 문자열을 합치는 방법은 더 있지만,

꼬리에 꼬리를 무는 궁금증을 해결하다 보니 너무 길어졌네요.

언젠가 기회가 되면, 나머지 방법에 대하여도 정리해 보겠습니다.