JavaScript Objects

❮ Previous Next ❯

Real Life Objects, Properties, and Methods

In everyday reality, a car is a tangible thing.

A car has characteristics such as its weight and color, and actions it can perform like starting and stopping. In reality, a car is like an item or thing.

Object	Properties	Methods
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

All cars share common characteristics, but each car can have different values for these characteristics.

All cars use the same techniques, but these techniques are applied at various moments.

JavaScript Objects

You already know that in JavaScript, variables are like containers that hold information.

This piece of code sets a basic value (Fiat) to a variable called car.

Objects are like containers for information. They can hold a bunch of different pieces of data.

This piece of code gives a bunch of details (Fiat, 500, white) to a special container called car.

The information is presented in the format of name:value pairs. This means that there is a name followed by a colon and then a corresponding value.

It is a common practice to declare objects with the const keyword.

Learn more about using const with objects in the chapter: JS Const.

Object Definition

You make a JavaScript object using something called an object literal like this:

Spaces and line breaks are not important. An object definition can span multiple lines:

Object Properties

In JavaScript objects, the things that show information in the form of name:values are known as "properties."

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue

Accessing Object Properties

You can access object properties in two ways:

objectName.propertyName

objectName["propertyName"]

JavaScript objects are containers for named values called properties.

Object Methods

Things can also do actions.

Methods are like actions you can do with objects.

Methods are stored in properties as function definitions.

Property	Property Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

A method is a function stored as a property.

Example

const person = {
firstName: "John",
lastName : "Doe",
id       : 5566,
fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

In the sample provided, the word this means the person object.

Let's break it down: this.firstName refers to the firstName attribute of this.

Basically, this.firstName refers to the firstName attribute of a person.

What is this?

In JavaScript, when we use the word this, it's talking about a specific thing.

Which object depends on how this is being invoked (used or called).

The word thisthis can mean different things based on how it's used in code.

In an object method, this refers to the object.

Alone, 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 this to any object.

Note this is not a variable. It is a keyword. You cannot change the value of this.

The this Keyword

In a function definition, this refers to the owner of the function.

In the example above, this is the person object that owns the fullName function.

Put simply, this.firstName refers to the firstName feature of this specific object.

Learn more about this in The JavaScript this Tutorial.

Accessing Object Methods

You access an object method with the following syntax:

objectName.methodName()

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

Do Not Declare Strings, Numbers, and Booleans as Objects!

When you use the word new to declare a JavaScript variable, it becomes an object.

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Don't use String, Number, or Boolean objects. They make your code more complicated and make it run slower.

You will learn more about objects later in this tutorial.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Variables</h2>
    <p id="demo"></p>
    <script>
      // Create and display a variable:
      let car = "Fiat";
      document.getElementById("demo").innerHTML = car;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p id="demo"></p>
    <script>
      // Create an object:
      const car = {
        type: "Fiat",
        model: "500",
        color: "white"
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML = "The car type is " + car.type;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p>There are two different ways to access an object property.</p>
    <p>You can use person.property or person["property"].</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p>There are two different ways to access an object property.</p>
    <p>You can use person.property or person["property"].</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"];
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p>An object method is like a recipe stored inside an object. It's a special type of function that tells the object how to do something.</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>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Objects</h2>
    <p>If you use an object method without parentheses (), it will show you what the function does:</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>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript Objects

Real Life Objects, Properties, and Methods

JavaScript Objects

Object Definition

Object Properties

Accessing Object Properties

Object Methods

Example

What is this?

See Also:

The this Keyword

Accessing Object Methods

Do Not Declare Strings, Numbers, and Booleans as Objects!

Web Development