What is typeof?
The typeof operator tells you what type of data you're working with. This is super useful for debugging and making sure your code works correctly!
Basic Syntax
⚡ javascript
1
2
3
4
5
6
7
8
const age = 12
console.log(typeof age) // 'number'
const name = 'Alex'
console.log(typeof name) // 'string'
const isStudent = true
console.log(typeof isStudent) // 'boolean'Why use typeof?
- Check if a variable is the type you expect
- Prevent errors before they happen
- Debug your code more easily
- Write safer, more reliable programs
Common Data Types
JavaScript has several basic data types. Let's see what typeof returns for each!
⚡ javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Number
console.log(typeof 42) // 'number'
console.log(typeof 3.14) // 'number'
console.log(typeof -100) // 'number'
// String
console.log(typeof 'hello') // 'string'
console.log(typeof 'world') // 'string'
console.log(typeof 'template') // 'string'
// Boolean
console.log(typeof true) // 'boolean'
console.log(typeof false) // 'boolean'
// Undefined
console.log(typeof undefined) // 'undefined'
let x
console.log(typeof x) // 'undefined'
// Object
console.log(typeof {}) // 'object'
console.log(typeof []) // 'object' (arrays are objects!)
console.log(typeof null) // 'object' (this is a quirk!)
// Function
console.log(typeof function(){}) // 'function'Important Notes:
- Arrays return 'object' (not 'array')
- null returns 'object' (this is a known JavaScript quirk)
- typeof always returns a string
Using typeof in Real Code
Here are practical examples of using typeof to write better code:
Checking Before Using
⚡ javascript
1
2
3
4
5
6
7
8
9
function double(number) {
if (typeof number !== 'number') {
return 'Error: Please provide a number!'
}
return number * 2
}
console.log(double(5)) // 10
console.log(double('hello')) // Error: Please provide a number!Handling Different Types
⚡ javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function describe(value) {
const type = typeof value
if (type === 'number') {
return \`This is the number: \${value}\`
} else if (type === 'string') {
return \`This is the text: \${value}\`
} else if (type === 'boolean') {
return \`This is \${value ? 'true' : 'false'}\`
} else {
return \`This is a \${type}\`
}
}
console.log(describe(42)) // This is the number: 42
console.log(describe('hi')) // This is the text: hi
console.log(describe(true)) // This is trueValidating Input
⚡ javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createUser(name, age) {
// Check if inputs are the right type
if (typeof name !== 'string') {
return 'Name must be text!'
}
if (typeof age !== 'number') {
return 'Age must be a number!'
}
return { name, age }
}
console.log(createUser('Sam', 12)) // { name: 'Sam', age: 12 }
console.log(createUser('Sam', '12')) // Age must be a number!Special Cases and Quirks
JavaScript has some interesting quirks with typeof. Let's explore them!
The null Quirk
⚡ javascript
1
2
3
4
5
6
7
console.log(typeof null) // 'object' (This is a bug in JavaScript!)
// Better way to check for null
const value = null
if (value === null) {
console.log('This is null')
}Arrays Are Objects
⚡ javascript
1
2
3
4
5
6
const myArray = [1, 2, 3]
console.log(typeof myArray) // 'object'
// Better way to check for arrays
console.log(Array.isArray(myArray)) // true
console.log(Array.isArray({})) // falseNaN is a Number!
⚡ javascript
1
2
3
4
5
6
const notANumber = NaN
console.log(typeof notANumber) // 'number' (confusing but true!)
// Check if something is actually NaN
console.log(isNaN(notANumber)) // true
console.log(isNaN(42)) // falseRemember:
- Use === null to check for null specifically
- Use Array.isArray() to check for arrays
- Use isNaN() to check for NaN values
Challenge: Type Detective
Enter different values and see what typeof returns! Try numbers, text, true, false, null, undefined.
Quick Reference:
typeof 42 → "number"typeof "hi" → "string"typeof true → "boolean"typeof undefined → "undefined"typeof {} → "object"typeof [] → "object"