JavaScript Objects


Everything in JavaScript is an object: strings, numbers, arrays, functions...

In addition, JavaScript allows custom objects.


All things are objects

JavaScript provides multiple built-in objects, such as String, Date, Array, etc. Objects are just special data types with properties and methods.

  • Boolean can be an object.

  • Number type can be an object.

  • String can also be an object

  • Date is an object

  • Mathematics and regular expressions are also objects

  • Array is an object

  • Functions can be objects


JavaScript object

Object is just a special kind of data. Objects have properties and methods .


Access object properties

Attributes are values related to objects.

The syntax for accessing object properties is:

objectName.propertyName

This example uses the length property of the String object to get the length of the string:

var message="Hello World!";
var x=message.length;

After the above code is executed, the value of x will be:

12

Methods of accessing objects

Methods are actions that can be performed on objects.

You can call methods with the following syntax:

objectName.methodName()

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

var message="Hello world!";
var x=message.toUpperCase();

After the above code is executed, the value of x will be:

HELLO WORLD!

Create JavaScript object

With JavaScript, you can define and create your own objects.

There are two different ways to create a new object:

  • Use Object to define and create an instance of an object.

  • Use functions to define objects, and then create new object instances.

Use Object

In JavaScript, almost all objects are instances of the Object type, and they all inherit properties and methods from Object.prototype.

The Object constructor creates an object wrapper.

The Object constructor will create an object based on the given parameters, specifically in the following situations:

  • If the given value is null or undefined, an empty object will be created and returned.

  • If the value passed in is a basic type, an object of its packaging type will be constructed.

  • If the value passed in is a reference type, this value will still be returned, and the variables copied by them retain the same reference address as the source object.

  • When called as a non-constructor function, Object's behavior is equivalent to new Object().

Syntax format:

// Called in the form of a constructor
new Object([value])

value can be any value.

The following example uses Object to generate Boolean objects:

// Equivalent to o = new Boolean(true);
var o = new Object(true);

This example creates a new instance of the object and adds four properties to it:

Example

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

Try It! 

You can also use object literals to create objects, the syntax format is as follows:

{name1: value1, name2: value2,...nameN: valueN}

In fact created inside the braces name:value pair, then name:value by commas , separated.

Example

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

Try It! 

A JavaScript object is a name:value collection.


Use object constructor

This example uses functions to construct objects:

Example

function person(firstname,lastname,age,eyecolor)
{
     this.firstname=firstname;
     this.lastname=lastname;
     this.age=age;
     this.eyecolor=eyecolor;
}

Try It! 

In JavaScript, this usually points to the function we are executing, or to the object to which the function belongs (runtime)


Create JavaScript object instance

Once you have an object constructor, you can create new object instances, like this:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

Add attributes to JavaScript objects

You can add new properties to existing objects by assigning values to them:

Assuming that the person object already exists - you can add these new attributes to it: firstname, lastname, age, and eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

After the above code is executed, the value of x will be:

John

Add methods to JavaScript objects

Methods are nothing more than functions attached to objects.

Define the method of the object inside the constructor function:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

The value of the changeName() function name is assigned to the lastname property of person.

Now you can try:

myMother.changeName("Doe");

 Try It! 


JavaScript class

JavaScript is an object-oriented language, but JavaScript does not use classes.

In JavaScript, classes are not created, and objects are not created through classes (just like in other object-oriented languages).

JavaScript is based on prototypes, not based on classes.


JavaScript for...in loop

The JavaScript for...in statement loops through the properties of the object.

Grammar

for (variable in object)
{
    Code executed...
}

Note: The code block in the for...in loop will be executed once for each attribute.

Loop through the properties of the object:

Example

var person={fname:"John",lname:"Doe",age:25};
 
for (x in person)
{
     txt=txt + person[x];
}

 Try It! 


JavaScript objects are mutable

Objects are mutable, they are passed by reference.

The following instance of the person object will not create a copy:

var x = person; // will not create a copy of person, it is a reference

If you modify x, the attributes of person will also change:

Example

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
 
var x = person;
x.age = 10; // x.age and person.age will change

 Try It!