Type checking using typeof in Javascript - Mini Project: Build & Apply

Type Checking Using typeof in JavaScript

📖 Scenario: Imagine you are building a simple web app that needs to check the type of different values entered by users. This helps the app decide how to handle each value correctly.

🎯 Goal: You will create variables with different types of values, then use typeof to check their types and print the results.

📋 What You'll Learn

Create variables with different types: string, number, boolean, and object

Create a variable to hold the type of one of the values using typeof

Use typeof inside a loop to check types of all variables

Print the type of each variable

💡 Why This Matters

🌍 Real World

Type checking helps programs handle different kinds of data safely, like checking if a user input is a number before doing math.

💼 Career

Understanding data types and how to check them is a basic skill for any JavaScript developer, useful in debugging and writing reliable code.

1

Create variables with different types

Create four variables with these exact names and values: name with value "Alice", age with value 30, isStudent with value true, and details with value { city: "Paris" }.

Javascript

// Create variables name, age, isStudent, and details with the exact values
// Your code here

Hint

Use const to create variables and assign the exact values given.

2

Create a variable to hold the type of name

Create a variable called typeOfName and set it to the type of the variable name using typeof.

Javascript

const name = "Alice";
const age = 30;
const isStudent = true;
const details = { city: "Paris" };

// Create variable typeOfName using typeof on name
// Your code here

Hint

Use typeof name to get the type of name.

3

Check types of all variables using a loop

Create an array called variables containing name, age, isStudent, and details. Then use a for loop with variable value to iterate over variables and create an array called types that stores the type of each value using typeof.

Javascript

const name = "Alice";
const age = 30;
const isStudent = true;
const details = { city: "Paris" };

const typeOfName = typeof name;

// Create array variables with name, age, isStudent, details
// Create empty array types
// Use for loop with value to fill types with typeof value
// Your code here

Hint

Put the variables in an array, then loop over it and use typeof on each item.

4

Print the types of all variables

Use console.log to print the types array.

Javascript

const name = "Alice";
const age = 30;
const isStudent = true;
const details = { city: "Paris" };

const typeOfName = typeof name;

const variables = [name, age, isStudent, details];
const types = [];
for (const value of variables) {
    types.push(typeof value);
}

// Print the types array
// Your code here

Hint

Use console.log(types) to show the array of types.

Practice

1. What does the typeof operator return when used on the value 42?

easy

A. "string"

B. "object"

C. "boolean"

D. "number"

Solution

1. Step 1: Understand the value type

   The value 42 is a number in JavaScript.

2. Step 2: Apply typeof operator

   Using typeof 42 returns the string "number" because 42 is a numeric value.

3. Final Answer:

   "number" -> Option D

4. Quick Check:

   typeof 42 = "number" [OK]

Hint: Remember: numbers return "number" with typeof [OK]

Common Mistakes:

• Thinking numbers return "string"
• Confusing number with object
• Using typeof without parentheses

2. Which of the following is the correct syntax to check if variable x is a string using typeof?

easy

A. if (typeof x = 'string') {}

B. if (typeof x === 'string') {}

C. if (typeof(x) == string) {}

D. if (typeof x === string) {}

Solution

1. Step 1: Check correct operator usage

   The strict equality operator is ===, so typeof x === 'string' is correct.

2. Step 2: Check string quotes and parentheses

   The type name must be a string literal in quotes, and parentheses around x are optional.

3. Final Answer:

   if (typeof x === 'string') {} -> Option B

4. Quick Check:

   Use === 'string' with quotes [OK]

Hint: Use triple equals and quotes around type name [OK]

Common Mistakes:

• Using single equals (=) instead of triple (===)
• Missing quotes around 'string'
• Using typeof without quotes for type

3. What will be the output of the following code?

console.log(typeof null);

medium

A. "null"

B. "undefined"

C. "object"

D. "boolean"

Solution

1. Step 1: Understand the value null

   In JavaScript, null is a special value representing "no object".

2. Step 2: Apply typeof to null

   Due to a historical bug, typeof null returns "object" instead of "null".

3. Final Answer:

   "object" -> Option C

4. Quick Check:

   typeof null = "object" [OK]

Hint: Remember: typeof null returns "object" (quirk) [OK]

Common Mistakes:

• Expecting "null" as output
• Confusing with "undefined"
• Thinking null is a boolean

4. Find the error in this code snippet:

let val = 10;
if (typeof val = "number") {
  console.log("It's a number");
}

medium

A. Using single equals (=) instead of comparison operator

B. Missing semicolon after let declaration

C. Incorrect quotes around "number"

D. typeof cannot be used on variables

Solution

1. Step 1: Check the if condition syntax

   The condition uses = which is assignment, not comparison.

2. Step 2: Correct operator for comparison

   Use === or == to compare the result of typeof val with "number".

3. Final Answer:

   Using single equals (=) instead of comparison operator -> Option A

4. Quick Check:

   Use === for comparison, not = [OK]

Hint: Use === for comparison, not = [OK]

Common Mistakes:

• Using = instead of === in if conditions
• Thinking typeof returns variable type directly
• Ignoring quotes around type string

5. You want to write a function isStringOrNumber that returns true if the input is either a string or a number, and false otherwise. Which of the following implementations is correct?

hard

A. function isStringOrNumber(value) { return typeof value === 'string' || typeof value === 'number'; }

B. function isStringOrNumber(value) { return typeof value === 'string' && typeof value === 'number'; }

C. function isStringOrNumber(value) { return typeof value == 'string' && typeof value == 'number'; }

D. function isStringOrNumber(value) { return typeof value = 'string' || typeof value = 'number'; }

Solution

1. Step 1: Understand the requirement

   The function should return true if the value is a string OR a number.

2. Step 2: Check logical operators and comparisons

   function isStringOrNumber(value) { return typeof value === 'string' || typeof value === 'number'; } uses || (OR) and strict equality ===, which is correct.

3. Step 3: Identify errors in other options

   function isStringOrNumber(value) { return typeof value === 'string' && typeof value === 'number'; } and the option using == uses AND &&, which requires both types simultaneously (impossible). function isStringOrNumber(value) { return typeof value = 'string' || typeof value = 'number'; } uses assignment = instead of comparison.

4. Final Answer:

   function isStringOrNumber(value) { return typeof value === 'string' || typeof value === 'number'; } -> Option A

5. Quick Check:

   Use OR (||) and === for type checks [OK]

Hint: Use || for OR and === for type checks [OK]

Common Mistakes:

• Using && instead of || for OR condition
• Using = instead of === for comparison
• Mixing == and === inconsistently