Creating object (by object literal, by creating instance of Object, by using an object constructor)

📖 Theory

Five variables that belong together

A FestConnect registration has a name, year, email, event, and paid status. Storing them as five loose variables (name, year, email, ...) gets messy fast, especially with 200 registrations: which name goes with which email?

An object bundles related values under one name as properties. reg.name, reg.email, reg.paid, all in one tidy package. JavaScript gives three ways to build one, for three different needs.

📖 Theory

A labelled form versus loose slips

Five loose paper slips (name, year, email...) are easy to lose or mismatch. A single filled-in form keeps them together with printed labels. An object is that form: one thing, many labelled fields. And if you need 200 identical blank forms, you do not draw each by hand, you use a template (a constructor) and fill copies.

📖 Theory

The three ways

• Object literal { }: write the properties directly. Best for a single object.

let reg = { name: "Aditi", year: 2 };

• new Object(): make an empty object, then add properties. Verbose, rarely used.

let reg = new Object(); reg.name = "Aditi";

• Constructor function: a template you call with new to stamp out many.

function Registration(n, y){ this.name = n; this.year = y; }

Read a property with dot (reg.name) or bracket (reg["name"]).

⌨️ Practical

One registration, then many

// 1. literal: quickest for one object
let reg = { name: "Aditi", year: 2, paid: false };
console.log(reg.name);        // "Aditi"  (dot access)
console.log(reg["year"]);     // 2        (bracket access)
reg.paid = true;              // update a property

// 2. new Object(): the long way
let reg2 = new Object();
reg2.name = "Ravi";

// 3. constructor: a template for MANY registrations
function Registration(name, year) {
  this.name = name;
  this.year = year;
  this.paid = false;
}
let a = new Registration("Meera", 3);
let b = new Registration("Sana", 1);
console.log(a.name, b.name);  // "Meera" "Sana"

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

One object or a template?

FestConnect needs (a) a single settings object for the page, and (b) a way to create a fresh object for each of 200 registrations. Which creation method suits each, and why is a literal wrong for (b)?

🧩 Quiz

A student writes `let a = Registration("Meera", 3);` (no new) and then `a.name` is undefined. What went wrong?

1. Without new, the constructor did not create an object, so a is undefined and this leaked
2. Constructor functions cannot take parameters
3. You must use bracket access a["name"] after a constructor
4. The property should be called Name with a capital N

⚠️ Watch out

Object traps

1. Forgetting new on a constructor: Registration(...) without new returns undefined and mis-points this. Always new Registration(...).

2. Dot vs bracket: use dot for known names (reg.name); use brackets when the key is in a variable (reg[field]) or has spaces.

3. Confusing keys and values: in { name: "Aditi" }, name is the key (no quotes needed here) and "Aditi" is the value.

📖 Theory

The DOM is one giant object

Objects are not just your data. The next lesson reveals that the whole page, the DOM, is itself a tree of objects, where document is an object with properties and methods you call exactly like reg.name and a.paid here. Everything you touch in the browser, elements, events, dates, is an object. This lesson is the key to all of them.

✅ Summary

Key takeaways

• An object bundles related data as key:value properties under one name.
• Three ways to create: literal { } (one-off), new Object() (verbose), constructor + new (many of one shape).
• Access properties with dot (reg.name) or bracket (reg["name"]); brackets when the key is in a variable.
• A constructor uses this and MUST be called with new, or no object is made.
• Objects can hold methods too, not just data.
• Memory hook: a labelled form, and a template for many copies.