JavaScript Coding Day 9 | JavaScript Data Types: A Practical Guide using typeof

JavaScript Data Types: A Practical Guide using typeof
Watch the lesson tutorial  🔻


When learning JavaScript, one of the first concepts you encounter is Dynamic Typing. Unlike some other languages, you don't need to define the data type (like Integer or String) when declaring a variable. JavaScript figures it out automatically.

To see this in action, we use the typeof operator. This operator inspects a variable and tells you what kind of data it holds.

Let’s look at some practical examples to understand how JavaScript categorizes different values.

1. Checking Number Types

In JavaScript, there is no distinction between integers (whole numbers) and floats (decimals). They are all simply considered "numbers."

HTML

<script>
    var x = 40;
    console.log(typeof x);
    // Output: "number"
</script>

Explanation:

Even though 40 is a whole number, JavaScript sees it as a numeric value. The output is "number".

---

2. The Difference Between Numbers and Strings

A common mistake for beginners is confusing numbers with strings containing numbers. If you wrap a number in quotes, it stops being a number.

HTML

<script>
    var y = "40";
    console.log(typeof y);
    // Output: "string"
</script>

Explanation:

Because 40 is wrapped in double quotes (""), JavaScript treats it as text. You cannot perform mathematical calculations (like addition or subtraction) on this variable directly without converting it first.

---

3. Standard String Variables

This is the most common way to store text. A string is simply a series of characters used to represent text.

HTML

<script>
    var z = "Chirucodes";
    console.log(typeof z);
    // Output: "string"
</script>

Explanation:

Here, z holds the value "Chirucodes". Since it is text inside quotes, the type is "string".

---

4. Boolean Logic

Booleans are data types that can only have two values: true or false. They are essential for writing logic (like if/else statements).

HTML

<script>
    var a = false;
    console.log(typeof a);
    // Output: "boolean"
</script>

Explanation:

Notice that false is written without quotes. This is a special keyword in JavaScript. If you wrote "false" (with quotes), it would become a string!

---

5. Complex Objects: The Set

JavaScript has a generic type called object which covers complex data structures like Arrays, Maps, and Sets.

Note: I fixed a small error here. JavaScript is case-sensitive, so new set() will cause a crash. It must be written as new Set().

HTML

<script>
    // Corrected: 'Set' must be capitalized
    var b = new Set(); 
    console.log(typeof b);
    // Output: "object"
</script>

Explanation:

A Set is a collection of unique values. When we check its type, JavaScript returns "object" because almost all non-primitive data types in JavaScript are technically objects.

---

6. Working with Dates

Dates are typically used to store time and calendar information. However, there is no dedicated "date" data type in JavaScript's core definitions—they are also objects.

HTML

<script>
    var c = new Date();
    console.log(typeof c);
    // Output: "object"
</script>

Explanation:

When you create a new Date(), you are creating an instance of a Date object. Therefore, the typeof operator identifies it as an "object".

---

Summary Table

Variable Value	Type returned
40	number
"40"	string
"Chirucodes"	string
false	boolean
new Set()	object
new Date()	object

Run Today's Lesson Codes on NextLeap (Click Here)

- by Chirana Nimnaka