Platform under construction

Objects, Prototypes & Classes

Advanced

Properties & Methods

Properties store values. Methods store behavior on an object. Together they let an object describe state and actions.

const panel = {
  title: "Dashboard",
  open() {
    return `${this.title} opened`;
  }
};

Objects, Prototypes & Classes

Properties describe what an object has; methods describe what it can do.

A property is a key-value pair. The value can be a string, number, boolean, array, object, function or any other JavaScript value.

A method is a function stored on an object. Method syntax is shorter than writing name: function () {}, and it gives this a useful meaning when called as object.method().

Keep properties and methods close to the data they work with, but do not turn every object into a large module. Small, focused objects are easier to reason about.

Property

A named value on an object.

Method

A function value called through the object.

this

Inside a method call, this usually points to the object before the dot.

Shorthand

Property and method shorthand reduce repetition.

Examples

Object code becomes clear when shape, state and behavior are visible.

Method close to the state it uses

const toggle = {
  active: false,
  switch() {
    this.active = !this.active;
    return this.active;
  }
};

Method copied away from its object

const switchToggle = toggle.switch;

switchToggle();

// The method no longer has the same this context.

Code patterns

Reusable examples for quick reference.

These patterns focus on the pieces developers actually reuse: object literals, methods, constructors, prototypes, getters, copying, classes and inheritance.

Property shorthand

Use the variable name as the property name.

const name = "User A";
const role = "editor";

const profile = { name, role };

Method syntax

Use concise method syntax for object behavior.

const status = {
  label: "Ready",
  show() {
    return this.label;
  }
};

Computed property

Build a property name from a value.

const field = "status";

const record = {
  [field]: "ready"
};

Method using state

A method can read other properties through this.

const counter = {
  count: 0,
  next() {
    this.count += 1;
    return this.count;
  }
};

Rules that matter

Model data deliberately before adding behavior.

Objects are where JavaScript programs start to model real application state. Good object shape makes later functions, classes and UI updates much easier to maintain.

Use nouns for properties

Properties usually describe data.

Use verbs for methods

Methods usually perform or calculate something.

Use method syntax for object methods

It reads cleanly and works well with this.

Be careful when passing methods around

Detached methods can lose this.

Use computed properties deliberately

They are useful, but can hide structure if overused.

Do not overload one object

Too many methods can mean the object needs to be split.

Production thinking

Object design decides how understandable the rest of the code can be.

Why does this matter?

Properties and methods are how JavaScript objects become models of state plus behavior.

Accessibility

Methods that update UI state should keep accessible labels and attributes in the same state model.

Production note

Production objects should expose clear methods instead of requiring other code to change internal details everywhere.

SEO note

Objects with methods can prepare content consistently before it is rendered as headings, links or metadata.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a title property and include it in the output.
Rename toggle to setNextState and update the call.
Detach the method into a variable and observe what changes.

Practice assignment

Do this before moving to the next topic.

Create one object with two properties.
Add one method that uses this.
Call the method through the object.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Properties & Methods.