Primitive Data Types: Building Blocks of Data

Why This Matters: Primitive data types are the fundamental building blocks of all data in JavaScript. Understanding them is crucial for writing correct code and predicting how your variables will behave.

In JavaScript, every value has a data type. Data types categorize values, determining what kind of operations can be performed on them. JavaScript has a set of built-in data types, broadly categorized into primitives and objects.

Primitive data types are the most fundamental and are immutable (meaning their value cannot be changed after creation). When you perform an operation on a primitive, you always get a new primitive value, rather than modifying the original.

There are seven primitive data types in JavaScript:

1. String
2. Number
3. Boolean
4. null
5. undefined
6. Symbol (introduced in ES6)
7. BigInt (introduced in ES2020)

Let's explore each of them.

---

1. String

A String represents textual data. It is a sequence of characters.

Declaration: Strings can be declared using:

• Single quotes: 'Hello World'
• Double quotes: "Hello World"
• Backticks (template literals): `Hello World` (useful for embedding variables and multi-line strings, covered more in ES6+ features).

Practice: Working with Strings

Experiment with different ways to declare strings. Try to change a character in a string and observe the output to understand immutability.

---

2. Number

The Number type represents both integer and floating-point (decimal) numbers.

Practice: Exploring Numbers and Special Values

Declare different types of numbers and observe JavaScript's special numeric values like Infinity and NaN.

---

3. Boolean

The Boolean type represents a logical entity and can only have two values: true or false. It's fundamental for control flow and decision-making in your code.

Practice: Boolean Values

Declare boolean variables directly and by using comparison operations.

---

4. null

null is a special primitive value that represents the intentional absence of any object value. It indicates that a variable has been explicitly assigned "no value" or "nothing."

Key points:

• It is a primitive value.
• Its typeof operator returns 'object'. This is a long-standing bug in JavaScript that cannot be fixed without breaking existing code. Treat null as a primitive despite this typeof behavior.

Practice: Understanding null

Declare a variable and explicitly set it to null. Observe its value and typeof result.

---

5. undefined

undefined is a primitive value that indicates a variable has been declared but not yet assigned a value. It also signifies the absence of a value for function arguments that were not provided or missing object properties.

Key points:

• It is a primitive value.
• Its typeof operator returns 'undefined'.

Practice: Understanding undefined

Declare variables without assigning values, access non-existent object properties, and call functions without required arguments to see undefined in action.

---

6. Symbol (ES6)

A Symbol is a unique and immutable primitive value. It's primarily used to create unique object property keys to avoid name collisions.

Declaration: Created by calling the Symbol() function.

Practice: Using Symbol for Unique Keys

Create symbols and use them as object property keys to understand their unique nature.

---

7. BigInt (ES2020)

BigInt is a primitive data type that can represent integers with arbitrary precision (numbers larger than 2^53 - 1 or smaller than -(2^53 - 1), which is the maximum/minimum range for standard Number types).

Declaration: Created by calling the BigInt() constructor with a string or number.

Practice: Working with BigInt

Explore how to declare and perform operations with BigInt. Pay attention to the rule about not mixing BigInt with Number types directly.

---

Exercise: Exploring All Primitives

In the editor below, complete the following tasks. Use console.log() to display the value and typeof each variable after declaration.

---

---

var, let, and const: Declaring Variables

Why This Matters: Understanding how to declare variables using var, let, and const is fundamental to writing modern, bug-free, and maintainable JavaScript. Each keyword has distinct rules that impact variable scope, re-declaration, and re-assignment, directly affecting your code's predictability.

In JavaScript, a variable is a named storage location that holds a value. Think of it like a labeled box where you can put different items (data). Before you can use a variable, you must declare it.

Historically, JavaScript only had one way to declare variables: var. However, with the introduction of ES6 (ECMAScript 2015), let and const were added to address some of the shortcomings of var and provide more control over how variables behave.

Understanding the differences between var, let, and const is fundamental to writing modern, bug-free JavaScript.

---

1. The Old Way: var

The var keyword has been around since the beginning of JavaScript. While still functional, it has some characteristics that can lead to unexpected behavior, especially for beginners.

Key Characteristics of var:

• Function-scoped: var variables are scoped to the nearest function block. If declared outside any function, they are globally scoped. This means they ignore block-level scopes like if statements or for loops.
• Can be re-declared: You can declare the same var variable multiple times in the same scope without an error. The later declaration simply overwrites the previous one.
• Can be re-assigned: You can change the value of a var variable any number of times.
• Hoisting (initialized with undefined): var declarations are "hoisted" to the top of their function or global scope. This means you can reference a var variable before it's physically declared in the code, and it will be initialized with undefined.

Example of var:

Because of var's loose scoping and re-declaration allowance, it's easy to accidentally overwrite variables, especially in larger codebases, leading to bugs.

---

2. The Modern Way: let

Introduced in ES6, let provides a more intuitive and safer way to declare variables.

Key Characteristics of let:

• Block-scoped: let variables are scoped to the nearest enclosing block ({}). This means they are limited to the if statements, for loops, or any other code block where they are declared.
• Cannot be re-declared: You cannot re-declare a let variable within the same scope. Doing so will result in a SyntaxError.
• Can be re-assigned: You can change the value of a let variable any number of times.
• Hoisting (Temporal Dead Zone): let declarations are also hoisted, but unlike var, they are not initialized with undefined. Accessing a let variable before its declaration will result in a ReferenceError. This period between hoisting and declaration is called the Temporal Dead Zone (TDZ).

Example of let:

let is generally preferred when you know the variable's value will change during its lifecycle.

---

3. The Constant Way: const

Also introduced in ES6, const is used for declaring constants, variables whose values should not change once they are initialized.

Key Characteristics of const:

• Block-scoped: Like let, const variables are block-scoped.
• Cannot be re-declared: You cannot re-declare a const variable within the same scope.
• Cannot be re-assigned: The most important characteristic: once a const variable is assigned a value, you cannot change it. Any attempt to re-assign will result in a TypeError.
• Must be initialized: You must assign a value to a const variable at the time of its declaration. You cannot declare it without a value.
• Hoisting (Temporal Dead Zone): Like let, const declarations are also hoisted but are in the Temporal Dead Zone until declared.

Example of const:

The const keyword doesn't make the value immutable (unchangeable) if it's an object or array; it makes the binding (the variable name pointing to that specific memory address) constant.

---

4. Choosing Between var, let, and const

For modern JavaScript development (ES6+), the general best practice is:

1. Always start with const: If you declare a variable and don't expect its value to change throughout its lifetime, use const. This makes your code more predictable and prevents accidental re-assignments.
2. If you need to re-assign, use let: If you know a variable's value will need to change (e.g., a counter in a loop, a variable storing user input that gets updated), then use let.
3. Avoid var: Rarely, if ever, use var in new code. Its function-scoping and re-declaration behavior can lead to bugs and is less intuitive than block-scoping. Most linting tools will flag var as a warning or error.

By consistently using const and let, you'll write cleaner, safer, and more maintainable JavaScript code.

---

Exercise: Variable Declarations

In the editor below, complete the following tasks: