Today Objectives

• typeof 연산자를 이용하여 주어진 리터럴의 타입을 확인할 수 있다.
• typeof 연산자를 이용하여 주어진 변수의 타입을 확인할 수 있다.
  
  
  

typeof 연산자의 역할은 무엇일까?

typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.
-MDN typeof

위 문장을 하나 하나 뜯어보며 이해해봅시다.

연산자는 주어진 피연산자를 대상으로 어떠한 연산(행위)을 수행하는 구문을 말합니다. 여기서 피연산자는 1~3개가 될 수 있으며 각 경우에 따라 1개라면 단항 연산자, 2개라면 이항 연산자, 3개라면 삼항 연산자로 호칭합니다.

피연산자는 연산(행위)을 당하는 대상입니다. 피연산자는 리터럴이나 변수가 될 수 있습니다. 여기서 리터럴은 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 표기하는 방법입니다. 예시를 들면 3은 숫자 리터럴, 'happy'는 문자열 리터럴, true는 Boolean 리터럴이라고 할 수 있겠습니다.

이제 typeof의 역할을 설명할 수 있습니다.

결국 typeof 연산자는 연산할 대상(피연산자)을 전달해 주면 그 아이의 자료형(Type)이 무엇인지 판단한 결과를 우리가 이해할 수 있는 문자열(숫자라면 Number, 문자열이라면 String 등)으로 알려준다는 얘기입니다.

아직도 이해가 어려운가요? 그럴 수 있습니다. 더 쉬운 이해를 위해 아래 코드 예시와 함께 이해해봅시다.

console.log(typeof 3);
console.log(typeof 'happy');
console.log(typeof true);

위 코드의 결과가 어떻게 될지 자신이 사용하는 웹 브라우저의 개발자 도구에서 직접 실행해 보세요. 결과는 어땠나요?

처음 주어진 3은 온전한 숫자였습니다. 정수이지만 JS에서는 모든 숫자를 정수/실수 구분하지 않고, 모두 실수로 처리하며 Number라는 하나의 타입으로 처리합니다.
두번째 'happy'는 문자열인 String 타입이었습니다. 우리는 주어진 리터럴이 작은/큰 따옴표로 쌓여있으면 문자열로 인식하기로 약속했습니다.
마지막 true는 참을 뜻하는 예약어(keyword라고도 합니다.)로 Boolean 타입으로 인식됩니다. false도 마찬가지이며 거짓을 뜻하는 예약어입니다.

number
string
boolean

피연산자는 리터럴이 아닌 변수도 전달할 수 있으며, 리터럴에서 전달했던 값과 변수에 저장했던 값이 동일하다면 동일한 동작 결과가 표시됩니다.

let num = 3;
let happy = 'happy';
let isTrue = true;

console.log(typeof num);
console.log(typeof happy);
console.log(typeof isTrue);

typeof Deep Dive

우리가 놓치기 쉬운 엣지 케이스에서의 typeof 사용례를 살펴 보고 이해도를 높여 봅시다!😤

아직 선언되지 않은 변수의 타입을 확인하려 한다면...

undefined 타입을 반환합니다.

console.log(typeof notYet);
// -> undefined

객체의 타입을 확인하려 한다면...

object 타입을 반환합니다.

let person = {
  name: 'jaehun',
  age: 24
};

console.log(typeof person);
// -> object

함수의 타입을 확인하려 한다면...

function 타입을 반환합니다.

function printSome() {
  console.log('something');
}

console.log(typeof printSome);
// -> function

숫자와 문자열을 비교하려 한다면...

false 값을 반환합니다. 대소 비교 연산자는 number 타입과 비교를 시도하는 경우 String 값도 Number 타입으로 형 변환이 이뤄지는데, 숫자만 적힌 문자열 리터럴이 아닌 경우 NaN 값이 됩니다. NaN과 숫자의 비교는 항상 false이기 때문에 이를 반환하는 것입니다.

console.log(typeof 'test' > 1);
// -> false

위 예의 함정이 있습니다. 위 비교의 결과가 false라면 typeof 연산자가 반환하는 결과는 Boolean이 되어야 함에도 false가 반환되었습니다. 그 이유는 연산자 우선순위에 의한 것으로 typeof 연산자보다 비교 연산자가 더 우선순위에 있기 때문입니다. 이에 비교 구문을 괄호로 감싸면 제대로 결과가 반환됩니다.

console.log(typeof ('test' > 1));
// -> boolean

typeof 결과의 타입을 확인하려 한다면...

처음 정의에서 말했듯 typeof 연산자는 연산 결과를 String으로 반환합니다. 고로 typeof 결과의 타입을 확인하면 String을 반환합니다.

console.log(typeof typeof 1);
// -> string

console.log 없이 typeof를 사용한다면...

콘솔에 문자열을 출력하는 것이 아닌 문자열 리터럴 자체가 그대로 반환됩니다.

// console.log 사용
console.log(typeof 1);
// -> number

// typeof 단독
typeof 1;
// -> "number"

마치며

typeof의 간단한 사용례와 설명을 적어 보았으며, 발생할 수 있는 엣지 케이스에 대해 적어 보았습니다.
상술한 엣지 케이스는 자주 만나는 문제가 아니기 때문에 모두 체화할 필요는 없으며, 이런 게 있구나 정도로 이해하셨다가 문제가 발생했을 때 직접 개발자 도구나 터미널 등 편한 도구를 이용해 실험해보거나 MDN 문서를 참고하는 것이 효율적일 것입니다.

마치며 중간에 typeof 연산자를 설명할 때 필요 없는 내용도 포함된 감이 없지 않지만 알아야 되는 부분이라 생각하고 넣었으니 읽는 모든 분들께 도움이 되셨길 바랍니다.