프론트엔드/JavaScript

자료형 변환(type conversion)

ksge7 2020. 9. 9. 22:20

C, 자바와 달리 자바 스크립트의 경우 타입 변경이 자유롭다.

 

var, let을 써주며 별도의 타입을 지정하지 않아도 엔진에서 알아서 판단해서 적절한 자료형을 부여한다.

 

<body>
    <script>

        let num = 20;
        console.log(num);  // 숫자 20 출력

        num = "안녕하세요";
        console.log(num);  // 글자 "안녕하세요" 출력

    </script>
</body>

 

그래서 위와 같은 변수에 다른 타입의 값을 재할당할 수도 있는 등 자유로운 형변환이 이뤄진다.

 

이러한 자료형 변환은 크게 두 가지로 나뉜다.

 

묵시적 타입 변환(implicit type conversion)

특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변경한다.

 

<body>
    <script>
    
        let num = "10"*"5";
        console.log(num); // 50 출력
        // 문자로 이뤄진 숫자지만, 연산을 하기 위해 타입이 자동변환됨

        let name = "저는 "+5+"번입니다.";
        console.log(name); // 저는 5번입니다.
        // 문자와 숫자의 조합이지만, 숫자는 문자열과 결합하면서 문자열로 자동 변환된다.

    </script>
</body>

 

명시적 타입 변환(explicit type conversion)

묵시적 타입 이외에도 사용자가 직접 원하는 방식으로 타입을 변환할 방법도 있다.

 

이를 명시적 타입 변환이라 한다.

 

1. Number() / 숫자로 형변환

<body>
    <script>
        
        let num = "7"+7;
        console.log(num); // '77' 출력.
        // 문자 '7'과 숫자 7이 조합되서 문자열 '77' 출력.

        let num2 = Number("7")+7;
        console.log(num2); // 14 출력
        // 문자 '7'을 Number()를 써서 형변환. 이후 숫자 7과 더해서 14 출력.
        
    </script>
</body>

 

Number()의 괄호 안에 들어간 숫자형 문자는 문자가 아닌 숫자로 형변환 된다.

 

정수, 실수는 parseInt, parseFloat를 쓸수도 있지만 Number로 해결이 된다.

 

2. String() / 문자로 형변환

<body>
    <script>
        
        let num = 7+7;
        console.log(num); // 14 출력.
        // 숫자 7과 7이 더해져서 14 출력.

        let num2 = String(7)+7;
        console.log(num2); // 77 출력
        // String()안에 들어간 숫자는 문자로 형변환되어 숫자 7과 합쳐져 77이 문자열이 출력.
        
    </script>
</body>

 

String()의 괄호 안에 들어간 숫자는 문자로 형변환 된다.

 

3. Boolean() / true, false로 형변환

<body>
    <script>

        let Bool1 = Boolean(0);
        console.log(Bool1);  // false 출력

        let Bool2 = Boolean(1);
        console.log(Bool2);  // true 출력

        let Bool3 = Boolean(3<2);
        console.log(Bool3);  // false 출력
        
    </script>
</body>

 

Boolean()의 괄호 안에 들어간 데이터는 true, false 여부를 따져서 boolean 타입으로 형변환된다.

 

4. Object() / Object로 형변환

Boolean()의 괄호 안에 들어간 데이터는 Object타입으로 형변환된다.