JavaScript Object Data Type Explained 🚀

The Object data type in JavaScript is a collection of key-value pairs. Objects are used to store data in a structured way and can represent complex entities.

Creating Objects

Objects can be created using object literals or the Object constructor.

Example Code

// Creating an object using object literal
let obj = {};
 
// Creating an object using the Object constructor
let obj2 = new Object();

Explanation

• obj is an empty object created using an object literal.
• obj2 is an empty object created using the Object constructor.

Object Properties

Objects can have properties, which are defined as key-value pairs. Keys can be strings or symbols, and values can be any data type.

Example Code

let book = {
name: "JS Journey",
author: "Death Code",
"page": 34,
"publish date": "4 October 2023"
};
 
// Accessing object properties
console.log(book.name); // Outputs: "JS Journey"
console.log(book["name"]); // Outputs: "JS Journey"
 
// Modifying object properties
book["language"] = "Hinglish"; // Adds a new property
book.page = 88; // Modifies an existing property
 
console.log(book); // Outputs the updated book object
console.log(Object.keys(book)); // Outputs: ["name", "author", "page", "publish date", "language"]
console.log(Object.values(book)); // Outputs: ["JS Journey", "Death Code", 88, "4 October 2023", "Hinglish"]
console.log(Object.entries(book)); // Outputs: [["name", "JS Journey"], ["author", "Death Code"], ["page", 88], ["publish date", "4 October 2023"], ["language", "Hinglish"]]

Explanation

• book is an object representing a book with properties such as name, author, page, and publish date.
• Properties can be accessed using dot notation (e.g., book.name) or bracket notation (e.g., book["name"]).
• New properties can be added, and existing properties can be modified.
• Object.keys(), Object.values(), and Object.entries() are methods that return arrays of keys, values, and key-value pairs, respectively.

Symbols as Object Properties

Symbols are unique and immutable data types that can be used as object property keys.

Example Code

const sym = Symbol("hobby");
const sym2 = Symbol("hobby");
 
const user = {
 name: "Rahul",
 age: 18,
 email: "rahul@gmail.com",
 location: "Delhi, India",
 [sym]: "Coding", // Using symbol as a key
 [sym2]: "Hacking" // Another symbol as a key
 fun: function() {
     console.log("Hello, I am a user function");
 }
};
 
// Accessing symbol properties
console.log(user[sym]); // Outputs: "Coding"
user.fun(); // Calls the function if uncommented

Explanation

• sym and sym2 are symbols that serve as unique keys for the user object properties.
• Symbols ensure that property keys do not collide with other keys, even if they have the same description.
• Functions can also be defined as properties of objects, allowing for methods to be associated with the object.

Combining Objects

Objects can be combined using various methods, including the spread operator and Object.assign().

Example Code

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
 
// let obj3 = { obj1, obj2 }; // Creates an object with obj1 and obj2 as properties
// console.log(obj3["obj1"].a); // Accessing property of obj1
// let obj3 = Object.assign({}, obj1, obj2); // Merges obj1 and obj2 into a new object
let obj3 = { ...obj1, ...obj2, "e": 44 }; // Using spread operator to combine objects
 
console.log(obj3); // Outputs: { a: 1, b: 2, c: 3, d: 4, e: 44 }

Explanation

• The spread operator (...) allows for easy merging of multiple objects into a new object.
• Object.assign() can also be used to copy properties from one or more source objects to a target object.

Arrays of Objects

JavaScript allows you to create arrays that contain objects, which is useful for managing collections of related data.

Example Code

const users = [
 { name: "Rahul", id: 1 },
 { name: "Piyush", id: 2 },
 { name: "Death Code", id: 99 },
];
 
// console.log(users[0].name); // Outputs: "Rahul"
let arr = ["Divya", 44];
// const { name, age } = user; // Destructuring user object
// const [name2, age2] = arr; // Destructuring array
// console.log(name, age); // Outputs: "Rahul" 18
// console.log(name2, age2); // Outputs: "Divya" 44
 
const { name: rahul, age } = user; // Destructuring with renaming
console.log(rahul, age); // Outputs: "Rahul" 18

Explanation

• Arrays can hold objects, allowing for structured data management.
• Destructuring syntax allows for easy extraction of properties from objects and elements from arrays.
• Renaming during destructuring can be done using the syntax name: newName.

Conclusion

Objects are a fundamental part of JavaScript, enabling the representation of complex data structures. Understanding how to create, manipulate, and combine objects is essential for effective programming in JavaScript.