(7)JavaScript - 자료형 / typeof 연산자

typeof 연산자는 내가 지금 사용하는 값이 어떤 자료형인지 확인하는 연산자이다.

typeof 값

 

typeof라는 키워드 다음 값에 입력하면 이 typeof을 평가해서 해당하는 자료형을 문자열로 되돌려준다.

 

▼ typeof로 자료형 확인하기 (1)

<script>
    console.log(typeof 123);
    console.log(typeof 'SeopE');
    console.log(typeof true);
</script>

 

실행 하면 아래와 같은 결과값이 출력된다

 

typeof로 인해 우리가 사용하는 값이 어떤 자료형인지 간편하게 확인할 수있다.

 

또한, 숫자라고 해서 무조건 number가 아닌 따옴표로인해 문자열 string으로 출력된다는점 잊지말자

<script>
    console.log(typeof 123);
    console.log(typeof 'SeopE');
    console.log(typeof true);

    console.log(typeof 1);
    console.log(typeof 1.0);
    console.log(typeof '1');
    console.log(typeof "1");
    console.log(typeof `1`);
</script>

 

▼ typeof로 자료형 확인하기 (2)

typeof 연산자는 이렇게 단순한 값 뿐만 아니라 변수나 함수에도 활용 할 수있다.

각각의 자료형을 확인해보면

<script>
    let name = 'SeopE'
    function sayHello() {
        console.log('Hello');
    }
    console.log(typeof name);
    console.log(typeof sayHello);
</script>

name은 SeopE라는 문자열을 담고있어 string으로 출력되었고

sayHello는 함수이기에 function으로 출력되었다.

 

▼ typeof 연산자에 연산식 넣기

 

    console.log(typeof 'hi' + 'SeopE');
    console.log(typeof 4-2);

 

첫 번째 줄에는 hiSeopE이므로 string이 출력 될 것 같고 

두 번째 줄에는 4-2=2의 자료형인 number가 출력 될 것 같지만 

 

뭔가 이상한 값이 출력 되었다.

콘솔창의 'NaN은 Not a Number의 약자로 숫자가 아닌 값을 표현하는 값이다.

 

이러한 결과가 나온이유는 연산의 순서가 의도하지 않은 방식으로 실행된 것이며

typeof 연산자는 기본적으로 사칙연산자들보다 우선순위가 높다.

 

그래서 첫 번째 줄에서 더하기 연산보다 typeof 'hi'연산을 먼저 해버린것.

처음에 typeof 연산자는 값의 자료형을 문자열로 반환 한다고 했을때,

typeof 'hi'의 연산 결과는 문자열 string이기에 이 줄은 문자열 string + 문자열 SeopE가 돼버려서

stringSeopE가 나온것.

 

두 번째 줄은 앞쪽에 typeof 8을 먼저 해 버렸기 때문에 typeof 8은 문자열 number가 된 것이다.

즉 문자열 number - 3 임에 따라 문자열과 숫자 값을 연산하려다 보니까 

NaN = 숫자가 아닌 값 이 출력된 것이다.

 

이런 문제를 해결하기위해 괄호를 넣어 연산자의 우선순위를 높여주면 된다.

<script>
    console.log(typeof ('hi' + 'SeopE'));
    console.log(typeof (4-2));
</script>

 

정상적으로 문자열 string과 number가 출력 되었다.

 

이렇게 typeof 연산자도 말 그대로 연산자이기 때문에

다른 연산과 함께 사용할 때는 연산의 우선순위를 고려해야 한다.

 

▼ 연산자의 우선순위 - mdn Link

연산자 우선순위 - JavaScript | MDN

 

간단하게 예시를 보고 우선순위 고려햐여 답을 구해보자

typeof (6 * 2 === 11 || 13 - 7 < 7 && !true);

▷ 일단 우선순위가 꽤 높은 typeof 연산자가 나오긴 했지만, 가장 높은 우선순위인 괄호가 있다,

괄호 내부를 먼저 연산해보면..

괄호 내부에서 가장 높은 우선순위인 NOT 연산자(!) 이므로 !true는 false 이다.

 

typeof (6 * 2 === 11 || 13 - 7 < 7 && false);

▷ 괄호 내부에서 NOT연산자를 해결 했으니 그 다음 우선순위는 사칙연산이다.

각각 곱셈과 뺄셈을 해주자

 

typeof (12 === 11 || 6 < 7 && false);

▷ 그 다음 우선 순위가 높은 것은 비교 연산자 이며, 12 === 11 은 false, 6 < 7은 true이다.

 

typeof (false || true && false);

▷ 마지막으로 AND와 OR 연산자가 보이는데 최종적으로 AND연산자가 OR연선자 보다 높다.

ture && false = false 이다.

 

typeof (false || false);

▷ false || false = false이다.

 

최종결과는 false이다.

typeof false;