Class 15 — many facts, one tidy container

One dish isn't one fact. It's a name, a price, a category, a yes/no — all at once. Today you keep them together.

In Class 14 a variable held one value — let price = 90;. But describe a real menu dish and you instantly need several facts that belong together: its name, its price, its category, whether it's a millet dish. Keeping them in four loose variables (dishName, dishPrice, dishCategory…) gets messy fast and nothing says they're related. JavaScript's answer is the object: one container that holds many labelled values as a single unit. Today you'll build one, read from it two ways, give it a method, and nest one object inside another.

Walk out of this room able to…

"Which .html file?" — the two-file pair, restated in 8 lines

Every panel today is captioned script.js, and a .js file can't run by itself — a page has to load it. You built this exact page in Class 13 and again in Class 14, so we won't labour it; here it is once, complete, so nothing today is a mystery. Objects live entirely in the Console — they have no appearance on a page — so this host page stays deliberately bare. It exists only to start script.js.

"But how do I see an object without HTML and CSS?" — the honest answer, both ways

Fair question, and it deserves a real demonstration rather than a promise. A pure-JS lesson has two legitimate output surfaces, and you should know both: (1) the Console — which is what today uses, and it is a genuine output screen, not a placeholder; and (2) a page, once you decide to show the data to a visitor. Below is the same dish object rendered the second way, so the difference is concrete. Note the order — plain HTML first, then CSS, then the JavaScript that fills it in.

The idea, in one plain sentence

One real thing has many facts that belong together. An object keeps them in one container.

Think of a single dish on the Poshtik Campus menu — say Millet Khichdi. It isn't one fact. It has a name, a price, a category, and a yes/no flag for "is it a millet dish?". In Class 14 each of those would be its own loose variable. That works for one dish… but the four boxes just float around with nothing tying them together. JavaScript's answer is the object: one box that holds many labelled values as a single unit.

The messy way vs the tidy way — same four facts, side by side

First the loose-variable approach you already know — and because JavaScript can never run on its own, we build its host page from scratch first too: plain HTML → CSS → JS. Step through it: four separate boxes, and the only thing linking them is that you remembered to start each name with dish. In the next beat the same four facts get poured into one object.

Now the same dish as one object — page and all, built from scratch

Same fixed order as always: plain HTML first (the page that will carry the script), then CSS one rule per press, then the JavaScript. Watch three things on the right: the white page appears plain, then each CSS rule lands, then the dark Console shows the object growing one property at a time and printing as a single tidy unit.

The shape, exactly

The object literal — { key: value }, pairs separated by commas.

"Literal" just means you write the object out in full, right there in the code, between curly braces. Learn these five rules once and you can read or write any object: (1) wrap everything in curly braces { }; (2) each entry is a key, then a colon, then a value; (3) separate entries with commas; (4) keys are labels (usually plain words, no quotes needed); (5) values can be any type you already know — string, number, boolean.

Build one dish object, one line per press — page included, from scratch

Same unbreakable order: plain HTML → CSS → JavaScript. First the page that carries the script (plain, then three CSS rules land one press at a time), then the object literal itself. As the object closes, the Console prints the finished dish — proof the braces built a real value. Notice the keys stay fixed while the values are the three data types from Class 14: a string, a number, a boolean.

A second, unrelated example — the same shape, a different world

The object shape isn't just for food. Here's a throwaway example modelling a library book — completely different data, exactly the same { key: value } rules. And it gets its own page built from scratch, because a .js file still cannot run by itself: plain HTML → CSS → JS, every time.

Prove it — build a real object right here

This console genuinely runs in your browser. Type an object literal, or tap a quick-fill button, and press Enter — JavaScript builds the real object and prints it back. Try changing a value and re-running.

Reach inside the container

Two ways to read one property — dot . and bracket [ ].

Building the object is half the job; the other half is reading a fact back out. JavaScript gives you two notations, and they return the exact same value: dot notation — dish.price — clean and readable, the one you'll use 95% of the time; and bracket notation — dish["price"] — where the key goes in quotes inside square brackets. Both hand you 90.

See both notations return the same value — click a key, live

This is real: a genuine object dish lives in the page. Click any key below and watch both dish.key and dish["key"] read the same real value out of it. No faked strings — the widget actually reads the object.

const dish = {
  name: "Millet Khichdi",
  price: 90,
  category: "bowl",
  isMillet: true
};

In code, side by side — built from scratch, HTML → CSS → JS

The page first (plain, then two CSS rules), then the script. The script reads the same two facts twice — once with dots, once with brackets — and the Console proves the pairs are identical.

Exam drill · straight from a past paper

"Add a city property to this object — two ways."

This is a real 2-mark question. It gives you an object and asks you to add a new property to it — once with dot notation, once with bracket notation. It's the mirror image of reading a property: instead of = pulling a value out, you put a value in. Reveal the model answer one point at a time.

A value can be an action

A property can hold a function. When it does, we call it a method.

So far every value in our object has been data — a string, a number, a boolean. But a value can also be a function. A function stored as a property is called a method: an action the object can do, not just a fact it holds. Our dish can now not only have a name and price — it can describe itself.

A dish that can describe itself — built from scratch, HTML → CSS → JS

Page first (plain, then three CSS rules one press at a time), then the script. The object gets a method called describe. Calling it with dish.describe() (note the parentheses — that's how you run a function) makes the Console print a sentence built from the object's own properties, via this.

A value can be another object

Nested objects — an object living inside a property of another object.

You've seen values that are strings, numbers, booleans, and functions. A value can also be a whole other object. When a dish's nutrition is itself a bundle of facts — protein, calories — it makes sense to store it as its own little object, tucked inside the dish. To read a fact two levels deep, you just chain the dots: dish.nutrition.protein.

A dish with a nutrition sub-object — built from scratch, then stepped through

Same rule as every JavaScript demo in this course: a .js file cannot be double-clicked into life, so we build its host page first — plain HTML, then a little CSS, then the script. Then step through and watch the Console. The outer object dish holds a normal name and price — and a nutrition property whose value is a second object. Reading into it is just dots all the way down.

Self-study · a light preview

Object or array? A quick-decision reference.

You'll meet arrays in full next class (Class 17), but you'll already sense the choice: an object stores facts you look up by name (dish.price); an array stores a list of items you look up by position (menu[0]). This is a self-study card — skim it now, and it'll click fully once arrays land.

Put it all together — a real console

Practise everything from today in a genuine JavaScript console.

This console truly runs in your browser — build an object, read it with dot and bracket, call a method, add a property, read a missing key. Tap a quick-fill to see each idea from today prove itself, then type your own. Copy any of these into your fswd-practice\Class-15\script.js and run them with F12 → Console.

Two traps that catch everyone — read the real errors

These are the two mistakes you'll make in your first hour with objects. Read the exact console messages so you recognise them instantly.

Wrap-up & the bridge to Class 16

Your data now has shape. Next class, JavaScript reaches out and changes the page itself.

Today one box learned to hold many labelled facts — a dish's name, price, category, millet-flag — read two ways, given a method, and nested one object inside another. But an object still only lives in memory. Class 16 introduces the DOM: the browser's live model of your HTML, so JavaScript can find an element on the page and change its text, its style, anything. Objects are the data; the DOM is the page. Lab 4 puts both to work together.