JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Objects

An object is a data type that is composed of a collection of properties and methods.

Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life.

In JavaScript, everything is basically an Object:

  • Strings can be objects (if defined with the new keyword)
  • Numbers can be objects (if defined with the new keyword)
  • Booleans can be objects (if defined with the new keyword)
  • Dates are always objects
  • Maths are always objects
  • Arrays are always objects
  • Regular expressions are always objects
  • Functions are always objects
  • Objects are objects

All JavaScript values, except primitives, are objects.


JavaScript Primitives

A primitive value is a value that has no properties or methods.

In JavaScript there are 5 primitive types:

  • string
  • number
  • boolean
  • null
  • undefined

Objects are Variables

A JavaScript variable can contain only one value.

Run code

Objects are also variables, but an object can contains many values.

An object can be written as a name:value pair, separate by colon(:).

Run code

A JavaScript object is a collection of unordered properties.


Object Properties

A property is the association between a name and value within an object, and it can contain any data-type.

A property generally refers to the characteristic of an object.

Property Property Value
firstName Vishal
lastName Choudhary
age 22
location New Delhi

You will learn more about properties in the next chapter.



Object Methods

A method is a function that is the value of an object property, and therefore a task that an object can perform.

Methods are stored in properties as function definitions.

Property Property Value
firstName Vishal
lastName Choudhary
age 22
location New Delhi
getName function() {return this.firstName + " " + this.lastName;}

Note: A method is a function stored as a property.


Creating a JavaScript Object

JavaScript has a number of predefined objects. In addition, you can create your own objects.

There are different ways to create new objects:

  • Using object literal, which uses curly brackets: {}
  • Using object constructor, which uses the new Object()
  • Alternatively, you can first create a constructor function and then instantiate an object invoking that function

Using an Object Literal

Using object literal is the easiest way to create a JavaScript Object.

Using an object literal, you both define and create an object in one statement.

The following example creates a new JavaScript object with four properties:

Run code

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

Run code

Using new Object()

Using object constructor is another way to create a JavaScript Object.

The following example creates a new JavaScript object with four properties:

Run code

The two examples above do exactly the same. There is no need to use new Object().

Using object literal is the more common and preferred method, as it has less potential for inconsistencies and unexpected results.


Using Constructor Function

Alternatively, you can create an object with these two steps:

  • Define the object type by writing a constructor function (for convention use a capital initial letter)
  • Create an instance of the object with new keyword

The following example defines the object type by writing a constructor function:

Now we can create an object called user1 as follows:

Run code

We will discuss constructor function later in this tutorial.


JavaScript Objects are Mutable

Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values.

A mutable object is an object whose state can be modified after it is created.

Immutables are the objects whose state cannot be changed once the object is created.

String and Numbers are Immutable. Lets understand this with an example:

On appending the "immutableString" with a string value, following events occur:

  • Existing value of "immutableString" is retrieved
  • "World" is appended to the existing value of "immutableString"
  • The resultant value is then allocated to a new block of memory
  • "immutableString" object now points to the newly created memory space
  • Previously created memory space is now available for garbage collection

Objects are mutable: They are addressed by reference, not by value.

If user is an object, the following statement will not create a copy of user:

The object x is not a copy of user. It is user. Both x and user are the same object.

Any changes to x will also change user, because x and user are the same object.

Run code

Comparing Objects

In JavaScript, objects are a reference type. Two distinct objects are never equal, even if they have the same properties.

Run code

Only comparing the same object reference with itself yields true:

Run code