자바스크립트 숫자 문자 관계 + 연산자는 더하기가 아니다.

자바스크립트에서 숫자와 문자의 관계는 + 에서 암시적 변환이 일어난다. 숫자 + 숫자는 숫자로써 더하기 연산을 하게 되지만 문자가 들어간 경우 문자열로 결합되는 것을 볼 수 있다. 자바스크립트의 암시적 변환에 의한 것으로 프로그램 개발시 주의할 필요가 있다.

자바스크립트 숫자 문자 관계
+ 연산자는 더하기가 아니다.

자바스크립트의 특징 중 하나는 + 연산자이다.

이 연산자 때문에 숫자와 문자의 관계가 애매해 진다.

당연하겠지만 + 연산자의 결과는 다음과 같다.

숫자 + 문자 = 문자
문자 + 숫자 = 문자

이것만 알면 자바스크립트의 숫자와 문자의 관계는 이미 알고 있다고 볼 수 있다.

+ 연산결과

자바스크립트에서 + 연산자는 2가지 기능으로 사용된다.

숫자를 더한다.

문자열을 연결한다.

숫자와 문자열을 연결한다.

이것을 이해하는 것은 + 연산자를 알고 있다는 의미이다.

이것들에 대한 여러가지 상황을 만들어 본다.

간혹 이 암시적 변환 때문에 의도치 않은 결과를 볼 수도 있다.

가끔 발생하는 문제이니 크게 생각할 필요는 없다.

하지만 알아두어야 할 것이 있다.

자바스크립트 숫자와 문자가 + 연산자로 연결될 때 가장 첫번째에 나오는 것이 데이터타입으로 지정된다.

상황들

자바스크립트에서 + 연산자로 숫자와 문자를 연결하려고 하면 숫자는 문자로 변환되어 연결된다.

이 상황 때문에 여러가지 수를 더하고 문자열로 연결하려고 한다면 원하지 않는 결과를 볼 수 있다.

그렇기에 + 연산자를 이용하여 숫자와 문자열을 연결하려고 한다면 숫자는 미리 계산하는 것이 좋다.

여러가지 상황에 대해 나열해 본다.

숫자 + 숫자 = 숫자 ( 계산 )
문자 + 문자 = 문자 ( 연결 )
숫자 + 문자 = 문자 ( 연결 )
문자 + 숫자 = 문자 ( 연결 )
숫자 + 숫자 + 문자 = 문자 ( 연결 )
문자 + 숫자 + 숫자 = 문자 ( 연결 )

샘플코드

위의 상황들에 대해서 코드를 만들어 본다.

코드를 보고 결과화면만 보고 아하~ 그렇구나~ 하고 넘어가면 그만이다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 숫자형</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
            <p id="ret3"></p>
            <p id="ret4"></p>
            <p id="ret5"></p>
            <p id="ret6"></p>
            <p id="ret7"></p>
        </div>

        <script>
            
            console.log("----------");
            
            let vNum1;
            let vNum2;

            vNum1 = 50;
            vNum2 = 50;
            let ret1 = vNum1 + vNum2;
            console.log(typeof(ret1), ret1);
            document.getElementById("ret1").innerHTML = ret1;

            vNum1 = "50";
            vNum2 = "50";
            let ret2 = vNum1 + vNum2;
            console.log(typeof(ret2), ret2);
            document.getElementById("ret2").innerHTML = ret2;

            vNum1 = 50;
            vNum2 = "50";
            let ret3 = vNum1 + vNum2;
            console.log(typeof(ret3), ret3);
            document.getElementById("ret3").innerHTML = ret3;

            vNum1 = "50";
            vNum2 = 50;
            let ret4 = vNum1 + vNum2;
            console.log(typeof(ret4), ret4);
            document.getElementById("ret4").innerHTML = ret4;

            vNum1 = 50;
            vNum2 = 50;
            let ret5 = "두 수를 더하면 : " + vNum1 + vNum2;
            console.log(typeof(ret5), ret5);
            document.getElementById("ret5").innerHTML = ret5;

            vNum1 = 50;
            vNum2 = 50;
            let ret6 = vNum1 + vNum2 + " 결과이다";
            console.log(typeof(ret6), ret6);
            document.getElementById("ret5").innerHTML = ret6;

            vNum1 = 50;
            vNum2 = 50;
            let ret7 =  " 결과는 " + vNum1 + vNum2;
            console.log(typeof(ret7), ret7);
            document.getElementById("ret7").innerHTML = ret7;

            console.log("----------");

        </script>

    </body>
</html>

숫자 + 숫자는 더하기 연산을 하여 숫자가 계산된다.

숫자 + 문자는 연결된 문자열로 보여준다.

숫자 50을 더하거나, 문자열을 연결하고 있다.

두 수를 더했지만 문자열처럼 연결된 것이 있고, 정상적으로 더해진 값이 나오는 경우가 있다.

이런 현상들 때문에 숫자와 문자열을 연결할 때 만약 숫자를 계산할 일이 생긴다면 숫자를 괄호로 묶어서 계산을 먼저 해 주도록 하거나 따로 변수를 두고 숫자를 계산하고 문자열을 연결하는 것이 좋다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 NaN 숫자가 아닙니다. javascript nan not a number (0)	2021.11.30
자바스크립트 숫자 문자열의 동작 관계 javascript numeric strings (0)	2021.11.29
자바스크립트 숫자범위와 정밀도 정수형 최대 15자리 부동소수점 17자리 (0)	2021.11.27
자바스크립트 숫자형 데이터 javascript numbers (0)	2021.11.25
자바스크립트 템플릿 리터럴 html 코드 만들기 (0)	2021.11.23

자바스크립트 숫자 문자 관계 + 연산자는 더하기가 아니다.