JavaScript에서 숫자끼리 더하면 일반적인 산술 덧셈이 수행됩니다. 하지만 숫자와 문자열을 함께 더하려고 하면 산술 연산이 불가능하기 때문에, 자바스크립트는 두 값을 이어 붙이는 '연결(concatenation)' 동작으로 처리합니다.
즉, + 연산자는 피연산자 중 하나라도 문자열이 있으면 나머지 숫자를 자동으로 문자열로 변환한 뒤 문자열을 합칩니다. 이러한 암묵적 형 변환(type coercion)은 초보 개발자가 자주 겪는 실수의 원인이 되므로 정확히 이해하는 것이 중요합니다.
예제로 확인하기
아래 예제에서는 네 개의 변수 a, b, c, d를 사용해 각각 다른 조합의 + 연산 결과를 살펴봅니다.
- 변수 a: 숫자 5와 5를 더했기 때문에 숫자 10이 반환됩니다.
- 변수 b: 문자열 '5'와 숫자 5를 더했기 때문에 결과가 문자열 '55'가 됩니다.
- 변수 c: 계산 과정에 문자열이 포함되어 있어 결과 역시 문자열입니다.
- 변수 d: 문자열 'Hello'와 숫자 5를 더해 문자열 'Hello5'가 됩니다.
코드
<html>
<body>
<script type="text/javascript">
var a = 5 + 5;
var b = "5" + 5;
var c = 5 + 5 + "5" + 5
var d = "Hello" + 5;
document.write(a + "<br>" + b + "<br>" + c + "/br>" + d);
document.write("/br>");
document.write(typeof(a));
document.write("/br>");
document.write(typeof(b));
document.write("/br>");
document.write(typeof(c));
document.write("/br>");
document.write(typeof(d));
</script>
</body>
</html>
실행 결과
10 55 1055 Hello5 number string string string
결과 분석
typeof()를 사용해 각 변수의 자료형을 확인하면, 오직 변수 a만 number 타입이고 나머지 b, c, d는 모두 string 타입인 것을 알 수 있습니다.
특히 변수 c의 경우 5 + 5 + "5" + 5처럼 왼쪽에서 오른쪽으로 평가되기 때문에, 먼저 5 + 5 = 10(숫자)이 계산된 뒤 문자열 "5"를 만나면서 이후의 모든 값이 문자열로 연결되어 최종적으로 '1055'가 됩니다. 만약 "5" + 5 + 5처럼 문자열이 먼저 등장하면 처음부터 끝까지 모두 연결되어 '555'가 된다는 점도 기억해 두면 좋습니다.
정리
- 숫자 + 숫자 → 산술 덧셈(number)
- 문자열이 하나라도 포함되면 → 문자열 연결(string)
- 의도치 않은 연결을 방지하려면
Number(),parseInt()등으로 명시적으로 형 변환하는 것이 안전합니다.