Understanding Primitive Data Types

Primitive vs. Non-Primitive Data

At a high level, JavaScript data types are split into two main categories.

1. Primitive Types: These are the simplest, most fundamental building blocks of data. They represent a single, immutable value.
2. Non-Primitive (or Reference) Types: These are more complex data structures, like objects and arrays, which can hold collections of data. We will cover these in a future module.

The concept of a value being "immutable" can be tricky. It doesn't mean a variable's value can't change; you can reassign a new value to a variable declared with let. Instead, it means the original value itself cannot be altered. For example, you can't change the number 5 into the number 6; you can only replace the value 5 in a variable with the value 6.

The following video offers a helpful analogy to distinguish between primitive and complex (reference) values.

Now, let's examine the primitive types you'll use every day.

The Core Primitive Types

We will focus on five primitive types. For a comprehensive reference, the article "Data types" from javascript.info is an excellent resource. We'll refer to specific parts of it as we go.

1. String

A string is used to represent text. It's a sequence of characters enclosed in single quotes ('...'), double quotes ("..."), or backticks (`...`). In the context of QA, you'll use strings constantly to check for text on a webpage, fill out form fields, or verify error messages.

let testCaseName = 'User Login with Valid Credentials';
const expectedErrorMessage = "Password is required.";
let browserName = `Chrome`;

There's no practical difference between single and double quotes, but it's good practice to be consistent within a project. Backticks enable advanced features like embedding variables directly into a string, which we will cover in a later lesson.

You can find a concise definition in the javascript.info article you just opened.

2. Number

The number type represents both integers (e.g., 100) and floating-point (decimal) numbers (e.g., 99.9). You'll use numbers for calculations, counting elements, or asserting values like prices or quantities.

let numberOfItemsInCart = 3;
const passRate = 98.5;
let timeoutInSeconds = 30;

JavaScript's number type also includes a few special numeric values that are important to recognize, as they often indicate an error or an edge case in an application.

• Infinity: Represents the mathematical infinity (∞), for example, the result of dividing by zero (1 / 0).
• NaN (Not-a-Number): Represents a computational error, such as trying to perform a math operation on a non-numeric string ('test' / 2).

If you see NaN as the result of a calculation in your tests, it's a clear sign that an invalid value was used somewhere in the process.

3. Boolean

The boolean type is a logical entity that can only have one of two values: true or false. Booleans are the foundation of decision-making in programming. In test automation, you'll use them to check conditions: Is an element visible? Is a checkbox selected? Did the test pass?

let isUserLoggedIn = true;
const isTestPassed = false;
let elementIsVisible = 4 > 1; // This expression evaluates to true

The Future Fullstack video provides excellent real-world examples of how booleans are used in web interfaces.

4. Undefined and 5. Null

These two types represent the absence of a value, but they have distinct meanings. The difference is a common point of confusion for beginners, but it's simple once you grasp the intent behind each.

• undefined: This is JavaScript's way of saying a value has not been assigned. If you declare a variable without giving it a value, its value is undefined. It signifies an unintentional absence of value.

  let testResult;
  console.log(testResult); // Output: undefined
  

• null: This is a value that a programmer can explicitly assign to a variable to signify an intentional absence of value. You are deliberately stating, "This variable has no value."

  let selectedUser = null; // We explicitly state no user is selected yet
  

As a rule of thumb: undefined is what you get from the system when something is uninitialized. null is what you, the programmer, use to indicate "nothing" or "empty."

This video and article provide clear demonstrations.

Identifying Data Types in Practice

Since JavaScript is dynamically typed, a variable can hold a number at one moment and a string at another. This is powerful but means you sometimes need to check what type of data a variable currently holds, especially when debugging.

The typeof operator is your tool for this. It returns a string indicating the type of the value.

let myVar = "Hello";
console.log(typeof myVar); // Output: "string"

myVar = 100;
console.log(typeof myVar); // Output: "number"

myVar = true;
console.log(typeof myVar); // Output: "boolean"

There's one famous exception you saw in the GreatStack video:

console.log(typeof null); // Output: "object"

This is a long-standing bug in JavaScript that has been kept for compatibility reasons. Just remember that null is a primitive type, despite what typeof says.

Conclusion

You've now been introduced to the fundamental units of data in JavaScript. These primitive types are the atoms that combine to form all the complex data structures you will work with.

Key Takeaways:

• JavaScript has two main categories of data types: primitive and non-primitive.
• Primitive types represent a single, immutable value. The five you will use most often are:
  • String: For text.
  • Number: For all numeric values, including integers and decimals.
  • Boolean: For logical states (true/false).
  • Undefined: Represents a variable that has been declared but not assigned a value.
  • Null: Represents the intentional absence of a value, set by a programmer.
• JavaScript is dynamically typed, meaning a variable's type is determined by the value it holds and can change during execution.
• The typeof operator is a practical tool for checking a variable's current data type during development and debugging.

In our next lesson, we will explore operators. Now that you have data, you'll learn how to perform actions with it—doing arithmetic with numbers, comparing values to get booleans, and combining strings. This will also introduce the important concept of type coercion, where JavaScript automatically converts data from one type to another.