Loading...
Loading...
Functions on objects, the 'this' keyword, and built-in utilities.
Real programs store collections of data. Arrays hold ordered lists, objects hold named properties, and modern syntax like destructuring and spread make working with both concise. JSON connects JavaScript data to every API on the web.
Learn Object Methods in JavaScript — covering Defining Methods, The this Keyword, Getters & Setters, Built-in Object Methods with interactive visual examples and step-by-step explanations.
Arrays and objects are how JavaScript represents real-world data — a list of products, a user profile, a configuration file. Understanding how to create, read, update, and iterate over these structures is essential for any project.
This module covers array methods like map and filter, object property access, destructuring assignment, the spread operator, and JSON — the format every REST API speaks. Visual memory diagrams show how references and copies behave so you avoid common mutation bugs.
Understanding object methods is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.
Functions that belong to an object.
const calculator = { // Method shorthand (preferred): add(a, b) { return a + b; }, // Function expression: subtract: function(a, b) { return a - b; }, // ✗ Arrow (avoid for methods — wrong 'this'): multiply: (a, b) => a * b, }; calculator.add(5, 3); // 8 calculator.subtract(10, 4); // 6
💡 Use the shorthand syntax — it's concise and properly handles this.
'this' refers to the object calling the method.
const user = { name: "Alice", greet() { return `Hi, I'm ${this.name}`; } }; user.greet(); // "Hi, I'm Alice"
When you call user.greet(), 'this' points to 'user' — the object before the dot.
Computed properties that look like regular access.
const user = { firstName: "Alice", lastName: "Smith", // Getter — accessed like a property: get fullName() { return `${this.firstName} ${this.lastName}`; }, // Setter — assigned like a property: set fullName(value) { const [first, last] = value.split(" "); this.firstName = first; this.lastName = last; } }; user.fullName; // "Alice Smith" (calls getter) user.fullName = "Bob Jones"; // calls setter user.firstName; // "Bob"
get
Runs when you read the property
set
Runs when you assign to the property
Utilities for working with any object.
const user = { name: "Alice", age: 28, role: "dev" }; // Keys, values, entries: Object.keys(user); // ["name", "age", "role"] Object.values(user); // ["Alice", 28, "dev"] Object.entries(user); // [["name","Alice"],["age",28],...] // Merge/copy: Object.assign({}, user, { age: 29 }); // { name: "Alice", age: 29, role: "dev" } // Freeze (make immutable): const frozen = Object.freeze({ x: 1 }); frozen.x = 2; // silently fails (or throws in strict) // Create from entries: Object.fromEntries([["a", 1], ["b", 2]]); // { a: 1, b: 2 }
| Method | Returns |
|---|---|
| Object.keys(obj) | Array of key strings |
| Object.values(obj) | Array of values |
| Object.entries(obj) | Array of [key, value] pairs |
| Object.freeze(obj) | Frozen object (immutable) |
| Object.assign(target, ...) | Merged target object |
Use expressions as property names.
// Dynamic keys with []: const field = "email"; const user = { name: "Alice", [field]: "alice@test.com", // key = "email" }; // { name: "Alice", email: "alice@test.com" } // Useful for building objects dynamically: function createPair(key, value) { return { [key]: value }; } createPair("color", "blue"); // { color: "blue" } // With template literals: const prefix = "data"; const obj = { [`${prefix}Id`]: 1, [`${prefix}Name`]: "test", }; // { dataId: 1, dataName: "test" }
Common questions about object methods.