Loading...
Loading...
Functions on objects, the 'this' keyword, and built-in utilities.
An object method is a function stored as a property of an object and called with obj.method(). Inside it, this refers to the object before the dot. JavaScript also has built-in Object methods, such as Object.keys(), Object.values(), Object.entries(), Object.assign(), and Object.freeze(), for reading, copying, and locking objects.
Step through this example in the visualizer
JavaScript's core data structures are arrays (ordered lists accessed by index) and objects (key-value records accessed by name). Almost all real-world data, such as a list of products, a user profile, or an API response, is some combination of the two, so creating, reading, updating, and looping over them 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.
Methods bundle data with the behavior that uses it, and this is one of the most common sources of JavaScript bugs: a method loses its this when it is passed around as a callback. The built-in Object helpers are what you reach for every time you loop over, copy, or protect an object.
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.