March 18, 2025

JavaScript Objects Explained: A Practical Guide for Devs

Bill011 mins
JavaScript Objects Explained: A Practical Guide for Devs


Hello my frontend developers, today i will be discussing one of the important concepts in javascript which is almost used everywhere and in every project, “Objects”.
Objects are the backbone of JavaScript, powering everything from simple data structures to complex applications. Whether you’re a beginner or an experienced developer, mastering how to create, modify, and manipulate objects efficiently can significantly improve your code. In this guide, we’ll break down JavaScript objects to help you write cleaner and more optimized code.

  • I’ll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
  • Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
  • I will be using scrib.show from scribbler.live, it is equivalent to console.log

Lets dive in…

Table of contents



1. Creating Objects

JavaScript allows you to create objects in different ways. The most common methods are object literals and the new Object() syntax.

// 1. Creating objects
// Using Object Literal
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};
scrib.show("Using object literal - ",programming)

// Using new Object()
const programmingObject = new Object();
programmingObject.language = "Python";
programmingObject.extension = ".py";
programmingObject.usedFor = "Web development and AI/ML";

scrib.show("Using new Object - ",programmingObject)
Enter fullscreen mode

Exit fullscreen mode



2. Accessing Object Properties

You can access object properties using dot notation or bracket notation.

// 2. Accessing properties
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

// Dot Notation
scrib.show("Using dot notation - ",programming.language); // "Javascript"

// Bracket Notation
scrib.show("Using bracket notation - ",programming["extension"]); // .js

// Bracket Notation with spaces
scrib.show("Using bracket notation with key with spaces - ",programming["Used with"]); // HTML and CSS
Enter fullscreen mode

Exit fullscreen mode



3. Modifying Object Properties

You can update an object’s property using assignment (=).

// 3. Modifying properties
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

// Updating properties
programming.language = "Python";

// Adding new properties
programming["Used with"] = "HTML and CSS";

scrib.show(programming); 
// { "language": "Python", "extension": ".js", "usedFor": "Web development and backend", "Used with": "HTML and CSS" }
Enter fullscreen mode

Exit fullscreen mode



4. Checking Properties

Use the in operator or hasOwnProperty() to check if a property exists.

// 4. Checking properties
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

// Using "in" operator
scrib.show("'language' in programming?", "language" in programming); // true
scrib.show("'Used for' in programming?", "Used for" in programming);  // false

// Using hasOwnProperty()
scrib.show("'extension' in programming?",programming.hasOwnProperty("extension")); // true
Enter fullscreen mode

Exit fullscreen mode



5. Iterating Over an Object

Use for...in and for...of to loop through an object’s properties.

// 5. iterating objects
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

// looping over the object directly
for (let key in programming) {
  scrib.show(`${key}: ${programming[key]}`);
}

const keys = Object.keys(programming);
const values = Object.values(programming);
const entries = Object.entries(programming);

// Iterating keys
for (let key of keys) {
  scrib.show(`key: ${key}`);
}

// Iterating values
for (let value of values) {
  scrib.show(`Value: ${value}`);
}

// Iterating entries with key and value both
for (let [key, value] of entries) {
  scrib.show(`Key: ${key},Value: ${value}`);
}
Enter fullscreen mode

Exit fullscreen mode



6. Copying & Cloning Objects

  • Avoid modifying the original object by creating a copy.
  • For deep copies (nested objects), use structuredClone() (modern browsers) or JSON.parse(JSON.stringify(obj)). 
// 6. Copying and cloning objects
const programming1 = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

const programming2 = {
  language: "Python",
  extension: ".py",
  usedFor: "Web development and AI/ML",
  libraries: [{
    name:"pytorch"
  },{
    name:"numpy"
  }]
};

// Shallow Copy using Object.assign()
const copying1 = Object.assign({}, programming1);
scrib.show(copying1);

// Shallow Copy using Spread Operator
const copying2 = { ...programming1 };
scrib.show(copying2);

// for deep copies, using structuredClone
const deepCopy = structuredClone(programming2);
scrib.show(deepCopy);
Enter fullscreen mode

Exit fullscreen mode



7. Merging Objects

Use Object.assign() or the spread operator to merge objects.

// 7. Merging objects
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

const concepts = {
  concepts: "Arrays, Objects, Functions, Fetch, Classes"
};

// Using Object.assign()
const merged1 = Object.assign({}, programming, concepts);
scrib.show(merged1)

// Using Spread Operator
const merged2 = { ...programming, ...concepts };
scrib.show(merged1)
Enter fullscreen mode

Exit fullscreen mode



8. Freezing & Sealing Objects

  • Use Object.freeze() to make an object immutable.
  • Use Object.seal() to allow modifications but prevent adding/removing properties. 
// 8. Freezing
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

// freezing
Object.freeze(programming);
programming.language = "Python"; //  Won't change
scrib.show(programming); // { "language": "Javascript", "extension": ".js", "usedFor": "Web development and backend" }
Enter fullscreen mode

Exit fullscreen mode 

// 8. Sealing
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

Object.seal(programming);
programming["Used for"] = "Web development and backend" // Adding/removing not Allowed
programming.language = "Python" // Updating Allowed
scrib.show(programming);
Enter fullscreen mode

Exit fullscreen mode



9. Converting Objects

Convert objects to arrays or JSON strings.

// 9. Converting objects
const programming = {
  language: "Javascript",
  extension: ".js",
  usedFor: "Web development and backend"
};

// Convert Object to JSON
const jsonString = JSON.stringify(programming);
scrib.show(jsonString); // {"language":"Javascript","extension":".js","usedFor":"Web development and backend"}

// Convert Object to arrays
const jsonArray = Object.entries(programming);
scrib.show(jsonArray); // [ [ "language", "Javascript" ], [ "extension", ".js" ], [ "usedFor", "Web development and backend" ]]
Enter fullscreen mode

Exit fullscreen mode



10. Advanced Object Handling



Using Object Destructuring

const user = { name: "Jake", age: 26, job: "Engineer" };
const { name, age } = user;
console.log(name, age); // "Jake", 26
Enter fullscreen mode

Exit fullscreen mode



Using Object Methods

const person = {
  name: "Emma",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet();
Enter fullscreen mode

Exit fullscreen mode



Using object prototypes

JavaScript objects inherit properties from their prototype.

// Object prototype
function Programming(language, extension,usedFor) {
  this.language = language;
  this.extension = extension;
  this.usedFor = usedFor;
}

Programming.prototype.fetchDoc = () => "Doc is fetched for javascript";

const javascript = new Programming("Javascript", ".js","Web development and backend");
javascript.fetchDoc(); // Doc is fetched for javascript
Enter fullscreen mode

Exit fullscreen mode



Executing all the examples in scribbler.live

Check out all the examples on scribbler.live and run it yourself to see the output from each of the examples above



🎯 Conclusion

Handling objects efficiently is crucial in JavaScript. Whether you’re creating, modifying, iterating, or merging objects, mastering these techniques will help you write cleaner and more optimized code.

That’s it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.



You can contact me on –

Instagram – https://www.instagram.com/supremacism__shubh/
LinkedIn – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email – shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well





Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News