JavaScript - 16

JavaScript - 16: Working with Objects & Methods

Objects can store more than data. They can also contain functions that perform actions.

When a function belongs to an object, it is commonly called a method.

In this lesson, you will create a calculator object with methods for addition, subtraction, and multiplication.

Your challenge: Build a calculator object with three methods, then call those methods and print their returned results.

Objects can contain functions

In an earlier lesson, you created objects containing properties such as: name, age, and subjects.

Objects can also store functions.

For example: add: function(a, b) { return a + b; }

Because this function belongs to an object, we call it a method.

Property vs. method

A property usually stores information:

name: "Calculator"

A method stores a function that performs an action:

add: function(a, b) { return a + b; }

Both belong to the object, but they serve different purposes.

Build the calculator object

Your object can begin like this:

const calculator = { ... };

Inside the curly braces, create the three methods:

add
subtract
multiply

Each method should accept two parameters.

The add method

A method for addition could look like:

add: function(a, b) { return a + b; }

The parameters a and b receive the values passed into the method.

The return statement sends the calculated result back.

Call a method with dot notation

You accessed object properties earlier with dot notation, such as: student.name

Methods use the same idea.

To call the calculator's add method:

calculator.add(15, 7)

JavaScript finds the add method inside the calculator object and runs it using 15 and 7 as arguments.

The returned result is: 22

Print the returned result

Because the method returns a value, you can use it directly inside console.log():

console.log("Add:", calculator.add(15, 7));

The method runs first, returns the result, and then that result is printed.

Create the subtraction method

Subtraction follows the same pattern:

subtract: function(a, b) { return a - b; }

Calling: calculator.subtract(20, 8)

returns: 12

Create the multiplication method

For multiplication:

multiply: function(a, b) { return a * b; }

Calling: calculator.multiply(6, 4)

returns: 24

Why put these functions inside an object?

The methods all belong to the same idea: a calculator.

Grouping them inside one object keeps related behavior together.

Instead of having separate functions named:

add()
subtract()
multiply()

you now have:

calculator.add()
calculator.subtract()
calculator.multiply()

That makes it clearer that these operations belong to the calculator.

Store a method result

Returned values from methods can also be stored in variables.

For example:

const total = calculator.add(8, 12);

Now total contains 20.

You can print it later: console.log("Total:", total);

Use one result in another method

Because methods return values, you can combine them.

Try:

const result = calculator.multiply(calculator.add(2, 3), 4);

First: calculator.add(2, 3) returns 5.

Then JavaScript effectively runs: calculator.multiply(5, 4)

The final result is 20.

Objects can mix properties and methods

An object does not need to contain only methods.

For example, a calculator could also have:

name: "Basic Calculator"

alongside its methods.

Then you could access: calculator.name

or call: calculator.add(4, 5)

from the same object.

A shorter method syntax

JavaScript also allows a shorter way to write object methods.

Instead of:

add: function(a, b) { return a + b; }

you can write:

add(a, b) { return a + b; }

Both versions create a method.

For this lesson, either style is fine. The longer version makes the connection between functions and methods especially clear for beginners.

Experiment: Add a fourth method called divide.

It could return: a / b

Then test it with: calculator.divide(20, 4)

Extra challenge: Add a method called square that accepts one number and returns that number multiplied by itself.

For example: calculator.square(6) should return 36.

Good JavaScript habit: Group related data and behavior together when it makes the code easier to understand. An object such as calculator gives related methods a clear home instead of leaving several unrelated-looking function names scattered through the program.

const calculator = {
  add: function(a, b) {
    return a + b;
  },

  subtract: function(a, b) {
    return a - b;
  },

  multiply: function(a, b) {
    return a * b;
  }
};

console.log("Add:", calculator.add(15, 7));
console.log("Subtract:", calculator.subtract(20, 8));
console.log("Multiply:", calculator.multiply(6, 4));