2.5.2 언제 `typeof`를 사용할까요? - 상자 탐정이 되어야 하는 순간들

📘 2.5.2 언제 typeof를 사용할까요? - 상자 탐정이 되어야 하는 순간들

창밖으로 부드러운 햇살이 비춰드는 이 오후, 지난 시간에 배운 typeof라는 소중한 탐정 도구를 떠올려봅니다. 이제 더욱 중요한 질문이 우리 앞에 놓여있어요. "그럼 언제 이 탐정 도구를 사용해야 할까요?"

매번 모든 상자를 들여다보는 것은 너무 번거로울 테고, 그렇다고 확인하지 않으면 예상치 못한 일들이 일어날 수도 있지요. 오늘은 실제로 typeof를 언제, 어떻게 사용하는 것이 가장 현명한지 함께 알아보겠습니다. 마치 언제 우산을 챙겨야 하는지 아는 것처럼 자연스럽게 말이에요.

🧠 새로운 말들과 친해지기

오늘 새롭게 만날 말들을 차근차근 알아보겠습니다.

어려운 말	쉬운 설명
타입 확인하기	상자 안에 어떤 종류가 들어있는지 미리 알아보는 것이에요.
문제 찾기	프로그램이 이상할 때 어디가 잘못되었는지 찾는 것이에요.
예외 상황 처리	예상하지 못한 일이 생겼을 때 대비하는 것이에요.
안전한 프로그래밍	여러 상황에서도 문제없이 작동하는 프로그램을 만드는 것이에요.

이 말들은 모두 안전하고 현명한 프로그래밍이라는 하나의 목표를 향해 있어요. typeof는 이 목표를 이루기 위한 소중한 도구 중 하나랍니다.

✨ typeof 사용 시점의 핵심 이해하기

typeof를 언제 사용할지 결정하는 것은 위험한 곳 찾기와 비슷해요. 마치 의사 선생님이 환자를 보고 어떤 검사가 필요한지 판단하는 것처럼, 프로그래머도 코드를 보고 상자 확인이 필요한지 판단해야 하지요.

가장 중요한 원칙은 "확실하지 않은 곳에 typeof를 사용한다"는 것입니다. 상자 안에 무엇이 들어있는지 완전히 확신할 수 있다면 typeof는 필요 없어요. 반대로 어떤 종류가 들어올지 알 수 없다면 typeof는 꼭 필요하답니다.

특히 다른 곳에서 온 소중한 정보를 다룰 때는 항상 조심스럽게 접근해야 해요. 친구가 건네준 정보, 사용자가 입력한 것, 인터넷에서 받아온 데이터 등은 모두 우리의 예상과는 다른 모습일 수 있거든요.

재미있는 이야기: 요리사의 재료 확인 과정

typeof 사용 시점을 더 쉽게 이해하기 위해 '요리사의 재료 확인 과정' 이야기를 들려드리겠습니다.

맛있는 음식을 만드는 한 요리사가 계셨어요. 이 분이 재료를 확인하는 모습을 지켜보면서 생각해보세요.

직접 준비한 재료 (종류가 확실한 변수):

• 방금 전에 직접 썰어놓은 양파 → 확인할 필요가 없어요
• 직접 계량해서 준비한 설탕 → 확인할 필요가 없어요
• 미리 정성스럽게 우려낸 국물 → 확인할 필요가 없어요

다른 사람이 가져다 준 재료 (종류가 불확실한 변수):

• 요리 도우미가 가져다 준 하얀 가루 → 설탕인지 소금인지 밀가루인지 꼭 확인해야 해요!
• 손님이 주문한 특별한 양념 → 어떤 종류인지 꼭 확인해야 해요!
• 새로운 직원이 준비한 재료 → 올바른 재료인지 꼭 확인해야 해요!

프로그래밍에서도 마찬가지예요. 개발자가 직접 만든 변수는 종류를 확신할 수 있지만, 다른 곳에서 온 정보는 반드시 확인이 필요하답니다.

🎯 typeof를 사용해야 하는 상황들

실제 프로그래밍에서 typeof가 꼭 필요한 구체적인 상황들을 살펴보겠습니다.

🔹 1. 다른 사람이 만든 정보를 받을 때

다른 사람이 여러분에게 정보를 건네줄 때, 어떤 종류의 정보인지 미리 알 수 없어요. 특히 여러 명이 함께 작업할 때는 서로 다른 종류의 정보를 주고받을 수 있답니다.

🔹 2. 사용자가 입력한 정보를 처리할 때

사용자가 입력하는 정보는 언제나 예측할 수 없어요. 숫자를 입력하라고 했는데 글자를 입력할 수도 있고, 아무것도 입력하지 않을 수도 있거든요.

🔹 3. 인터넷에서 받아온 정보를 처리할 때

웹 사이트, 파일, 데이터베이스 등에서 받아온 정보는 예상과 다를 수 있어요. 인터넷 연결 문제나 정보 형식 변경 등으로 인해 예상하지 못한 종류의 정보가 들어올 수 있답니다.

🔹 4. 상황에 따라 다르게 처리해야 하는 경우

같은 변수에 여러 종류의 값이 들어올 수 있는 상황에서는 종류에 따라 다른 처리를 해야 해요.

⚙️ 실전 사용 방법

typeof를 효과적으로 사용하는 기본적인 방법들을 살펴보겠습니다.

기본 확인 방법:

console.log("값:", 확인할값);
console.log("종류:", typeof 확인할값);

종류별 확인 방법:

let 결과 = typeof 확인할값;
console.log("이 값은 " + 결과 + " 종류입니다.");

여러 개 한번에 확인 방법:

console.log("첫 번째 종류:", typeof 값1);
console.log("두 번째 종류:", typeof 값2);
console.log("세 번째 종류:", typeof 값3);

🧪 직접 해보면서 배우기

이제 실제 상황에서 typeof를 언제 사용해야 하는지 구체적인 예시를 통해 알아보겠습니다.

🔹 첫 번째 예시: 확실한 정보 vs 불확실한 정보

첫 번째 예시에서는 어떤 정보에 typeof가 필요하고 어떤 정보에는 필요 없는지 알아보겠습니다.

// === 내가 직접 만든 확실한 정보들 (typeof 필요 없음) ===
let myName = "김철수";          // 내가 직접 넣은 글자
let myAge = 12;                 // 내가 직접 넣은 숫자
let isStudent = true;           // 내가 직접 넣은 참거짓

console.log("=== 확실한 정보들 ===");
console.log("내 이름:", myName);         // 글자인 걸 확실히 알고 있어요
console.log("내 나이:", myAge);          // 숫자인 걸 확실히 알고 있어요  
console.log("학생 여부:", isStudent);    // 참거짓인 걸 확실히 알고 있어요

// === 다른 곳에서 온 불확실한 정보들 (typeof 필요함) ===
// 친구가 나에게 준 정보라고 가정해봅시다
let friendInfo1 = "안녕";       // 친구가 준 첫 번째 정보
let friendInfo2 = 25;           // 친구가 준 두 번째 정보  
let friendInfo3 = false;        // 친구가 준 세 번째 정보
let friendInfo4;                // 친구가 아직 주지 않은 정보

console.log("\n=== 친구가 준 불확실한 정보들 ===");
console.log("친구 정보1:", friendInfo1, "/ 종류:", typeof friendInfo1);
console.log("친구 정보2:", friendInfo2, "/ 종류:", typeof friendInfo2);
console.log("친구 정보3:", friendInfo3, "/ 종류:", typeof friendInfo3);
console.log("친구 정보4:", friendInfo4, "/ 종류:", typeof friendInfo4);

// typeof 결과를 변수에 저장해서 활용하기
let type1 = typeof friendInfo1;
let type2 = typeof friendInfo2;
let type3 = typeof friendInfo3;  
let type4 = typeof friendInfo4;

console.log("\n=== typeof 결과 정리하기 ===");
console.log("정보1은 " + type1 + " 종류예요.");
console.log("정보2는 " + type2 + " 종류예요.");
console.log("정보3은 " + type3 + " 종류예요.");
console.log("정보4는 " + type4 + " 종류예요.");

🔹 두 번째 예시: 사용자 입력 상황 시뮬레이션

두 번째 예시에서는 사용자가 다양한 종류의 정보를 입력했을 때 typeof로 어떻게 확인하는지 알아보겠습니다.

// 사용자가 입력할 수 있는 다양한 종류의 정보들
let userInput1 = "빨강";        // 사용자가 좋아하는 색깔 입력
let userInput2 = 15;            // 사용자가 나이 입력
let userInput3 = true;          // 사용자가 학생 여부 입력  
let userInput4 = "123";         // 사용자가 숫자를 글자로 입력 (실수!)
let userInput5 = null;          // 사용자가 아무것도 입력하지 않음

console.log("=== 사용자 입력 처리하기 ===");

// 첫 번째 입력 처리
console.log("입력1:", userInput1);
console.log("입력1 종류:", typeof userInput1);
let message1 = "사용자가 입력한 것은 " + typeof userInput1 + " 종류입니다.";
console.log(message1);

// 두 번째 입력 처리
console.log("\n입력2:", userInput2);
console.log("입력2 종류:", typeof userInput2);
let message2 = "사용자가 입력한 것은 " + typeof userInput2 + " 종류입니다.";
console.log(message2);

// 세 번째 입력 처리
console.log("\n입력3:", userInput3);
console.log("입력3 종류:", typeof userInput3);
let message3 = "사용자가 입력한 것은 " + typeof userInput3 + " 종류입니다.";
console.log(message3);

// 네 번째 입력 처리 (문제가 있는 경우)
console.log("\n입력4:", userInput4);
console.log("입력4 종류:", typeof userInput4);
console.log("숫자처럼 보이지만 실제로는 " + typeof userInput4 + " 종류예요!");

// 다섯 번째 입력 처리 (특별한 경우)
console.log("\n입력5:", userInput5);
console.log("입력5 종류:", typeof userInput5);
console.log("null은 특별해서 " + typeof userInput5 + " 종류로 나와요.");

// 모든 입력의 종류를 한눈에 비교해보기
console.log("\n=== 모든 입력 종류 한눈에 보기 ===");
console.log("입력1(" + userInput1 + ") → " + typeof userInput1);
console.log("입력2(" + userInput2 + ") → " + typeof userInput2);
console.log("입력3(" + userInput3 + ") → " + typeof userInput3);
console.log("입력4(" + userInput4 + ") → " + typeof userInput4);
console.log("입력5(" + userInput5 + ") → " + typeof userInput5);

🔹 세 번째 예시: 계산 전에 안전하게 확인하기

세 번째 예시에서는 계산을 하기 전에 typeof로 안전하게 확인하는 방법을 알아보겠습니다.

// 계산에 사용할 다양한 값들 (안전한 것과 위험한 것 섞어서)
let value1 = 10;                // 안전한 숫자
let value2 = 5;                 // 안전한 숫자  
let value3 = "20";              // 위험! 숫자처럼 보이는 글자
let value4 = true;              // 위험! 계산에 참거짓 사용
let value5;                     // 위험! 정의되지 않은 값

console.log("=== 계산 전 안전 확인하기 ===");

// 첫 번째 계산: 안전한 경우
console.log("첫 번째 계산 준비:");
console.log("값1:", value1, "/ 종류:", typeof value1);
console.log("값2:", value2, "/ 종류:", typeof value2);

// 두 값이 모두 숫자인지 확인
let bothNumbers1 = typeof value1 === "number" && typeof value2 === "number";
console.log("둘 다 숫자인가요?", bothNumbers1);

// 안전하니까 계산해보기
let result1 = value1 + value2;
console.log("계산 결과:", result1);

// 두 번째 계산: 위험한 경우
console.log("\n두 번째 계산 준비:");
console.log("값1:", value1, "/ 종류:", typeof value1);
console.log("값3:", value3, "/ 종류:", typeof value3);

// 두 값이 모두 숫자인지 확인
let bothNumbers2 = typeof value1 === "number" && typeof value3 === "number";
console.log("둘 다 숫자인가요?", bothNumbers2);

// 위험하니까 그래도 어떻게 될지 확인해보기
let result2 = value1 + value3;  // "10" + "20" = "1020" (글자 연결됨!)
console.log("계산 결과:", result2);
console.log("예상과 다르죠? 이래서 typeof가 중요해요!");

// 세 번째 계산: 더 복잡한 경우
console.log("\n세 번째 계산 준비:");
console.log("값4:", value4, "/ 종류:", typeof value4);
console.log("값5:", value5, "/ 종류:", typeof value5);

let result3 = value4 + value5;  // true + undefined = NaN
console.log("계산 결과:", result3);
console.log("이상한 결과가 나왔어요!");

// 안전한 계산을 위한 체크 과정
console.log("\n=== 안전한 계산을 위한 체크 ===");
console.log("값1:", value1, "→", typeof value1);
console.log("값2:", value2, "→", typeof value2);
console.log("값3:", value3, "→", typeof value3);
console.log("값4:", value4, "→", typeof value4);
console.log("값5:", value5, "→", typeof value5);

// 안전한 계산 확인
console.log("\n=== 어떤 값들이 계산에 안전한가요? ===");
console.log("값1(" + value1 + ")은 계산에 안전:", typeof value1 === "number");
console.log("값2(" + value2 + ")는 계산에 안전:", typeof value2 === "number");
console.log("값3(" + value3 + ")은 계산에 안전:", typeof value3 === "number");
console.log("값4(" + value4 + ")는 계산에 안전:", typeof value4 === "number");
console.log("값5(" + value5 + ")는 계산에 안전:", typeof value5 === "number");

🔄 typeof 사용 시점 판단하는 순서

지금까지 배운 내용을 바탕으로 typeof를 언제 사용할지 판단하는 순서를 정리해보겠습니다.

1단계: 정보 출처 확인하기

• 내가 직접 만든 변수인가? → typeof 보통 필요 없어요
• 다른 곳에서 온 정보인가? → typeof 고려해보세요

2단계: 확실함 정도 평가하기

• 종류를 완전히 확신할 수 있는가? → typeof 필요 없어요
• 다른 종류가 들어올 가능성이 있는가? → typeof 필요해요

3단계: 사용 목적 고려하기

• 계산에 사용할 예정인가? → typeof로 숫자인지 확인 필요
• 글자 처리에 사용할 예정인가? → typeof로 글자인지 확인 필요
• 단순히 출력만 할 예정인가? → typeof 덜 중요해요

4단계: 안전성 중요도 평가하기

• 잘못되면 큰 문제가 생기는가? → typeof 꼭 필요해요
• 문제가 생겨도 큰 일이 아닌가? → typeof 선택적으로 사용

🧠 자주 하는 실수와 주의할 점

typeof 사용 시점을 판단할 때 초보자들이 자주 하는 실수들을 알아보겠습니다.

❌ 실수 1: 내가 만든 변수에도 typeof를 너무 많이 사용하기

// 필요 없는 확인 (비효율적)
let myScore = 85;                          // 내가 직접 만든 숫자
console.log("점수 종류:", typeof myScore); // 필요 없는 확인
console.log("점수:", myScore);

// 효율적인 방법
let myScore2 = 85;                         // 내가 직접 만든 숫자
console.log("점수:", myScore2);            // 바로 사용하면 돼요

내가 직접 만든 변수는 종류를 확신할 수 있으므로 매번 typeof 확인이 필요 없어요.

❌ 실수 2: 외부에서 온 정보에 typeof를 사용하지 않기

// 위험한 방법: 종류 확인 없이 바로 사용
let someInput = "hello";                   // 다른 곳에서 온 정보
let result = someInput * 2;                // 글자에 곱하기? → NaN 결과
console.log("결과:", result);              // NaN

// 안전한 방법: typeof로 먼저 확인
let someInput2 = "hello";
console.log("입력값:", someInput2);
console.log("입력값 종류:", typeof someInput2);
console.log("숫자가 아니므로 계산하지 않겠습니다.");

다른 곳에서 온 정보는 반드시 종류 확인이 필요해요.

❌ 실수 3: typeof 결과를 잘못 비교하기

// 잘못된 비교
let age = 25;
console.log(typeof age === number);       // 오류! number는 따옴표가 없어요

// 올바른 비교  
let age2 = 25;
console.log(typeof age2 === "number");    // 올바름! "number"는 글자예요

typeof의 결과는 언제나 글자(문자열)이므로 비교할 때 따옴표를 꼭 써야 해요.

🎯 기본 연습 문제들

고요한 오후, 책상 앞에 앉아 차분히 문제를 풀어보는 시간을 가져볼까요.

기본 문제 1. 친구가 준 정보들의 종류 확인하기

// 친구들이 나에게 준 다양한 정보들
let friendGift1 = "초콜릿";       // 첫 번째 친구가 준 선물
let friendGift2 = 5000;           // 두 번째 친구가 준 용돈
let friendGift3 = true;           // 세 번째 친구의 약속 여부
let friendGift4;                  // 네 번째 친구가 아직 안 줌

// 각각의 종류를 확인하고 결과를 출력해보세요
console.log("=== 친구들이 준 선물 확인하기 ===");
console.log("선물1:", friendGift1, "→ 종류:", typeof friendGift1);
console.log("선물2:", friendGift2, "→ 종류:", typeof friendGift2);
console.log("선물3:", friendGift3, "→ 종류:", typeof friendGift3);
console.log("선물4:", friendGift4, "→ 종류:", typeof friendGift4);

// typeof 결과를 변수에 저장해서 활용하기
let gift1Type = typeof friendGift1;
let gift2Type = typeof friendGift2;
let gift3Type = typeof friendGift3;
let gift4Type = typeof friendGift4;

console.log("\n=== 선물 종류 요약 ===");
console.log("첫 번째 선물은 " + gift1Type + " 종류입니다.");
console.log("두 번째 선물은 " + gift2Type + " 종류입니다.");
console.log("세 번째 선물은 " + gift3Type + " 종류입니다.");
console.log("네 번째 선물은 " + gift4Type + " 종류입니다.");

기본 문제 2. 계산 전 안전 확인하기

// 계산할 값들 (안전한 것과 위험한 것이 섞여 있음)
let num1 = 10;              // 확실한 숫자
let num2 = "20";            // 숫자처럼 보이는 글자  
let num3 = 5;               // 확실한 숫자
let num4 = false;           // 숫자가 아닌 참거짓

console.log("=== 계산 전 안전 확인 ===");

// 각 값의 종류 확인
console.log("값1:", num1, "→", typeof num1);
console.log("값2:", num2, "→", typeof num2);
console.log("값3:", num3, "→", typeof num3);
console.log("값4:", num4, "→", typeof num4);

// 숫자인 것들만 골라내기
console.log("\n=== 숫자 찾기 ===");
console.log("값1이 숫자인가요?", typeof num1 === "number");
console.log("값2가 숫자인가요?", typeof num2 === "number");
console.log("값3이 숫자인가요?", typeof num3 === "number");
console.log("값4가 숫자인가요?", typeof num4 === "number");

// 안전한 계산과 위험한 계산 비교
console.log("\n=== 계산 결과 비교 ===");
let safeResult = num1 + num3;    // 숫자 + 숫자
let riskyResult = num1 + num2;   // 숫자 + 글자
console.log("안전한 계산 (10 + 5):", safeResult);
console.log("위험한 계산 (10 + '20'):", riskyResult);
console.log("결과가 다르죠? 이래서 typeof 확인이 중요해요!");

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 마음에 담았는지 확인해보세요.

학습 내용	이해했나요?
typeof 사용 시점 판단	✅
확실한 정보 vs 불확실한 정보 구분	✅
계산 전 안전 확인 방법	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🔄 1단원과 2단원 종합 복습하기

2.5단원까지 차근차근 공부했으니, 1단원과 2단원에서 배운 소중한 내용들을 종합적으로 복습해보는 시간을 가져볼까요?

종합 복습 문제 1. 변수 선언부터 타입 확인까지

// 1단원: 올바른 변수 선언하기
let studentName = "김민지";    // 학생 이름 (변수)
const schoolName = "행복초등학교"; // 학교 이름 (상수)
let studentAge = 9;            // 학생 나이 (변수)
let hasHomework = true;        // 숙제 있는지 (변수)

// 2.5단원: typeof로 타입 확인하기
console.log("=== 학생 정보 및 타입 확인 ===");
console.log("이름:", studentName, "→", typeof studentName);
console.log("학교:", schoolName, "→", typeof schoolName);
console.log("나이:", studentAge, "→", typeof studentAge);
console.log("숙제여부:", hasHomework, "→", typeof hasHomework);

// 값 변경 시도해보기 (1단원 복습)
studentAge = 10;              // let으로 선언했으니 변경 가능
// schoolName = "다른학교";   // const로 선언했으니 변경 불가 (오류!)

console.log("생일 후 나이:", studentAge, "→", typeof studentAge);

종합 복습 문제 2. 연산자와 typeof 조합하기

// 2.1-2.4단원에서 배운 연산자들과 2.5단원 typeof 조합
let score1 = 85;
let score2 = 92;

// 계산 연산자 사용
let total = score1 + score2;
let average = total / 2;

// 비교 연산자 사용  
let isHighScore = average >= 90;

// 논리 연산자 사용
let isPerfect = score1 === 100 && score2 === 100;

// 할당 연산자 사용
score1 += 5;  // 보너스 점수 추가

console.log("=== 연산 결과와 타입 확인 ===");
console.log("총점:", total, "→", typeof total);
console.log("평균:", average, "→", typeof average);
console.log("고득점여부:", isHighScore, "→", typeof isHighScore);
console.log("완벽여부:", isPerfect, "→", typeof isPerfect);
console.log("보너스후 점수1:", score1, "→", typeof score1);

// 모든 결과의 타입이 예상과 같은지 확인
console.log("\n=== 타입 확인 요약 ===");
console.log("total이 숫자인가요?", typeof total === "number");
console.log("average가 숫자인가요?", typeof average === "number");
console.log("score1이 숫자인가요?", typeof score1 === "number");
console.log("isHighScore가 불린인가요?", typeof isHighScore === "boolean");
console.log("isPerfect가 불린인가요?", typeof isPerfect === "boolean");

지금까지 typeof 연산자를 언제 사용해야 하는지에 대한 실전 가이드를 자세히 알아보았습니다. 핵심은 확실하지 않은 곳에 typeof를 사용하는 것이에요. 내가 직접 만든 변수들은 대부분 확인이 필요 없지만, 다른 곳에서 온 정보는 언제나 종류 확인이 필요하답니다. 이런 원칙을 잘 지키면 안전하면서도 효율적인 코드를 작성할 수 있어요.

📂 마무리 정보

오늘 배운 2.5.2 내용이 여러분의 자바스크립트 지식 상자에 잘 자리잡았나요? 다음 시간에는 더욱 흥미로운 내용으로 만나뵙겠습니다.

기억할 점: typeof는 확실하지 않을 때만 사용하는 것이 현명해요. 너무 많이 사용하면 코드가 복잡해지고, 너무 적게 사용하면 예상치 못한 문제가 생길 수 있어요. 적절한 균형을 찾는 것이 중요하답니다.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---