📘 2.5.1 typeof - 변수 안 보물의 정체를 알아내는 탐정도구
따뜻한 봄날 오후, 교실 창가에 앉아 여러분이 그동안 만들어온 작은 데이터 상자들을 생각해봅니다. 숫자를 품은 상자, 글자를 간직한 상자, 참과 거짓을 담은 상자들까지. 저마다의 이야기를 품고 있는 이 상자들이 때로는 수수께끼 같기도 하지요.
문득 이런 순간이 찾아옵니다. 상자를 바라보며 "이 안에는 무엇이 들어있을까?" 하고 궁금해하는 마음이요. 겉으로는 똑같아 보이는 상자들이지만, 그 안에는 서로 다른 종류의 소중한 것들이 숨어있답니다. 이럴 때 우리에게는 특별한 탐정 도구 typeof가 필요해요.
🧠 새로운 말들과 친해지기
오늘 새롭게 만날 말들을 차근차근 알아보겠습니다.
| 어려운 말 | 쉬운 설명 |
|---|---|
| typeof | 상자 안에 뭐가 들어있는지 알려주는 특별한 도구예요. 마치 엑스레이 같아요! |
| 데이터 종류 | 숫자, 글자, 참거짓 같은 정보의 종류를 말해요. |
| 결과값 | typeof가 우리에게 알려주는 답을 말해요. |
| 타입 확인하기 | 상자 안 내용물이 어떤 종류인지 미리 알아보는 것이에요. |
typeof는 "타입 오브"라고 소리 내어 읽어보세요. "~의 종류"라는 의미를 담고 있어요. 예를 들어 typeof 10은 "10의 종류가 무엇인가요?"라고 정중히 묻는 것과 같습니다. 그러면 "number"라는 친절한 답을 돌려받게 되지요.
✨ typeof가 뭔지 알아보기
여러분, typeof는 정말 신기한 존재예요. 상자를 열어보지 않고도 그 안에 어떤 종류의 보물이 숨어있는지 알려주거든요.
자바스크립트의 세계에서는 같은 상자에 오늘은 숫자를 담았다가, 내일은 글자를 담을 수도 있어요. 이런 자유로움이 때로는 우리를 당황스럽게 만들기도 하지요. "어라, 이 상자에는 지금 무엇이 들어있을까?" 이런 궁금증이 생길 때마다 typeof가 다정하게 손을 내밀어 도와줍니다.
특히 다른 곳에서 온 소중한 정보들을 받을 때는 더욱 조심스럽게 확인해보는 것이 좋아요. 친구가 건네준 상자나 사용자가 입력한 정보 같은 것들 말이에요. 예상과는 다른 모습일 수도 있으니까요.
재미있는 이야기: 신비한 상자들의 비밀을 푸는 탐정
아주 오래전, 어느 작은 마을에 상자 탐정 타입 씨라는 분이 살고 계셨어요. 이 분은 참으로 특별한 능력을 가지고 계셨답니다.
어느 따스한 봄날, 마을 사람들이 타입 씨를 찾아와 말씀드렸어요.
"타입 씨, 저희를 도와주세요. 누군가 저희 집 앞에 여러 상자들을 놓고 갔는데, 안에 무엇이 들어있는지 알 수가 없어요."
타입 씨는 온화한 미소를 지으며 답하셨어요.
"걱정하지 마세요. 저에게는 상자를 열어보지 않고도 그 안의 내용물을 알 수 있는 방법이 있거든요."
타입 씨께서는 특별한 안경을 조심스럽게 써보셨어요. 이 안경을 쓰면 상자 안 내용물의 종류가 선명하게 보인다고 하더군요.
첫 번째 상자를 살펴보시더니 "이 상자 안에는 숫자가 들어있습니다"라고 말씀하셨어요.
두 번째 상자를 보시더니 "이 상자 안에는 글자가 들어있네요"라고 하셨어요.
세 번째 상자를 보시더니 "이 상자 안에는 참거짓이 들어있어요"라고 말씀하셨어요.
놀랍게도 상자를 하나씩 열어보니 타입 씨의 말씀이 모두 정확했답니다. 그 이후로 마을 사람들은 모르는 상자를 받으면 언제나 타입 씨를 찾아뵈었다고 해요.
typeof도 이 타입 씨와 같은 마음을 가지고 있어요. 변수라는 상자를 "열어보지 않고도" 그 안에 어떤 종류의 정보가 담겨있는지 정확히 알려주거든요.
🎯 왜 typeof를 배워야 할까요?
혹시 여러분이 궁금해하실 것 같아요. "왜 상자 안에 무엇이 들어있는지 미리 알아야 할까요?"
첫 번째 이유는 실수를 방지하기 위해서입니다. 만약 숫자가 필요한 곳에 글자가 들어있다면 계산이 엉뚱한 방향으로 흘러갈 수 있어요. 미리 확인하고 "아, 이건 글자네요. 숫자로 바꿔드릴게요"라고 말할 수 있다면 얼마나 좋을까요.
두 번째 이유는 상황에 맞게 정성스럽게 처리하기 위해서예요. 숫자가 들어있다면 계산을 도와드리고, 글자가 들어있다면 글자에 맞는 처리를 해드리는 것처럼 말이에요.
세 번째 이유는 문제를 쉽게 찾아내기 위해서입니다. 프로그램이 예상과 다르게 작동할 때 "아, 여기에 다른 종류의 정보가 들어있었구나!"하고 쉽게 알아차릴 수 있어요.
⚙️ typeof 사용하는 방법 배우기
typeof를 사용하는 방법은 생각보다 간단해요.
typeof 확인하고싶은것
typeof(확인하고싶은것) // 괄호를 써도 돼요typeof가 알려주는 답들:
typeof는 언제나 글자의 형태로 답해줘요. 가능한 답들은 이런 것들이 있어요:
"number"- 숫자가 들어있어요 (1, 3.14, -5 등등)"string"- 글자가 들어있어요 ("안녕", "123" 등등)"boolean"- 참거짓이 들어있어요 (true, false)"undefined"- 아무것도 들어있지 않아요
여기서 조금 주의깊게 기억해두실 점이 하나 있어요. null(아무것도 없다는 의미)을 확인하면 "object"라고 나타난답니다. 이건 컴퓨터의 오래된 실수인데, 지금도 그대로 남아있어요. 그냥 "그런 일도 있구나" 하고 받아들여 주세요.
🧪 직접 해보면서 배우기
이제 실제로 typeof가 어떻게 동작하는지 함께 살펴볼까요?
🔹 첫 번째 예시: 여러 가지 상자들 확인해보기
여러분이 정성스럽게 만든 다양한 상자들의 종류를 확인해보겠습니다.
// 여러 가지 상자들을 만들어보자
let studentName = "민수"; // 학생 이름 상자
let studentAge = 10; // 학생 나이 상자
let isHappy = true; // 기분 좋은지 상자
let emptyBox; // 빈 상자
// 이제 각 상자의 종류를 확인해보자!
console.log("=== 우리가 만든 상자들 확인하기 ===");
console.log("민수 상자의 종류:", typeof studentName); // "string" 나올 거예요
console.log("나이 상자의 종류:", typeof studentAge); // "number" 나올 거예요
console.log("기분 상자의 종류:", typeof isHappy); // "boolean" 나올 거예요
console.log("빈 상자의 종류:", typeof emptyBox); // "undefined" 나올 거예요
// 직접 값들도 확인해볼 수 있어요
console.log("=== 직접 값들도 확인해보기 ===");
console.log("42의 종류:", typeof 42); // "number"
console.log("'안녕하세요'의 종류:", typeof "안녕하세요"); // "string"
console.log("true의 종류:", typeof true); // "boolean"여기서 중요한 것은 typeof가 상자 안을 들여다보는 것이라는 점이에요. 상자 자체가 아니라 그 안에 담긴 소중한 내용물의 종류를 알려주는 거랍니다.
🔹 두 번째 예시: 계산 결과의 종류도 확인하기
계산을 통해 얻어진 결과가 어떤 종류인지도 확인할 수 있어요.
// 여러 가지 계산을 해보자
let sum = 10 + 20; // 숫자 더하기
let greeting = "안녕" + "하세요"; // 글자 합치기
let isGreater = 5 > 3; // 비교하기
console.log("=== 계산 결과들의 종류 확인하기 ===");
console.log("10 + 20의 결과:", sum); // 30
console.log("10 + 20의 결과 종류:", typeof sum); // "number"
console.log("글자 합치기 결과:", greeting); // "안녕하세요"
console.log("글자 합치기 결과 종류:", typeof greeting); // "string"
console.log("5 > 3 비교 결과:", isGreater); // true
console.log("5 > 3 비교 결과 종류:", typeof isGreater); // "boolean"
// 신기한 경우들도 확인해보자
console.log("=== 신기한 경우들 ===");
console.log("NaN의 종류:", typeof NaN); // "number" (신기하죠?)
console.log("Infinity의 종류:", typeof Infinity); // "number"
console.log("null의 종류:", typeof null); // "object" (주의!)여기서 특별히 신기한 것은 NaN(숫자가 아니라는 의미)도 "number" 종류라고 나온다는 점이에요. 조금 이상하게 느껴질 수 있지만, 그런 특성이 있다고 기억해두시면 됩니다.
🔹 세 번째 예시: 서로 다른 종류의 정보들 비교해보기
이제 여러 가지 종류의 정보들을 함께 비교해서 살펴보겠습니다.
// 친구들이 여러 가지 정보를 하나씩 주었어요
let friendAge = 25;
let friendName = "영희";
let isStudying = true;
let favoriteColor;
console.log("=== 친구들이 준 정보들 확인하기 ===");
// 나이 정보 확인하기
console.log("받은 정보:", friendAge);
console.log("정보 종류:", typeof friendAge);
console.log("이 정보는 " + typeof friendAge + " 종류예요!");
// 이름 정보 확인하기
console.log("받은 정보:", friendName);
console.log("정보 종류:", typeof friendName);
console.log("이 정보는 " + typeof friendName + " 종류예요!");
// 공부 여부 정보 확인하기
console.log("받은 정보:", isStudying);
console.log("정보 종류:", typeof isStudying);
console.log("이 정보는 " + typeof isStudying + " 종류예요!");
// 빈 정보 확인하기
console.log("받은 정보:", favoriteColor);
console.log("정보 종류:", typeof favoriteColor);
console.log("이 정보는 " + typeof favoriteColor + " 종류예요!");
// 모든 typeof 결과를 모아서 보여주기
console.log("=== 모든 종류 모아보기 ===");
console.log("숫자 확인:", typeof 100); // "number"
console.log("소수 확인:", typeof 3.14); // "number"
console.log("음수 확인:", typeof -5); // "number"
console.log("긴 글자 확인:", typeof "안녕하세요 반가워요"); // "string"
console.log("짧은 글자 확인:", typeof "A"); // "string"
console.log("빈 글자 확인:", typeof ""); // "string"
console.log("참 확인:", typeof true); // "boolean"
console.log("거짓 확인:", typeof false); // "boolean"이렇게 하면 어떤 종류의 정보가 와도 그 종류를 미리 알고 적절히 준비할 수 있답니다.
🔄 typeof 사용하는 순서 정리하기
지금까지 배운 typeof 사용 방법을 차근차근 정리해보겠습니다.
첫 번째 단계는 확인할 상자 정하기입니다. 어떤 상자의 내용물 종류를 알고 싶은지 마음속으로 정해보세요.
두 번째 단계는 typeof 사용하기입니다. typeof 상자이름 이렇게 정성스럽게 써서 종류를 확인해보세요.
세 번째 단계는 결과 확인하기입니다. typeof는 언제나 글자로 답해주니까, 그 답을 차분히 확인해보세요.
마지막 단계는 결과 활용하기입니다. 알아낸 정보 종류를 바탕으로 적절하게 활용해보세요.
🎯 복습 문제들
조용한 오후, 책상에 앉아 차분히 생각해보는 시간을 가져볼까요. 연습 문제들이 여러분을 기다리고 있습니다.
기본 문제 1. 다음 값들의 typeof 결과를 예측해보세요.
console.log(typeof 3.14); // ?
console.log(typeof "Hello"); // ?
console.log(typeof false); // ?
console.log(typeof undefined); // ?정답:
"number"
"string"
"boolean"
"undefined"기본 문제 2. 변수의 타입을 확인하는 코드를 완성해보세요.
let myValue = 42;
// typeof를 사용해서 myValue의 종류를 확인해보세요
console.log("myValue의 종류:", typeof myValue);정답:
console.log("myValue의 종류:", typeof myValue); // "number"기본 문제 3. 다음 중 올바른 typeof 사용법을 모두 고르세요.
// A
console.log(typeof age);
// B
console.log(typeof(age));
// C
console.log(typeof "안녕");
// D
console.log(typeof 42);정답: A, B, C, D 모두 올바른 사용법입니다!
🔄 1단원 복습하기
2단원을 차근차근 공부했으니, 1단원에서 배운 소중한 내용들을 다시 한번 돌아보는 시간을 가져볼까요?
복습 문제 1. 변수 선언하기 (1단원 복습)
다음 중 올바른 변수 선언 방법은?
// A
let 학생이름 = "민수";
// B
let student-name = "민수";
// C
let 123name = "민수";
// D
let studentName = "민수";정답: D (camelCase 규칙을 따라 영어로 작성하는 것이 좋아요)
해설:
- A: 한글 변수명도 가능하지만 영어를 사용하는 것이 좋아요
- B: 하이픈(-)은 변수명에 사용할 수 없어요
- C: 숫자로 시작하는 변수명은 안돼요
- D: 올바른 camelCase 규칙을 따른 변수명이에요
복습 문제 2. 상수와 변수의 차이 (1단원 복습)
다음 코드에서 오류가 발생하는 부분을 찾아보세요.
const myAge = 10;
let myName = "철수";
// myAge = 11; // 여기에 오류가 있을까요?
myName = "영희"; // 여기에 오류가 있을까요?정답: myAge = 11; 부분에서 오류 발생
해설:
const로 선언한 변수는 값을 바꿀 수 없어요 (상수)let으로 선언한 변수는 값을 바꿀 수 있어요 (변수)- 따라서
myAge는 바꿀 수 없지만myName은 바꿀 수 있어요
복습 문제 3. 데이터 타입과 typeof 연결하기 (1단원 + 2.5.1단원 복습)
다음 변수들의 데이터 타입과 typeof 결과를 연결해보세요.
let score = 85;
let message = "축하합니다";
let isPassed = true;
let result;
console.log("점수 타입:", typeof score); // ?
console.log("메시지 타입:", typeof message); // ?
console.log("합격여부 타입:", typeof isPassed); // ?
console.log("결과 타입:", typeof result); // ?정답:
console.log("점수 타입:", typeof score); // "number"
console.log("메시지 타입:", typeof message); // "string"
console.log("합격여부 타입:", typeof isPassed); // "boolean"
console.log("결과 타입:", typeof result); // "undefined"해설:
- 숫자는
"number"타입 - 글자는
"string"타입 - 참거짓은
"boolean"타입 - 값이 없으면
"undefined"타입
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 마음에 담았는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| typeof의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 타입들 (number, string, boolean, undefined) | ✅ |
| null의 특별한 경우 | ✅ |
| 실전 예제 이해 | ✅ |
| 1단원 복습 완료 | ✅ |
지금까지 typeof라는 정말 특별한 탐정 도구에 대해 배워보았습니다. 처음에는 "왜 이런 것을 배워야 할까?"라고 생각하셨을 수도 있지만, 실제로 프로그래밍의 세계에서 만나다 보면 정말 자주 쓰이는 소중한 도구라는 것을 깨닫게 되실 거예요. 다음 시간에는 언제 typeof를 사용해야 하는지 더욱 자세히 알아볼 예정입니다.
📂 마무리 정보
오늘 배운 2.5.1 내용이 여러분의 자바스크립트 지식 상자에 잘 자리잡았나요? 다음 시간에는 더욱 흥미로운 내용으로 만나뵙겠습니다.
기억할 점: 오늘 배운 내용을 꼭 직접 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보시기 바랍니다.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'2. 계산하고 비교하기 (연산자) > 2.5 타입 확인하기 (typeof 연산자)' 카테고리의 다른 글
| 2.5.2 언제 `typeof`를 사용할까요? - 상자 탐정이 되어야 하는 순간들 (0) | 2025.06.29 |
|---|