Day 7: JavaScript Objectsβ€Š-β€ŠCreation, Manipulation & MethodsΒ πŸš€

JavaScript objects are fundamental to working with the language, allowing developers to organize and manipulate data efficiently. In this post, we’ll dive deep into creating, manipulating, and working with JavaScript objects, covering key methods and their real-world applications.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

πŸ“Œ 1️⃣ What are JavaScript Objects?

Objects in JavaScript are collections of key-value pairs, where keys are strings (or Symbols) and values can be any data type, including other objects or functions.

πŸ“ Why Use Objects?

  • Organize related data together.

  • Improve code readability and maintainability.

  • Enable efficient data manipulation.

πŸ“ How to Create an Object?

We can create objects using three primary methods:

1️⃣ Object Literal Syntax (Most Common)

const person = {
  name: "Lokesh",
  age: 25,
  job: "Web Developer"
};
console.log(person.name); // Lokesh

2️⃣ Using the new Object() Constructor

const car = new Object();
car.brand = "BMW";
car.model = "Model 3";
console.log(car.brand); // BMW

3️⃣ Using a Constructor Function

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const user = new Person("Lokesh", 25);
console.log(user.name); // Lokesh

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

πŸ“Œ 2️⃣ Manipulating Objects

Once created, we can update, delete, and modify objects dynamically.

πŸ“ Adding or Updating Properties

const student = { name: "Lokesh" };
student.age = 25; // Add new property
student.name = "Mukesh"; // Update existing property
console.log(student); // { name: "Mukesh", age: 25 }

πŸ“ Deleting Properties

delete student.age;
console.log(student); // { name: "Lokesh" }

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

πŸ“Œ 3️⃣ Important Object Methods

JavaScript provides several built-in methods to work with objects effectively. Let’s explore the most useful ones:

3.1) πŸ”Ή Object.keys(obj) – Get All Keys

Returns an array of all the property names (keys) of an object.

const user = { name: "Lokesh", age: 25, job: "Software Engineer" };
console.log(Object.keys(user)); // ["name", "age", "job"]

πŸ“ Use case: Useful for iterating over object properties dynamically.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

3.2) πŸ”Ή Object.values(obj) – Get All Values

Returns an array of all the values of an object.

console.log(Object.values(user)); // ["Lokesh", 25, "Software Engineer"]

πŸ“ Use case: Helps in extracting and processing object values without worrying about keys.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

3.3) πŸ”Ή Object.entries(obj) – Get Key-Value Pairs

Returns an array of key-value pairs from an object.

console.log(Object.entries(user));
// [["name", "Lokesh"], ["age", 25], ["job", "Software Engineer"]]

πŸ“ Use case: Useful when converting objects into iterable structures.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

3.4) πŸ”Ή Object.assign(target, source) – Copy Properties

Copies properties from one or more source objects to a target object.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

πŸ“ Use case: Helps in merging multiple objects into one.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

3.5) πŸ”Ή Object.freeze(obj) – Prevent Modification

Freezes an object, preventing additions, deletions, or modifications.

const config = { apiKey: "1234" };
Object.freeze(config);
config.apiKey = "5678"; // No effect
console.log(config.apiKey); // "1234"

πŸ“ Use case: Used for defining immutable objects (e.g., configuration settings).

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

3.6) πŸ”Ή Object.seal(obj)β€Šβ€”β€ŠPrevent Addition/Deletion

Allows modifying existing properties but prevents adding or deleting properties.

const profile = { username: "devUser" };
Object.seal(profile);
profile.username = "codeMaster"; // βœ… Works
profile.age = 25; // ❌ Fails (cannot add new property)
delete profile.username; // ❌ Fails (cannot delete property)
console.log(profile); // { username: "codeMaster" }

πŸ“ Use case: Useful when we want to protect an object from structural changes but allow updates.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

3.7) πŸ”Ή hasOwnProperty(prop)β€Šβ€”β€ŠCheck Property Existence

Returns true if the object has the specified property.

console.log(user.hasOwnProperty("age")); // true
console.log(user.hasOwnProperty("salary")); // false

πŸ“ Use case: Helps avoid errors when accessing non-existent properties.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

πŸ“Œ 4️⃣ Real-World Example: User Profile Management

Objects are widely used in real-world applications, such as managing user profiles.

const userProfile = {
  username: "techGuru",
  email: "techguru@example.com",
  preferences: {
    theme: "dark",
    notifications: true
  }
};

console.log(userProfile.username); // "techGuru"
userProfile.preferences.theme = "light"; // Update preference
console.log(userProfile);

πŸ“ Where Used?

  • User settings and preferences.

  • API response handling.

  • Storing configuration data.

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

Conclusion

JavaScript objects are a crucial part of programming, enabling structured and efficient data handling. In this post, we explored:

βœ… Object creation methods.
βœ… Common object manipulation techniques.
βœ… Essential built-in methods.
βœ… Real-world use cases.

By mastering objects, you’ll improve your ability to write cleaner, more efficient JavaScript code. Happy coding! πŸš€

β€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Šβ€”β€Š

πŸ’¬ Have questions? Drop them in the comments! πŸ‘‡

0
Subscribe to my newsletter

Read articles from Lokesh Prajapati directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Lokesh Prajapati
Lokesh Prajapati

πŸš€ JavaScript | React | Shopify Developer | Tech Blogger Hi, I’m Lokesh Prajapati, a passionate web developer and content creator. I love simplifying JavaScript, React, and Shopify development through easy-to-understand tutorials and real-world examples. I’m currently running a JavaScript Basics to Advanced series on Medium & Hashnode, helping developers of all levels enhance their coding skills. My goal is to make programming more accessible and practical for everyone. Follow me for daily coding tips, tricks, and insights! Let’s learn and grow together. πŸ’‘πŸš€ #JavaScript #React #Shopify #WebDevelopment #Coding #TechBlogger #LearnToCode