개발 공부/자바스크립트(JavaScript)

[js] value 속성 값은 숫자로 저장해도 String 형이다!

가이윤 2022. 6. 16. 14:59
~
<body>
	<div id='test'></div>
</body>
<script>
let num = [1,2,3];
$("#test").append("<button type='button' id='btn' value=" + num[0] + ">" 
+ num[0] + "</button>");

let val = $("#test").children('button:eq(0)').val();
let same = num.includes(val);
if(same)
	console.log("같다");
else
	console.log("다르다");
</script>

위의 코드들은 제이쿼리(JQuery)를 사용했다. 위의 콘솔 결과는 "다르다" 로 나온다.

왜냐하면 .val() 메소드는 어느 특정 태그에 설정되어 있는 value 값을 추출하는 것인데, 이게 숫자로 저장해도 문자열 형식으로 저장된다. 예를 들어 value=값  -> 이런 형식으로 저장해도 자동으로 값의 앞뒤로 따옴표를 넣어서 인식한다. 그래서 value에 숫자로 저장했다고 보여도 실제로는 String인 문자열로 저장된 것이다. 이것 때문에 숫자로 저장된 배열과 value 속성에 저장된 값을 includes 메소드로 비교하는데, 숫자가 같은데도 false가 나와서 이해가 가지 않아서 시간을 많이 허비했다. 먼가 비교하는게 같은데도 같다고 결과가 나오지 않는다면 형과 관련된 문제인게 대부분인거 같다..

위의 문제를 해결하려면 변수 val에 저장된 값에다가 parseInt() 메소드를 사용하면 된다.

parseInt(val); 이런식으로