Type checking using typeof in Javascript - Step-by-Step Execution

Concept Flow - Type checking using typeof

Start

↓

Evaluate expression

↓

Apply typeof operator

↓

Return type as string

↓

Use type info (e.g., if, print)

↓

End

The program evaluates a value, applies the typeof operator to get its type as a string, then uses that type information.

Execution Sample

Javascript

let x = 42;
console.log(typeof x);

let y = 'hello';
console.log(typeof y);

This code checks the types of variables x and y and prints them.

Execution Table

Step	Expression	typeof Result	Action	Output
1	x = 42	number	Assign 42 to x
2	typeof x	number	Check type of x	number
3	console.log(typeof x)	number	Print type of x	number
4	y = 'hello'	string	Assign 'hello' to y
5	typeof y	string	Check type of y	string
6	console.log(typeof y)	string	Print type of y	string
7			End of code

💡 All expressions evaluated, program ends.

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
x	undefined	42	42	42
y	undefined	undefined	'hello'	'hello'

Key Moments - 2 Insights

Why does typeof return a string like "number" instead of the value itself?

Because typeof always returns the type of the value as a string, not the value. See execution_table step 2 and 5 where typeof x and typeof y return "number" and "string".

What happens if we use typeof on a variable that is not defined?

Using typeof on an undeclared variable returns "undefined" without error. This is safe unlike directly accessing the variable. This is not shown here but is important to know.

Visual Quiz - 3 Questions

Look at the execution table, what is the output of typeof x at step 2?

A "string"

B "number"

C 42

D undefined

💡 Hint

Check the 'typeof Result' column at step 2 in the execution_table.

At which step is the variable y assigned a value?

A Step 4

B Step 5

C Step 1

D Step 6

💡 Hint

Look at the 'Action' column for assignment actions in the execution_table.

If we changed x to true, what would typeof x return?

A "string"

B "number"

C "boolean"

D "object"

💡 Hint

Recall typeof returns the type as a string; true is a boolean type.

Concept Snapshot

typeof operator returns the type of a value as a string.
Syntax: typeof value
Common results: "number", "string", "boolean", "undefined", "object", "function".
Useful for checking variable types before using them.
Safe to use on undeclared variables (returns "undefined").

Full Transcript

This visual execution shows how the typeof operator works in JavaScript. First, variables x and y are assigned values 42 and 'hello'. Then, typeof is applied to each variable, returning their types as strings: "number" for x and "string" for y. These results are printed to the console. The variable tracker shows how x and y change from undefined to their assigned values. Key moments clarify that typeof returns a string describing the type, not the value itself, and that using typeof on undeclared variables is safe. The quiz tests understanding of the typeof results and variable assignments.

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