JavaScript - typeof 연산자

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 흥미로운 여정을 떠납니다. JavaScript의 세계로, 구체적으로 typeof 연산자를 탐구해볼 것입니다. 프로그래밍에 처음 도전하는 분이라면 걱정하지 마세요; 나는 단계별로 이 개념을 안내해드릴 테니, 수년 동안 수많은 학생들에게 가르쳐온 경험을 바탕으로 말이죠. 그러니 마음에 드는 음료를 한 잔 챙기고, 편안하게 자리 잡고, 함께 뛰어들어보겠습니다!

typeof 연산자

JavaScript의 세계에서 형사가 되어 다양한 데이터 타입을 식별하는 것이 당신의 임무라면, typeof 연산자가 바로 그 역할을 합니다! 그것은 마치 확대경을 사용하여 JavaScript에서 값이나 표현식의 타입을 파악하는 것과 같습니다.

문법

typeof 연산자를 사용하는 것은 파이를 먹는 것만큼 간단합니다(파이를 좋아하지 않는 사람이 어디 있을까요?). 다음과 같이 사용합니다:

typeof operand
// 또는
typeof(operand)

두 형식 모두 동일하게 동작하므로, 보기에 더 좋은 것을 선택하시면 됩니다. 나는 첫 번째 방식을 더 선호합니다. 입력할 수 있는 글자가 적기 때문이죠. 프로그래머들은 효율성을 중시하는 법입니다!

typeof 연산자가 반환하는 데이터 타입

이제 typeof가 식별할 수 있는 다양한 타입을 살펴보겠습니다. 마치 JavaScript의 데이터 맛의 메뉴 같은 것입니다:

데이터 타입	typeof 반환值
Number	"number"
String	"string"
Boolean	"boolean"
Symbol	"symbol"
Undefined	"undefined"
Null	"object"
Object	"object"
Function	"function"
BigInt	"bigint"

이 중 몇 가지가 낯설다면 걱정하지 마세요. 예제를 통해 하나씩 탐구해보면 "아하!"라고 외칠 만큼 이해가 될 것입니다.

JavaScript typeof 연산자로 숫자 타입 확인

まずは数字から始めましょう。JavaScript에서 숫자는 수학 연산의 기본 블록입니다.

console.log(typeof 42);        // "number"
console.log(typeof 3.14);      // "number"
console.log(typeof -10);       // "number"
console.log(typeof Infinity);  // "number"
console.log(typeof NaN);       // "number"

surprise! Infinity와 NaN (Not-a-Number)도 JavaScript에서는 숫자로 간주됩니다. 마치 핫도그를 샌드위치라고 부르는 것처럼 예상치 못한 일이지만, JavaScript는 그렇게 돌아가는 법입니다!

JavaScript typeof 연산자로 문자열 타입 확인

문자열은 데이터의 包装지와 같습니다. 그 안에 텍스트 콘텐츠를 담고 있습니다.

console.log(typeof "Hello, World!");  // "string"
console.log(typeof '42');             // "string"
console.log(typeof ``);               // "string"

'42'를 따옴표로 감싸면 문자열이 되는 것을 주목하세요. 마치 숫자를 텍스트의 의상으로 입히는 것 같은 느낌입니다!

JavaScript typeof 연산자로 불리언 타입 확인

불리언은 프로그래밍의 예/아니오, 참/거짓입니다. 마치 전구 스위치처럼 On이나 Off 중 하나입니다.

console.log(typeof true);   // "boolean"
console.log(typeof false);  // "boolean"
console.log(typeof (1 > 2)); // "boolean"

마지막 예제는 비교 연산이 불리언으로 결과를 돌려줌을 보여줍니다. 마치 "1이 2보다 크냐?"하고 물어보면 "아니요!"(거짓)라는 간단한 답을 받는 것과 같습니다.

JavaScript typeof 연산자로 심볼 타입 확인

심볼은 고유한 식별자입니다. 마치 파티에서 모두 다른 이름을 가진 이름표 같은 것입니다.

console.log(typeof Symbol('unique'));  // "symbol"

심볼에 대해 지금은 너무 걱정하지 마세요. ES6의 cool kids지만, JavaScript 파티에서 자주 보이지는 않습니다.

JavaScript typeof 연산자로 정의되지 않았고 null 확인

이제 조금 복잡해지는 부분입니다. 마치 마법의 트릭이 프로그래밍 세계에서 일어나는 것처럼.

console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"

대기! null이 객체냐? 이것은 JavaScript의 오래된 버그 중 하나입니다. 오래된 코드를 깨뜨릴 수 있어서 수정할 수 없게 되었습니다. 마치 당신의 사랑하는 카페의 흔들리는 테ーブル처럼 - 귀찮지만, 그걸 고치면 정기 손님들이 실망할 수 있습니다.

JavaScript typeof 연산자로 객체 타입 확인

객체는 다양한 속성과 메서드를 담을 수 있는 컨테이너입니다.

console.log(typeof {});           // "object"
console.log(typeof []);           // "object"
console.log(typeof new Date());   // "object"

네, 배열도 객체입니다! 마치 쇼핑 목록이 문서의 유형이라고 말하는 것처럼 - 기술적으로는 맞지만, 약간 이상하게 느껴질 수 있습니다.

JavaScript typeof 연산자로 함수 타입 확인

함수는 프로그래밍의 동사와 같습니다. 그들은 일을 합니다!

console.log(typeof function() {});  // "function"
console.log(typeof console.log);    // "function"

함수는 자신만의 특별한 타입을 가집니다. JavaScript가 말하는 것처럼, "함수 여러분, 당신들은 특별하니까. 자신만의 카테고리를 가지세요!"

JavaScript typeof 연산자로 BigInt 타입 확인

BigInt는 새로운 녀석으로, 정말로 큰 숫자를 다루기 위해 도입되었습니다.

console.log(typeof 1n);  // "bigint"
console.log(typeof BigInt(1));  // "bigint"

BigInt는 일반 숫자가 충분히 크지 않을 때의重量级 챔피언을 상상해보세요!

JavaScript typeof 연산자 실시간 개발에서의 활용

실제 프로그래밍에서 typeof는 자주 사용되어 연산 전에 타입을 확인합니다. 마치 요리를 시작하기 전에 적절한 재료를 확인하는 것과 같습니다.

function safeAdd(a, b) {
if (typeof a === "number" && typeof b === "number") {
return a + b;
} else {
return "Error: Both arguments must be numbers";
}
}

console.log(safeAdd(5, 10));  // 15
console.log(safeAdd("5", 10));  // "Error: Both arguments must be numbers"

이 함수는 두 입력이 모두 숫자인지 확인한 후 덧셈을 수행합니다. 마치 "숫자만" 클럽의 보안관처럼!

JavaScript 배열과 typeof 연산자

여기서 한 가지 주의할 점이 있습니다 - 배열은 객체입니다! 그것을 실제로 확인해보겠습니다:

console.log(typeof [1, 2, 3]);  // "object"

그렇다면 배열을 어떻게 확인할까요? 특별한 메서드를 사용합니다:

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray({a: 1}));     // false

마치 배열 모양의 객체를 특별한 탐지기로 확인하는 것처럼!

그렇습니다, 여러분! typeof 연산자의 세계를 여행했습니다. 연습이 완벽을 만드는 것을 기억하세요, 그러면 이 예제들을 자유자재로 사용할 수 있을 것입니다. 자신의 변수가 항상 기대하는 타입이 되기를 바라며, 행복한 코딩 되세요!

Credits: Image by storyset