X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

JavaScript Objects


JavaScript objects are containers for variables called properties and methods.


Real Life Objects, Properties, and Methods

In real life, a car is an object.

A car has properties like weight and color, and methods like start and stop:

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 have the same properties, but the property values differ from car to car.

All cars have the same methods, but the methods are performed at different times.


JavaScript Objects

In JavaScript, almost "everything" is an object.

Note In JavaScript, objects are king. When you understand objects, you will understand JavaScript.

You have already learned that JavaScript variables are containers for data values.

This code assigns the value "Fiat" to a variable named car:

var car = "Fiat";

Objects are variables too. But objects can contain many values (many variables).

var car {type:"Fiat", model:500, color:"white"};

In the example above, 3 values ("Fiat", 500, "white") are assigned to the variable named car.

In the example above, 3 variables (type, model, color) are assigned to the variable named car:

Note JavaScript objects are containers for variables.


Object Definition

With an object literal, you define and create a JavaScript object:

Example

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Try it Yourself »

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

Example

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

Try it Yourself »


Object Properties

It is ok to say: "JavaScript objects are containers for variables".

But, it is more common to say: "JavaScript objects are containers for named values.

Named values are written as name : value pairs (name and value separated by a colon).

The name value pairs, in JavaScript objects, are called object properties.

Note JavaScript objects are containers for variables called properties.

Objects written as name value pairs are similar to:

  • Associative arrays in PHP
  • Dictionaries in Python
  • Hash tables in C
  • Hash maps in Java
  • Hashes in Ruby and Perl

Accessing Object Properties

You can access object properties in two ways:

Example1

person.lastName;

Try it Yourself »

Example2

person["lastName"];

Try it Yourself »


Object Methods

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

It will execute (as a function) when it is invoked with ().

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

Example

name = person.fullName();

Try it Yourself »

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

Example

name = person.fullName;

Try it Yourself »

Note JavaScript objects are containers for variables called properties and methods.

You will learn much more about functions, properties, and methods, later in this tutorial.


Accessing Object Methods

You create an object method with the following syntax:

methodName : function() { code lines }

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.

There are many different ways to create, use, and change JavaScript objects.

There are also many different ways to create, use, and change properties and methods.

Note You will learn much more about objects later in this tutorial.


Try it Yourself Summary

Create a JavaScript object I

Create a JavaScript object II

Access object properties I

Access object properties II

Access a function property as a method

Access a function property as a property



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook