타입 강제 변환이란?
타입 강제 변환(Type Coercion)은 하나의 데이터 타입이 자동으로 또는 암묵적으로 다른 데이터 타입으로 변환되는 것을 의미합니다. 자바스크립트는 느슨한 타입(loosely typed) 언어이기 때문에, 개발자가 명시적으로 변환하지 않아도 연산 과정에서 엔진이 스스로 타입을 변환하는 경우가 많습니다.
대표적인 예로 문자열과 숫자를 더할 때 발생하는 현상을 들 수 있습니다. + 연산자의 피연산자 중 하나라도 문자열이면, 나머지 숫자도 자동으로 문자열로 변환되어 문자열 연결(concatenation)이 이루어집니다.
예제 코드
다음은 자바스크립트 타입 강제 변환을 보여주는 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript type coercion</h1>
<div class="sample">22</div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to add the above number with 5.</h3>
<script>
let sampleEle = document.querySelector('.sample');
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = ' "22" + 5 = ' + sampleEle.innerHTML+5;
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같은 결과를 확인할 수 있습니다.
결과 분석
버튼을 클릭하면 결과가 "225"로 표시됩니다. 숫자 22와 5를 더한 27이 아니라 225가 나오는 이유는 무엇일까요?
HTML 요소에서 가져온 값인 sampleEle.innerHTML은 항상 문자열입니다. 따라서 "22" + 5 연산이 실행되면, 자바스크립트 엔진은 숫자 5를 문자열 "5"로 강제 변환하고 두 값을 이어 붙여 "225"라는 문자열을 만들게 됩니다. 이것이 바로 타입 강제 변환의 전형적인 사례입니다.
타입 강제 변환 활용 팁
만약 의도한 대로 산술 덧셈(22 + 5 = 27)을 수행하고 싶다면, 문자열을 명시적으로 숫자로 변환해야 합니다.
Number(sampleEle.innerHTML) + 5— Number() 함수 사용+sampleEle.innerHTML + 5— 단항 더하기(+) 연산자 사용parseInt(sampleEle.innerHTML) + 5— 정수 변환 시 사용
타입 강제 변환은 편리하지만 예기치 않은 버그의 원인이 될 수 있으므로, 항상 피연산자의 타입을 주의 깊게 확인하는 습관이 중요합니다.