본문 바로가기
programming/javascript

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

by 개코 - 개발과 코딩 2021. 11. 28.

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

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

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

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

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

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

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

+ 연산결과

자바스크립트에서 + 연산자는 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을 더하거나, 문자열을 연결하고 있다.

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

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

반응형

댓글