Day 5:Understanding JavaScript Data Types: Primitive vs. Non-Primitive

Aman Kumar - Sep 3 - - Dev Community

In JavaScript, data types are divided into two main categories: Primitive and Non-Primitive (Reference) types. This distinction is essential for understanding how data is stored and accessed in memory. Let's break down each type and see how they work.

Primitive Data Types

JavaScript has 7 primitive data types:

  1. String

    Represents textual data, e.g., "Hello World".

  2. Number

    Represents both integer and floating-point numbers, e.g., 100, 100.3. Unlike some other languages, JavaScript doesn't distinguish between integers and floats—they're all just Number.

    const score = 100;
    const scoreValue = 100.3;
    console.log(typeof scoreValue); // Output: number
    
  3. Boolean

    Represents logical values: true or false.

    const isLoggedIn = true;
    console.log(typeof isLoggedIn); // Output: boolean
    
  4. Symbol

    Represents a unique identifier. Even if two symbols are created with the same description, they are distinct.

    const id = Symbol('123');
    const anotherId = Symbol('123');
    console.log(id === anotherId); // Output: false
    
  5. Null

    Represents an intentional absence of any object value.

    const outsideTemp = null;
    console.log(typeof outsideTemp); // Output: object
    
  6. Undefined

    Represents a variable that has been declared but not yet assigned a value.

    let weather;
    console.log(typeof weather); // Output: undefined
    
  7. BigInt

    Represents integers with arbitrary precision, allowing you to work with large numbers beyond the safe integer limit of Number.

    const bigNumber = 23873847283748289483n;
    console.log(typeof bigNumber); // Output: bigint
    
Primitive Data Types: Call by Value

Primitive types are stored directly in the memory location associated with a variable. When you assign a primitive value to another variable, a new copy of the value is created.

let myName = "Aman";
let myOtherName = myName;
myOtherName = "Dawn";
console.log(myName);       // Output: Aman
console.log(myOtherName);  // Output: Dawn
Enter fullscreen mode Exit fullscreen mode

In the example above, changing myOtherName does not affect myName, because a new copy of the value was created.

Non-Primitive Data Types

Non-primitive types, also known as reference types, include:

  1. Arrays

    Collections of elements that can be of any type, stored as a list.

    const heros = ["ironman", "spiderman", "batman"];
    console.log(typeof heros); // Output: object
    
  2. Objects

    Collections of key-value pairs, where the keys are strings or Symbols, and the values can be of any type.

    let myObj = {
        name: "Ayush",
        age: 21,
    };
    console.log(typeof myObj); // Output: object
    
  3. Functions

    Blocks of code designed to perform a particular task, which can be stored in variables.

    const myFunction = function() {
        console.log("Hello World");
    };
    console.log(typeof myFunction); // Output: function
    
Non-Primitive Data Types: Call by Reference

Non-primitive types are stored in the heap, and the variable holds a reference (memory address) to the actual data. When you assign a non-primitive type to another variable, both variables point to the same memory location.

let userOne = {
    email: "user1@google.com",
    upi: "user@ybl"
};
let userTwo = userOne;
userTwo.email = "aman@google.com";
console.log(userOne.email);  // Output: aman@google.com
console.log(userTwo.email);  // Output: aman@google.com
Enter fullscreen mode Exit fullscreen mode

In the example above, modifying userTwo.email also changes userOne.email because both variables reference the same object in memory.

Key Takeaways

  • Primitive types are simple data types that store values directly. They are immutable, and each variable holds its own copy of the data.
  • Non-primitive types are more complex, and variables store references to the data. Changes to one variable can affect others that reference the same data.
  • Understanding these differences is crucial for writing efficient and bug-free code in JavaScript.

Happy coding and see you in the next one!!!

. . . . . . . . . . . . . . .
Terabox Video Player