JavaScript에서 문자열과 숫자를 '+' 연산자로 더하면 산술 덧셈이 아니라 문자열 연결(concatenation)이 일어납니다. 두 값이 단순히 이어 붙여지는 것이죠. 실제로 두 값을 더하고 싶다면 문자열을 먼저 숫자로 변환해야 하는데, 이때 단항 '+' 연산자가 유용하게 사용됩니다. 이 연산자는 문자열을 숫자로 변환해 주기 때문에 의도한 대로 정상적인 덧셈이 가능해집니다.
예제 1: 변환 없이 더할 경우
아래 예제에서는 문자열을 별도의 변환 과정 없이 숫자에 바로 더했습니다. 따라서 출력 결과에서 확인할 수 있듯이 덧셈이 아닌 연결이 발생합니다.
<html>
<body>
<script>
const string = "100";
const number = 5;
document.write(string + number);
</script>
</body>
</html>출력 결과
1005
예제 2: 단항 '+' 연산자 사용하기
아래 예제에서는 단항 '+' 연산자를 사용해 문자열을 숫자로 변환했습니다. 그 결과 연결 대신 덧셈이 수행되며, 올바른 계산 결과가 출력됩니다.
<html>
<body>
<script>
const string = "100";
const number = 5;
document.write(+string + number);
</script>
</body>
</html>출력 결과
105
예제 3: parseInt() 함수 사용하기
아래 예제에서는 parseInt() 함수를 사용해 문자열을 정수로 변환했습니다. 단항 '+' 연산자와 동일한 방식으로 동작하며 같은 결과를 얻을 수 있습니다.
<html>
<body>
<script>
const string = "100";
const number = 5;
document.write(parseInt(string) + number);
</script>
</body>
</html>출력 결과
105
참고: Number() 함수도 활용 가능
위 두 가지 방법 외에도 Number() 함수를 사용하면 문자열을 숫자로 변환할 수 있습니다. 예를 들어 Number(string) + number를 실행하면 마찬가지로 105가 출력됩니다. 다만 소수점이 포함된 문자열이라면 parseFloat()을 사용하는 것이 적합합니다. 상황에 맞는 변환 방식을 선택하면 문자열과 숫자 간의 연산 오류를 손쉽게 피할 수 있습니다.