Loading...

JavaScript Object Methods

A mug’s name and price already sit together. What the page still needs is a small job that belongs to that mug: build its label, bump a cart count, greet the shopper. Put the function on the object. That function is a method.

After keys and lists

The properties lesson added a field, removed one, asked in, stepped into a nested object, and listed names with Object.keys. No function ran there. Here one property’s value is a function, and you run it from the object that holds it.

Five moves with a method

📊 Store, call, shorthand, this, argument

Move Syntax What you get
store greet: function () { return "Hi"; } a function sitting on the object
call product.greet() the function runs and you get its result
shorthand label() { return this.name; } the same kind of function, written shorter
this this.name inside the method the object that sat before the dot
argument cart.add(3) extra input for that one call

Name the move, then type the line. Storing does not run the function. Shorthand is not a new kind of value. this is not a global product name you hope exists. An argument is input for this call, not a second object.

Store a function on the object

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);

The value can be a function

name holds a string. greet holds a function. typeof product.greet is "function". Nothing has run yet, so you do not see Hi. The mug’s name is still there beside the function.

Call the method with parentheses

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());

Parentheses are the run button

product.greet() steps into the function. The console prints Hi. Drop the parentheses and you are looking at the function itself, not at what it returns. The dot tells JavaScript which object the call belongs to.

Method shorthand inside the literal

javascript 
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());

Shorthand is only a shorter spelling

Inside the braces, label() { ... } stores a function on label. It is the same kind of property as greet: function () { ... }, just less to type. product.label() runs it. The body reads this.name, so the console prints Mug.

Read sibling fields with this

javascript 
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());

On a plain call, this is the object before the dot

product.tag() means: run tag, and let this be product. Then this.name and this.price are that mug’s own fields. The console prints Mug — 8. A bare name inside the method is a different lookup; it is not the property. When the call is no longer shaped like object.method(), this can point elsewhere — that is the next lesson. This page stays with the plain call.

Pass an argument into the method

javascript 
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));

The method can take input for this call

add expects extra. cart.add(3) hands over 3, adds it to count, and returns the new total. The console prints 5. The cart keeps that updated count. The argument lives for the call; it becomes a property only if you store it yourself.

Pick the move that matches the job

The function should live on the object? Store it, long form or shorthand. You want the result? Call with (). You want the object’s own fields? Read them through this. You need a number just for this run? Pass an argument. Object.keys listed names on the previous page. The next page stays with this when the call shape changes.

Put the method’s label on the page

Give the product a name, a price, and tag. Write product.tag() into a paragraph.

Page demo — method label

html 
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>

The paragraph shows Mug — 8. tag built that string from the product’s own fields. Change only name or price, refresh, and read the new line. Next lesson: the this keyword — where this points when the call is not a plain object.method().

Practice steps

  1. Store a function on greet and log typeof of that property.
  2. Call product.greet() and read Hi.
  3. Write label with shorthand and log product.label().
  4. Build tag so this.name and this.price form one string.
  5. Start count at 2, call add(3), and read 5.
  6. In the HTML demo, change only name or price, refresh, and read the paragraph.

Frequent slip-ups

  • Logging product.greet without () and expecting Hi
  • Treating shorthand label() {} as a string property
  • Writing bare name inside the method instead of this.name
  • Expecting cart.add(3) to leave count at 2
  • Reaching for Object.keys when you meant to call a method
  • Parking an arrow function in the method — the next lesson follows this when the call shape changes

Summary

  • A method is a function stored as a property
  • object.method() runs it and gives you the return value
  • Shorthand name() {} stores that same kind of function
  • On a plain call, this is the object before the dot
  • A parameter receives the argument for that call
  • The method’s string can fill one line on the page
  • Next: the this keyword, when the call is not object.method()

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 35 of 36
Javascript Tutorial