JavaScript Data Types Primitive vs Non-Primitive

Good day Everyone! Today we will discuss the Data Types of JavaScript Primitive and Non-Primitive. Learn alongside me, and share your own insights. Enjoy the read!

Goals and Objectives in this topic:

• Understand the concept of Data Types:

  • Grasp the fundamental idea of data types in JavaScript.

• Differentiate Between Primitive and Non-Primitive Data Types:

  • Clearly distinguish between primitive and non-primitive types.

• Understand the immutability of primitive and mutability of non-primitive types

In JavaScript, data types define the kind of data a variable can hold and how that data is stored and manipulated.

There are two main categories of data types:

1. Primitive Data Types:

Primitive data types represent simple, fundamental values. They are immutable, meaning their values cannot be changed directly after they are assigned. When you reassign a new value to a primitive variable, a new memory location is created to store the new value.

Here's a simple example to illustrate the immutability of primitive types:

var age = 12;

age = 2; 

1. Memory Allocation and Assignment:

• Initially, age is declared with var. It gets assigned undefined (default for var).

• Then, age is assigned the value 12.

• Memory is allocated in the Heap to store this value.

2. Reassignment:

• When you write age = 2;, a new memory location is allocated in the Heap to store the value 2.

• The variable age now references this new memory location.

3. Garbage Collection:

• JavaScript has a garbage collector that automatically cleans up unused memory.
• Since there are no more references to the memory location that held 12 (the original value), it becomes a candidate for garbage collection.

Summary:

• The value 12 is no longer accessible through the variable age after the reassignment.

• It might eventually be removed from the Heap by the garbage collector when it determines it's no longer needed.

Here are the common primitivedata types in JavaScript:

1. Number: Represents numeric values, including integers (whole numbers) and decimals. (e.g., 12, 3.14, -100)

2. String: Represents sequences of characters, used for text. (e.g., "Hello", 'World')

3. Boolean: Represents logical values, either true or false.

4. Undefined: Indicates that a variable has been declared but not yet assigned a value.

5. Null: Represents the intentional absence of a value. (different from undefined)

6. Symbol (ES6+): A unique and immutable identifier (rarely used).

7. BigInt (ES 2020): A type which is the built-in object that can represent whole numbers larger than 253 – 1.

2. Non-Primitive Data Types:

Non-primitive data types, also called reference types, are more complex and store collections of data. They are mutable, meaning their content can be modified after they are created. When you assign a non-primitive data type to a variable, you're storing a reference (memory address) to the actual data location in the Heap (unstructured storage area). Any changes made through the variable reference will affect the original data.

Here's a simple example to illustrate the mutability of Non-primitive

// * Object Creation
// ? We create an object person with properties name ("Alice") and age (30):
const person = {
    name: "Alice",
    age: 30
  };

// * Initial Output:
console.log(person); 
// ? Output: { name: "Alice", age: 30 }

// * Object Mutation:
person.age = 31; 
// ? Modifying a property of the object

// * Final Output:
console.log(person); 
//? Output: { name: "Alice", age: 31 }

Key Points:

• const prevents reassignment of the object but allows property modification.

• person.age = 31; changes the age property, showing object mutability.

• You can modify or add properties using dot notation (e.g., person.city = "New York";).

Here are some common non-primitive data types in JavaScript:

1. Object: A collection of key-value pairs used to store structured data.
   (e.g., { name: "Alice", age: 30 })

2. Array: An ordered collection of items, which can hold different data types.
   (e.g., [1, "apple", true])

3. Function: A reusable block of code that performs a specific task.

Key Differences:

Conclusion:

Understanding primitive and non-primitive data types is crucial for writing efficient and predictable JavaScript code. You need to choose the appropriate data type based on the kind of data you want to store and manipulate.

This understanding enables you to write more efficient and predictable JavaScript code.

Thanks for reading ❤️❤️❤️!