Object methods

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Object Methods

Example

<!DOCTYPE html>

<html>

<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>

<p>Because <b>fullName</b> is a method of the person object.</p>

<p id=”demo”></p>

<script>

// Create an object:

const person = {

  firstName: “John”,

  lastName: “Doe”,

  id: 5566,

  fullName : function() {

    return this.firstName + ” ” + this.lastName;

  }

};

// Display data from the object:

document.getElementById(“demo”).innerHTML = person.fullName();

</script>

</body>

</html>

Output

The JavaScript this Keyword

In this example, this refers to the person object.

Because fullName is a method of the person object.

John Doe

What is this?

In JavaScript, this keyword refers to an object.

This keyword refers to different objects depending on how it is used:

  • In an object method, this refers to the object.
  • this refers to the global object.
  • In a function, this refers to the global object.
  • In a function, in strict mode, this is undefined.
  • In an event, this refers to the element that received the event.
  • Methods like call(), apply(), and bind() can refer to any object.

JavaScript Methods

JavaScript methods are defined as actions that can be performed on objects.

A JavaScript method is a property that consists of a function definition.

Property

Value

firstName

John

lastName

Doe

age

50

eyeColor

blue

fullName

function() {return this.firstName + ” ” + this.lastName;}

Accessing Object Methods

You access an object method with the following syntax:

objectName.methodName()

You will typically describe fullName() as a method of the person object, and fullName as a property.

The fullName property is executed (as a function) when it is invoked with ().

This example accesses the fullName() method of a person object:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Creating and using an object method.</p>

<p>A method is actually a function definition stored as a property value.</p>

<p id=”demo”></p>

<script>

const person = {

  firstName: “John”,

  lastName: “Doe”,

  id: 5566,

  fullName: function() {

    return this.firstName + ” ” + this.lastName;

  }

};

document.getElementById(“demo”).innerHTML = person.fullName();

</script>

</body>

</html>

Output

JavaScript Objects

Creating and using an object method.

A method is actually a function definition stored as a property value.

John Doe

If you access the fullName property, without (), it returns the function definition:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>An object method is a function definition stored as a property value.</p>

<p>If you access it without (), it will return the function definition:</p>

<p id=”demo”></p>

<script>

const person = {

  firstName: “John”,

  lastName: “Doe”,

  id: 5566,

  fullName: function() {

    return this.firstName + ” ” + this.lastName;

  }

};

document.getElementById(“demo”).innerHTML = person.fullName;

</script>

</body>

</html>

Output

JavaScript Objects

An object method is a function definition stored as a property value.

If you access it without (), it will return the function definition:

function() { return this.firstName + " " + this.lastName; }

Adding a Method to an Object

Adding a new method to an object is easy:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p id=”demo”></p>

<script>

const person = {

  firstName: “John”,

  lastName: “Doe”,

  id: 5566,

};

person.name = function() {

  return this.firstName + ” ” + this.lastName;

};

document.getElementById(“demo”).innerHTML =

“My father is ” + person.name();

</script>

</body>

</html>

Output

JavaScript Objects

My father is John Doe

Using Built-In Methods

This example uses the toUpperCase() method of the String object, to convert a text to uppercase:

let message = “Hello world!”;

let x = message.toUpperCase();

The value of x, after execution of the code above, will be:

HELLO WORLD!

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p id=”demo”></p>

<script>

const person = {

  firstName: “John”,

  lastName: “Doe”,

  id: 5566,

};

person.name = function() {

  return (this.firstName + ” ” + this.lastName).toUpperCase();

};

document.getElementById(“demo”).innerHTML =

“My father is ” + person.name();

</script>

</body>

</html>

Output

JavaScript Objects

My father is JOHN DOE