Chapter 02 자바스크립트 기본 - 자료형 변환

2.10 숫자와 문자열 자료형 변환

▲ 자동으로 자료형 변환

• 숫자와 문자열 더하기: 문자열이 우선되기 때문에, 숫자 + 문자열 = 문자열로 변경됨.
• 숫자와 문자열 더하기 빼고 나머지 : 숫자가 우선됨!!

 

▲ 강제로 자료형 변환

• Number() 함수 : 다른 자료형 => 숫자
• String() 함수 : 다른 자료형 => 문자열

 

▲ NaN(Not a Number) : 자료형은 숫자지만, 자바스크립트로 나타낼 수 없는 숫자를 의미함. 일반 문자열을 숫자로 표시할 수 없지만, 강제로 자료형을 바꿨기 때문에 NaN으로 출력됨.

▲ Math.sqrt(3) : 제곱근을 구하는 메소드

 

코드 2-44.  숫자와 문자열 자료형 변환 (1)

<script>
    //1번
    alert('52 + 273'); //52 + 273
    //2번
    alert(52 + 273); //325
    //3번
    alert('52' + 273); //52273
    //4번
    alert(52 + '273'); //52273
    //5번
    alert('52' + '273'); //52273
</script>

<코드설명> 
1번 '52 + 273' 자체가 하나의 문자열이기 때문에 그대로 출력
2번 숫자의 덧셈이 실행돼 325를 출력함
3번,4번,5번 모두 문자열 '52273'을 출력함 => 숫자와 문자열을 덧셈 연산할 때에는 문자열이 우선됨!

 

코드 2-45.  숫자와 문자열 자료형 변환 (2)

<script>
    alert('52 * 273'); //52 * 273
    alert(52 * 273); //14196
    alert('52' * 273); //14196
    alert(52 * '273'); //14196
    alert('52' * '273'); //14196
</script>

<코드설명> 더하기 연산자를 제외한 사칙 연산자는 숫자가 우선되기 때문에 하나의 문자열인 1번을 제외한 나머지는 모두 숫자로 곱하여 14196이 출력됨

 

코드 2-46.  숫자의 입력 (1)

<script>
    //변수 선언
    var input = prompt('숫자를 입력해주세요', '숫자');

    //출력
    alert(typeof(input));
</script>

<코드 설명> prompt() 함수를 사용하면 문자열만 입력받을 수 있다. 따라서 아무리 숫자를 입력해도 문자열의 자료형 string을 출력함. 이것을 숫자로 바꾸기 위해서는 number() 함수를 사용해야함.

<코드 결과>

 

코드 2-47.  숫자의 입력 (2)

<script>
    //변수 선언
    var input = prompt('숫자를 입력해주세요', '숫자');
    var numberInput = Number(input);
    
    //출력
    alert(typeof(numberInput) + ': ' + numberInput);
</script>

<코드 설명> prompt() 함수로 받은 문자열을 number() 함수를 이용해 숫자로 변환함.
숫자가 아닌 값을 입력했을 때는 NaN(Not a Number)라는 값이 출력됨. NaN은 자료형은 숫자지만,자바스크립트로 나타낼 수 없는 숫자를 의미함

<코드 결과>

: 숫자를 입력했을 때

: 숫자가 아닌 값을 입력했을 때

 

코드 2-48.  NaN

<script>
    //변수 선언
    var number = Math.sqrt(-3);

    //출력
    alert(number);
</script>

<코드 설명> 자바스크립트는 복소수를 표현할 수 없음. 따라서 루트-3과 같은 복소수는 NaN으로 표시됨

 

---

2.11 불리언 자료형 변환

▲ Boolean() 함수 : 다른 자료형 => 불리언

▲ 조건문 or 논리 부정 연산자 : 조건문이나 논리 부정 연산자를 사용하면 자동으로 불리언 자료형으로 변환됨.
논리 부정 연산자를 사용해 Boolean() 함수처럼 작동하게 할 수 있음

 

코드 2-49.  불리언 자료형 변환 (1)

<script>
    alert(Boolean(0)); //false
    alert(Boolean(NaN)); //false
    alert(Boolean('')); //false
    alert(Boolean(null)); //false
    alert(Boolean(undefined)); //false
</script>

<코드 설명> 위의 다섯 가지 경우를 제외한 모든 경우 true로 변환됨

 

코드 2-50.  불리언 자료형 변환 (2)

<script>
    alert(!0); //true
    alert(!NaN); //true
    alert(!''); //true
    alert(!null); //true
    alert(!undefined); //true
</script>

<코드 설명> 논리 부정 연산자를 사용해 Boolean() 함수처럼 작동하게 만들 수도 있음!