DEV Community

Cover image for Understanding JavaScript Data Types: A Comprehensive Guide to Primitive and Reference Types with Examples
Tanvir Ahmed
Tanvir Ahmed

Posted on • Edited on

Understanding JavaScript Data Types: A Comprehensive Guide to Primitive and Reference Types with Examples

JavaScript has several built-in data types, which can be categorized into two broad groups:

πŸ—Ή Primitive Types

πŸ—Ή Non-Primitive (Reference) Types.

Aspect Primitive Data Types Reference Data Types
Examples Number, String, Boolean Object, Array, Function
Storage Stack Heap
Mutability Immutable Mutable
Value Type Stored as value Stored as reference
Passing in Function Passed by value Passed by reference
Type Checking typeof typeof, instanceof
Performance Faster Slower

Now,

⌬ Storage

βž• Primitive Data Types: Stored in the stack (fixed memory allocation)

let x = 10;
let y = x; // Copies the value
y = 20;
console.log(x); // 10 (original value remains unaffected)
Enter fullscreen mode Exit fullscreen mode

βž• Reference Data Types: Stored in the heap (dynamic memory allocation).

let obj1 = { name: 'Alice' };
let obj2 = obj1; // Copies the reference, not the value
obj2.name = 'Bob';
console.log(obj1.name); // "Bob" (original value is affected)
Enter fullscreen mode Exit fullscreen mode

⌬ Mutability

βž• Primitive Data Types: Immutable (cannot be changed after creation).

let str = "Hello";
str[0] = "h"; // No effect
console.log(str); // "Hello" (strings are immutable)
Enter fullscreen mode Exit fullscreen mode

βž• Reference Data Types: Mutable (values can be changed).

let arr = [1, 2, 3];
arr[0] = 10;
console.log(arr); // [10, 2, 3]
Enter fullscreen mode Exit fullscreen mode

⌬ Value vs Reference

βž• Primitive Data Types: Stored as values. Directly hold the data.

let a = 5;
let b = a;
b = 10;
console.log(a); // 5 (original value is unaffected)
Enter fullscreen mode Exit fullscreen mode

βž• Reference Data Types: Stored as references to memory locations.

let objA = { key: 'value' };
let objB = objA;
objB.key = 'newValue';
console.log(objA.key); // "newValue" (both reference the same object)

Enter fullscreen mode Exit fullscreen mode

JavaScript Data Types
Type Examples
Primitive Types βž€ Number
➁ String
βž‚ Boolean
βžƒ Undefined
βž„ Null
Non-Primitive Types βž€ Object
➁ Array
βž‚ Function

❐ Now write Primitive type with deatils

Primitive data types are immutable and stored by value.

✚ Number

let age = 25; // Integer
let pi = 3.14159; // Floating-point
let negativeNumber = -42; // Negative number
let exponential = 1.23e4; // 12300 in exponential notatio
Enter fullscreen mode Exit fullscreen mode

✚ String

let singleQuote = 'Hello, world!';
let doubleQuote = "JavaScript is awesome!";
let templateLiteral = `This is a template literal`;

let multiLine = `This is a multi-line string.`;
console.log(`Name: ${singleQuote}, Length: ${singleQuote.length}`);
Enter fullscreen mode Exit fullscreen mode

✚ Boolean
➭ Represents a logical value: true or false.

let isJavaScriptFun = true;
let isOver18 = false;

console.log(typeof isJavaScriptFun); // "boolean"
console.log(5 > 2); // true
console.log(10 === '10'); // false
Enter fullscreen mode Exit fullscreen mode

✚ Undefined
➭ A variable is declared but not assigned a value.

let x;
console.log(x); // undefined
console.log(typeof x); // "undefined"
Enter fullscreen mode Exit fullscreen mode

✚ Null
➭ Represents the intentional absence of any value (empty or unknown).

let y = null;
console.log(y); // null
console.log(typeof y); // "object" (this is a quirk in JavaScript)
Enter fullscreen mode Exit fullscreen mode

❐ Now write Non-Primitive type with deatils

Non-primitive data types are mutable and stored by reference..

✚ Object

let person = {
  name: 'John',
  age: 30,
  isStudent: false,
  hobbies: ['reading', 'gaming'],
  address: {
    city: 'New York',
    zip: '10001',
  },
};

console.log(person.name); // "John"
console.log(person.address.city); // "New York"
console.log(typeof person); // "object"
Enter fullscreen mode Exit fullscreen mode

✚ Array

let fruits = ['Apple', 'Banana', 'Cherry'];
let mixedArray = [1, 'Hello', true, null, undefined];

console.log(fruits[0]); // "Apple"
console.log(mixedArray.length); // 5
console.log(typeof fruits); // "object" (arrays are objects in JS)

Enter fullscreen mode Exit fullscreen mode

✚ Function
➭ Represents a logical value: true or false.

function greet(name) {
  return `Hello, ${name}!`;
}

let sum = function(a, b) {
  return a + b;
};

let multiply = (x, y) => x * y;

console.log(greet('Alice')); // "Hello, Alice!"
console.log(sum(3, 4)); // 7
console.log(multiply(5, 6)); // 30
console.log(typeof greet); // "function"

Enter fullscreen mode Exit fullscreen mode

Top comments (0)