Mona Alfonso

Mona Alfonso

Web Developer and Educator with 5+ years of experience in tech.

At the beginning of many lessons, you will be presented with some code with no explanations. This approach, rooted in an implicit learning technique, enlists your curiosity and puts your brain -- a remarkable pattern-recognition machine -- to work in trying to make sense of this new information.

This initial, unguided interaction with the material primes your mind, making you more receptive to the upcoming explanations. When the formal explanation is given below, you will find that the concepts click into place more readily. This is because you have already observed the code in action and begun the subconscious process of piecing it together. This method not only enhances the absorption of new information but also encourages a deeper, more intuitive understanding of the subject matter.

That said, here is your first set of code examples. Read over the code, even if you don't yet understand it, and just take it in. Notice things that are similar, and things that are different from each other. Enjoy the idea that soon all of this code will make perfect sense!

Review These Examples

You might begin to distinguish three different types of data exemplified in the list above, your first five Primitive Data Types in JavaScript: strings, numbers, booleans, undefined, and null.

Primitive Data Types Explainer

In JavaScript, Primitive Data Types are the basic building blocks of data, similar to how letters are the basic elements of written languages. Just as you use letters to form words and sentences, in JavaScript, you use primitive data types to construct more complex data structures and logic. There are five basic primitive data types in JavaScript:

  1. Strings: Comparable to words or sentences in natural language. A string in JavaScript is a sequence of characters bounded by single or double quotes. Characters can be letters, numbers, symbols, or spaces. For example, "Hello, world!" and 'Hello, world!' are both valid strings.

  2. Numbers: In JavaScript, a number can be an integer like 42, or a floating-point decimal like 3.14. Numbers can also be positive like 42 or negative -3.14. They are used for mathematical operations, much like how we use numbers in everyday counting and calculations.

  3. Booleans: These are like the true or false answers in a conversation. In JavaScript, a boolean has two possible values: true or false. It's often used in decision-making processes in the code, similar to how yes/no questions are used in dialogue.

  4. Undefined: This is akin to an unanswered question in a conversation. In JavaScript, undefined is a type that represents a variable that has been declared but not assigned a value.

  5. Null: Imagine if in a conversation, someone deliberately says "nothing" as their response. In JavaScript, null is a type that represents a deliberate non-value. It's like a placeholder for "no value."

There are a couple more recently introduced Primitive Data Types, namely BigInt and Symbol, which are less commonly encountered in beginner-level JavaScript. You won't need to delve into these until you're more comfortable with the basics, so it's fine to set them aside for now.

Using the typeof Operator

Take a look at the examples above again, do you see anything that doesn't yet make sense?

JAVASCRIPT

42
"Hello, world!" 
3.14 
true <--- 
-15 
'single quote string' 
undefined null 
100 <--- 
'42' 
"false" 
0 
"100" <--- 
false 
"" <--- 
'null' 
"3.14" 
NaN <--- 
'undefined' 
'empty' 
"true" <---
yes

Why are true and 'true' different in color? Same for 100 and "100". And what about ""? What is NaN?

In these examples, we are dealing with different data types. We can actually check the data type of any value using the typeof operator:

console.log(typeof true); // Should return 'boolean' 
console.log(typeof 'true'); // Should return 'string' 
console.log(typeof 100); // Should return 'number' 
console.log(typeof "100"); // Should return 'string' 
console.log(typeof ""); // Should return 'string' 
console.log(typeof NaN); // Surprisingly, this will return 'number'

The console.log() in JavaScript is a debugging function used to print messages or values to the browser's console, providing a way to inspect variables and track code execution. It's essential for testing and debugging JavaScript code.

This code will output the type of each value, helping to clarify why they are represented differently due to their differing data types.

  • true is a boolean but 'true' is a string

  • 100 is a number but "100" is a string

  • "" is an empty string, and is still valid

  • NaN is a number

NaN stands for "Not a Number" but is actually of the type number, which often confuses new developers. This is one of two Number types in addition to integers: NaN and Infinity. Infinity is a special numeric value that represents infinity. It's what you get when you divide a number by zero, or when a number exceeds the upper limit of what can be represented with a normal floating-point number. But you are not likely to see Infinity very much, so you can set it aside for now.

In sum, the typeof operator in JavaScript is used to determine the type of a given variable or value. It's especially useful for understanding how JavaScript treats different types of values, such as numbers, strings, booleans, and as we'll see later, more complex structures like objects and arrays.

Here are the examples above, organized into their different Primitive Data Type categories:

// Strings 
"Hello, world!" 
'single quote string' 
'42' 
"false" 
"100" 
"" 
'null' 
"3.14" 
'undefined' 
'empty' 
"true" 
 
// Numbers 
42 
3.14 
-15 
100 
0 
NaN 
 
// Booleans 
true 
false 
 
// Undefined 
undefined 
 
// Null 
null

🎉 Congrats, you've completed your first lesson! When you're ready, you can move on to the next lesson.