본문 바로가기
programming/javascript

자바스크립트 valueOf 메서드 사용 원시데이터의 변환 primitive value

by 개코 - 개발과 코딩 2021. 12. 5.

자바스크립트의 valueOf() 메서드는 특별한 점은 없다. 다만 원시데이터로써 표현할 필요가 있을 때 사용한다. 원시데이터가 생소할 수 있지만, 쉽게 생각하자. 자바스크립트의 모든 데이터는 메서드가 존재하지만 원시데이터들은 객체도 아니고, 메서드가 없다. 데이터 그 자체로써 자료형이 존재하고 더이상 형태가 변할 수 없는 최초의 상태를 말한다.

자바스크립트 valueof 메서드 사용
원시데이터의 변환

자바스크립트에는 원시데이터가 존재한다.

영어로는 primitive value 라고도 하며, 다른말로는 원시값, 원시자료형 등이 있다.

원시데이터가 무엇인지 잘 모를 수도 있지만 간단하게 생각하자.

자료형이 더이상 변할 수 없다.

변수 등의 값은 변할 수 있지만, 더이상 변화를 줄 수 없는 것이다.

더 쉽게 말하면

원시데이터는 객체도 아니고, 메서드도 없는 데이터를 말한다.

객체화도 안되고 메서드도 없기에 자료형이 변할 수 없다.

원시데이터 primitive value

원시데이터는 위에서 언급한대로 어떤 값이나 변수 등이 더이상 변할 수 없는 가창 초기의 데이터를 말한다.

하지만 예외는 있다.

자바스크립트에서 모든 자료형은 toString() 과 valueOf() 메서드를 가진다.

이것을 제외한 모든 자료형은 별도의 함수를 사용해야 한다.

그럼 어떤 데이터를 원시데이터로 표현하는지는 자바스크립가 알아서 한다.

샘플코드

자바스크립트 예제를 통해 원시데이터를 표현하고 데이터형태를 보도록 한다.

그저 어떤 값에 valueOf() 메서드를 사용하면 그만이다.

코드가 좀 길지만 valueOf() 메서드 하나만 보도록 하자.

<!DOCTYPE html>
<html>
    <body>

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

        <script>
            
            console.log("----------");
            
            let vNum = 6.6565656565656;
            let vStr = "6.6565656565656";
            let vValueOf;

            vValueOf = vNum.valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret1").innerText = vValueOf;

            vValueOf = vStr.valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret7").innerText = vValueOf;

            vValueOf = (10 + 10).valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret2").innerText = vValueOf;

            vValueOf = (10 - 10).valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret3").innerText = vValueOf;

            vValueOf = (10 * 10).valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret4").innerText = vValueOf;

            vValueOf = (10 / 10).valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret5").innerText = vValueOf;

            vValueOf = (10 % 10).valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret6").innerText = vValueOf;

            vValueOf = (["자바", "스크립트"]).valueOf();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret8").innerText = vValueOf;

            vValueOf = (["자바", "스크립트"]).toString();
            console.log(typeof(vValueOf), vValueOf);
            document.getElementById("ret9").innerText = vValueOf;

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

        </script>

    </body>
</html>

객체도 있고 숫자도 있고 문자열도 있고 배열도 있고, 계산식도 있다.

이들이 valueOf() 메서드를 만나 원시데이터로 변환된다.

숫자는 숫자로, 문자는 문자로, 객체는 객체가 된다.

결과화면을 보도록 한다.

가시적인 결과는 문자열로 표현된다.

하지만, 샘플에서 본 대로 그냥 그대로 원시데이터로 변환되어 출력된다.

정확한 데이터타입을 보기위해 typeof() 함수를 사용하였다.

반응형

댓글