<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Understanding Objects in JavaScript]]></title><description><![CDATA[Understanding Objects in JavaScript]]></description><link>https://magicofjsobjects.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Sat, 19 Sep 2026 19:50:52 GMT</lastBuildDate><atom:link href="https://magicofjsobjects.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Understanding Objects in JavaScript]]></title><description><![CDATA[When you start learning JavaScript, one of the most important concepts you will encounter is Objects. Objects allow us to store related information together in a structured way.
In this article, we wi]]></description><link>https://magicofjsobjects.hashnode.dev/understanding-objects-in-javascript</link><guid isPermaLink="true">https://magicofjsobjects.hashnode.dev/understanding-objects-in-javascript</guid><category><![CDATA[ChaiCode]]></category><category><![CDATA[Chaiaurcode]]></category><category><![CDATA[ChaiCohort]]></category><category><![CDATA[chaicode webdev cohort 2026]]></category><category><![CDATA[JavaScript]]></category><category><![CDATA[objects-in-js]]></category><dc:creator><![CDATA[sourav halder]]></dc:creator><pubDate>Mon, 16 Mar 2026 10:13:33 GMT</pubDate><enclosure url="https://cdn.hashnode.com/uploads/covers/696bc200bc16f680ba8935ac/1798c8dd-62e5-48af-89c0-82ebafbc08f1.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>When you start learning JavaScript, one of the most important concepts you will encounter is Objects. Objects allow us to store related information together in a structured way.</p>
<p>In this article, we will understand what objects are, why we use them, and how to work with them in JavaScript.</p>
<hr />
<h2>What are Objects - and why do we need them</h2>
<p>An <strong>object</strong> is a collection of related data stored as <strong>key-value pairs</strong>.</p>
<p>Think of an object as a <strong>real-world entity</strong>.</p>
<p>For example, a person has a name, an age and a city. Now we can store them as:<br />let person = "Priya";</p>
<p>let age = 28;</p>
<p>let city = "Mumbai";</p>
<p>Now this works but likely to be messy very quickly. What we have 30 people? We need to create 90 variables, all loosely related with no clear connection. That is exactly where objects come in.<br />An object is a single container that groups related data together under one name. It stores the information in key-value pairs - where each key is a label, and the value is the data attached to that label.</p>
<p>Think of an object like a contact card in your phone. The card has fields(keys) like Name, Phone and City. Each field stores a specific piece of information (value). Everything about that person is grouped in one place.</p>
<hr />
<h2>Creating Objects</h2>
<p>The most common way to create an object is using curly braces {}. This is called an <strong>object literal.</strong></p>
<pre><code class="language-javascript">let person = {
  name: "Priya",
  age: 28,
  city: "Mumbai"
};
</code></pre>
<p>Here:</p>
<ul>
<li><p>'person' is the name of the variable holding our object.</p>
</li>
<li><p>'name', 'age' and 'city' are the keys (also called as properties).</p>
</li>
<li><p>'Priya', 28, 'Mumbai' are the corresponding values.</p>
</li>
</ul>
<p><strong>Objects vs Arrays — What's the Difference?</strong></p>
<p>A common beginner question: when do I use an array, and when do I use an object?</p>
<table style="min-width:75px"><colgroup><col style="min-width:25px"></col><col style="min-width:25px"></col><col style="min-width:25px"></col></colgroup><tbody><tr><td><p> </p></td><td><p><strong>Array [ ]</strong></p></td><td><p><strong>Object { }</strong></p></td></tr><tr><td><p><strong>Stores</strong></p></td><td><p>Ordered list of values</p></td><td><p>Named key-value pairs</p></td></tr><tr><td><p><strong>Access by</strong></p></td><td><p>Index number (0, 1, 2…)</p></td><td><p>Key name (name, age…)</p></td></tr><tr><td><p><strong>Best for</strong></p></td><td><p>Lists of similar items</p></td><td><p>Describing one entity</p></td></tr><tr><td><p><strong>Example</strong></p></td><td><p>["Priya", "Arjun", "Kiran"]</p></td><td><p>{ name: "Priya", age: 28 }</p></td></tr></tbody></table>

<hr />
<h2><strong>Accessing Properties</strong></h2>
<p>Once you have an object, you need to read its values. JavaScript gives you two ways to do this.</p>
<p><strong>Dot Notation</strong></p>
<p>The simplest and most common approach:</p>
<pre><code class="language-javascript">console.log(person.name);  // "Priya"
console.log(person.age);   // 28
console.log(person.city);  // "Mumbai"
</code></pre>
<p><strong>Bracket Notation</strong></p>
<p>You can also use square brackets with the key as a string:</p>
<pre><code class="language-javascript">console.log(person["name"]);  // "Priya"
console.log(person["age"]);   // 28
</code></pre>
<p>Bracket notation is especially useful when the key is stored in a variable:</p>
<pre><code class="language-javascript">let key = "city";
console.log(person[key]);  // "Mumbai"
</code></pre>
<p><strong>Which one should you use?</strong></p>
<p>Use dot notation whenever possible — it is shorter and easier to read. Use bracket notation when the key name has spaces, special characters, or when the key is stored dynamically in a variable.</p>
<hr />
<h2><strong>Updating Object Properties</strong></h2>
<p>Objects are mutable — you can change their values at any time using either dot or bracket notation.</p>
<pre><code class="language-javascript">let person = {
  name: "Priya",
  age: 28,
  city: "Mumbai"
};

// Update using dot notation
person.age = 29;

// Update using bracket notation
person["city"] = "Delhi";

console.log(person);
// { name: "Priya", age: 29, city: "Delhi" }
</code></pre>
<hr />
<h2><strong>Adding and Deleting Properties</strong></h2>
<p><strong>Adding a New Property:</strong> You can add a new key to an existing object simply by assigning it:</p>
<pre><code class="language-javascript">person.email = "priya@example.com";

console.log(person.email);  // "priya@example.com"
</code></pre>
<p><strong>Deleting a Property:</strong> Use the delete keyword to remove a property from an object:</p>
<pre><code class="language-javascript">delete person.email;

console.log(person.email);  // undefined
</code></pre>
<p><em>Note:<br />After deletion, accessing the removed key returns undefined.</em></p>
<p><em>The delete keyword only works on object properties — not variables</em></p>
<hr />
<h2><strong>Looping Through Object Keys</strong></h2>
<p><strong>To iterate over all the properties in an object, use a for...in loop:</strong></p>
<pre><code class="language-javascript">let person = {
  name: "Priya",
  age: 28,
  city: "Mumbai"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

// Output:
// name: Priya
// age: 28
// city: Mumbai
</code></pre>
<p>In each iteration, key holds the property name (a string), and person[key] retrieves the corresponding value. Notice that bracket notation is required here since key is a variable.</p>
<img src="https://cdn.hashnode.com/uploads/covers/696bc200bc16f680ba8935ac/fbda1136-fc2b-4a63-8a2c-b997978a7225.png" alt="" style="display:block;margin:0 auto" />

<hr />
<p><strong>Practice Assignment</strong></p>
<p>Task: Build a Student Object</p>
<pre><code class="language-plaintext">Instructions
1.  Create an object called student with at least three properties: name, age, and course.
2.  Update the age property to a new value.
3.  Add a new property called grade.
4.  Use a for...in loop to print all keys and values.
</code></pre>
<hr />
<h1>Quick Summary</h1>
<table style="min-width:50px"><colgroup><col style="min-width:25px"></col><col style="min-width:25px"></col></colgroup><tbody><tr><td><p><strong>Concept</strong></p></td><td><p><strong>What It Does</strong></p></td></tr><tr><td><p><strong>Object literal { }</strong></p></td><td><p>Creates an object with key-value pairs</p></td></tr><tr><td><p><strong>Dot notation</strong></p></td><td><p>Access/update a property: <a target="_self" rel="noopener noreferrer nofollow" class="text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer" href="http://person.name" style="pointer-events:none">person.name</a></p></td></tr><tr><td><p><strong>Bracket notation</strong></p></td><td><p>Access with variable key: person[key]</p></td></tr><tr><td><p><strong>Adding property</strong></p></td><td><p>Assign to new key: obj.newKey = value</p></td></tr><tr><td><p><strong>delete keyword</strong></p></td><td><p>Removes a property from the object</p></td></tr><tr><td><p><strong>for...in loop</strong></p></td><td><p>Iterates over all keys in an object</p></td></tr></tbody></table>]]></content:encoded></item></channel></rss>