JavaScript objects are collections of key-value pairs used to store and organize data. While objects by themselves are powerful, what makes them even more useful is the ability to add methods—functions stored as properties. These methods can perform actions using the object’s data.
In this tutorial, you’ll learn what object methods are, how to define them, and how to use some of JavaScript’s built-in object methods.
1. What Are Object Methods?
An object method is a function assigned to a property in an object. It can access the object’s data using the this keyword.
javascriptCopyEditlet person = {
firstName: "Alice",
lastName: "Smith",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // Output: Alice Smith
In the example above, fullName is a method that returns the full name of the person. The this keyword refers to the object that owns the method.
2. Defining Methods in Different Ways
Traditional Syntax
javascriptCopyEditlet car = {
brand: "Toyota",
start: function() {
console.log("Engine started");
}
};
ES6 Method Shorthand
javascriptCopyEditlet car = {
brand: "Toyota",
start() {
console.log("Engine started");
}
};
Both versions work the same way, but the shorthand is cleaner and more modern.
3. Using the this Keyword
The this keyword is crucial in object methods. It allows the method to refer to other properties in the same object.
javascriptCopyEditlet user = {
name: "John",
age: 30,
greet() {
console.log("Hi, my name is " + this.name);
}
};
user.greet(); // Hi, my name is John
Be careful when using this inside arrow functions, as they don’t have their own this and will use the this from their outer scope.
4. Common Built-in Object Methods
JavaScript also provides many built-in methods for working with objects.
Object.keys(obj)
Returns an array of the object’s keys.
javascriptCopyEditlet user = { name: "Anna", age: 25 };
console.log(Object.keys(user)); // ["name", "age"]
Object.values(obj)
Returns an array of the object’s values.
javascriptCopyEditconsole.log(Object.values(user)); // ["Anna", 25]
Object.entries(obj)
Returns an array of key-value pairs.
javascriptCopyEditconsole.log(Object.entries(user)); // [["name", "Anna"], ["age", 25]]
Object.assign(target, source)
Copies properties from one or more objects to a target object.
javascriptCopyEditlet obj1 = { a: 1 };
let obj2 = { b: 2 };
let result = Object.assign(obj1, obj2);
console.log(result); // { a: 1, b: 2 }
5. Adding and Deleting Methods Dynamically
You can add or remove methods from objects at runtime.
Adding
javascriptCopyEditlet dog = {};
dog.bark = function() {
console.log("Woof!");
};
dog.bark(); // Woof!
Deleting
javascriptCopyEditdelete dog.bark;
console.log(dog.bark); // undefined
6. Method Chaining (Advanced)
Method chaining allows you to call multiple methods on the same object in a single line, often by returning this from each method.
javascriptCopyEditlet calculator = {
value: 0,
add(n) {
this.value += n;
return this;
},
subtract(n) {
this.value -= n;
return this;
},
result() {
return this.value;
}
};
let final = calculator.add(10).subtract(3).result(); // 7
console.log(final);
Conclusion
Object methods in JavaScript are essential tools for structuring code that acts on object data. From defining your own methods to using built-in ones like Object.keys(), mastering these techniques will make your JavaScript programs more modular, readable, and powerful.