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! π
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