Primitive Data Types

At the beginning of many lessons, you will be presented with some code and 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 offered, 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 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!

Primitive Data Type Examples¶

You might begin to distinguish different types of data exemplified in the list above: 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: In JavaScript, undefined is a type that represents a variable that has been declared but not assigned a value. This is akin to an unanswered question in a conversation. If someone asks you, "What are you doing?" And you don't answer, the questions is out there but it has no answer yet.

5. Null: Imagine again that someone asks you, "What are you doing?," and you say "nothing" in response. The question now has a value, but it is an explicitly 'falsey' or negative value. In JavaScript, null represents a deliberate negative, falsey value.

There are a couple more recently introduced Primitive Data Types, namely BigInt and Symbol, which are less commonly encountered and not necessary to know for new learners. it is fine to set these 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" <---

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

Practice Problems¶

Open up your text editor or a coding sandbox like Codepen or Replit and practice writing the following.

1. Write a number that represents your age.
2. Write a boolean value that represents whether you are a student or not.
3. Write a string that contains your favorite quote.
4. Check the type of data represented by the current year, i.e., 2024.
5. Write a boolean value that represents whether JavaScript is a programming language or not.
6. Write a string that contains your favorite color.
7. Write a number that represents the addition of 5 plus 5.
8. Is the sky is blue or not? Check the type of data of your answer (could be different types, depending on how you answer this question).
9. Write a string that contains your favorite food.
10. Write a string that represents the value of pi (3.14159...).

Practice with AI¶

Use the prompt below to get even more practice problems and to interact with an Large Language Model / AI of your choice:

Act as my JavaScript tutor. I am a beginner learning about primitive data types in JavaScript for the first time. Generate 10 practice problems that require writing different types of primitive data in JavaScript (strings, numbers, booleans, undefined, and null), based on the extracurricular interest or hobby of [insert your interest or hobby here]. Only provide the problem statements, not the answers.

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