왕진 블로그
JavaScript 문자열 연산 —
+ 연산자의 두 얼굴
같은 + 연산자인데 어떤 줄은 숫자를 더하고, 어떤 줄은 글자를 이어 붙인다. 심지어 같은 세 값 23, 35, "abc"를 쓰고도 순서만 바꾸면 결과가 완전히 달라진다. 이 코드는 그 함정을 한눈에 보여준다.
초보자가 가장 많이 헷갈리는 지점이 바로 여기다. "숫자처럼 보이는 값"과 "진짜 숫자"를 헷갈리면, 화면에 계산기가 아니라 글자만 이어붙은 결과가 나온다. 아래에서 한 줄씩 왜 이런 결과가 나오는지 순서대로 뜯어본다.
문자열 연산
abc23
23abc
2335
58
58abc
abc2335
true
false
JavaScript의 +는 사실 연산자 하나에 두 가지 임무가 있다. 좌우 값이 둘 다 숫자면 산술 덧셈을 하고, 하나라도 문자열이면 두 값을 이어 붙이는 문자열 연결을 한다. 어느 쪽으로 동작할지는 JS 엔진이 실행 순간에 좌우 값의 타입을 보고 그때그때 결정한다.
"abc" + 23에서 왼쪽이 문자열이므로 JS는 + 를 연결 연산으로 결정한다. 그 순간 오른쪽의 숫자 23은 계산에 쓰이지 못하고 문자열 "23"으로 강제 변환된 뒤 뒤에 붙는다. 그래서 결과는 58이 아니라 "abc23"이다.
이번엔 숫자가 먼저 온다. 그래도 오른쪽에 문자열 "abc"가 있으므로 규칙은 똑같이 적용된다 — 하나라도 문자열이면 연결. 왼쪽 숫자 23이 "23"으로 바뀌어 "abc" 앞에 붙는다. 즉 좌우 어느 쪽에 문자열이 있든 결과는 "연결"이라는 점은 변하지 않는다.
"35"는 숫자처럼 보이지만 따옴표로 감싼 순간 문자열이다. JS는 값의 겉모습이 아니라 실제 타입만 본다. 오른쪽이 문자열이므로 23도 "23"으로 바뀌어 연결되고, 결과는 58이 아니라 두 글자를 이어붙인 "2335"가 된다.
이번엔 양쪽 모두 순수한 숫자 리터럴이다. 문자열이 단 하나도 끼어있지 않으므로 JS는 +를 산술 덧셈으로 처리한다. 23 + 35 = 58. 여기까지는 다들 익숙한 계산기 그대로다.
여기가 이번 코드의 핵심 함정이다. +가 세 개 이상 이어지면 JS는 한꺼번에 계산하지 않고 왼쪽에서 오른쪽 순서로 두 개씩 계산한다. 먼저 23 + 35부터 계산되는데, 이 시점엔 둘 다 숫자이므로 먼저 58이라는 숫자로 확정된다. 그 다음에야 58 + "abc"가 계산되고, 여기서 처음으로 문자열이 등장하니 그제서야 연결이 일어나 "58abc"가 된다.
- + 는 한 번에 하나씩, 왼쪽 두 값부터 순서대로 계산된다
- 어느 단계에서 문자열이 처음 나타나느냐에 따라 그 뒤부터 전부 연결로 바뀐다
- 숫자끼리 먼저 만나면 그 부분은 미리 계산되어 숫자로 "굳어진다"
이번엔 문자열이 맨 앞에 있다. 1단계에서 "abc" + 23을 계산하는데, 왼쪽이 이미 문자열이므로 이 시점부터 결과가 문자열로 확정된다 — "abc23". 그러면 2단계는 "abc23" + 35가 되고, 왼쪽이 문자열이니 오른쪽 35도 "35"로 변환되어 그냥 뒤에 붙는다. 결과는 "abc2335". 앞서 6번 섹션과 피연산자는 똑같은데(23, 35, "abc") 순서만 달라서 정반대의 결과가 나온 것이다.
let name = "kitae" 상태에서 name == "kitae"는 두 문자열의 글자가 완전히 동일하므로 true다. 반면 name > "park"는 숫자 비교가 아니라 사전순(문자 코드 순서) 비교다. 알파벳 순서로 "kitae"의 첫 글자 k는 "park"의 첫 글자 p보다 앞에 오므로(코드값이 더 작으므로) "kitae" > "park"는 false다.
브라우저는 <script> 안의 코드를 한 줄씩 순서대로 실행하고, 한 줄 안에서 +가 여러 번 나오면 왼쪽부터 두 값씩 계산한다. 이번 코드 전체가 실행되는 흐름을 단계별로 정리하면 다음과 같다.
document.write가 실행될 때마다 결과가 페이지에 그대로 이어 붙는다. 그래서 실제 브라우저 화면에는 여섯 줄의 결과가 위에서부터 순서대로 쌓여 보인다.| 실수 | 증상 | 해결 |
|---|---|---|
"23" + 35가 58일 거라 착각 |
실제론 "2335"로 이어 붙여짐 |
더하기 전에 Number("23")로 형변환 |
| 폼 입력값(문자열) + 숫자를 그냥 더함 | 사용자가 입력한 숫자가 문자로 이어붙음 (예: 5+3 = "53") | Number()·parseInt()로 먼저 변환 후 연산 |
23+35+"abc"를 "2335abc"로 예상 |
실제론 "58abc" — 순서를 잘못 이해 |
+ 는 왼쪽부터 두 개씩 계산된다는 규칙 암기 |
문자열 "10" > "9"를 true로 예상 |
사전순 비교라 실제론 false ('1' < '9') | 숫자로 비교하려면 양쪽 다 Number() 변환 |
==가 타입까지 검사한다고 착각 |
1 == "1"처럼 타입 다른데 true가 나옴 |
타입까지 엄격히 비교하려면 === 사용 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript switch — 커피 주문 완전 정리 (0) | 2026.07.03 |
|---|---|
| JavaScript 반복문 — for · while · do-while 완전 정리 (0) | 2026.07.03 |
| JavaScript 대입·조건 연산자 완전 정리 (0) | 2026.07.03 |
| JavaScript 비교·논리 연산자 완전 정리 (0) | 2026.07.03 |
| JavaScript if-else — 학점 매기기 완전 정리 (0) | 2026.07.03 |
댓글