❮ Js Htmldom Nodelist Met Win Postmessage ❯

JavaScript `Objects`

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

Moreover, JavaScript allows you to define custom objects.

Everything is an Object

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

Booleans can be objects.
Numbers can be objects.
Strings can also be objects.
Dates are objects.
Math and regular expressions are objects.
Arrays are objects.
Even functions can be objects.

JavaScript Objects

Objects are a special kind of data. Objects have properties and methods.

Accessing Object Properties

Properties are values associated with an object.

The syntax for accessing object properties is:

objectName.propertyName

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

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

After the above code executes, x will be:

Accessing Object Methods

Methods are actions that can be performed on objects.

You can call a method with the following syntax:

objectName.methodName()

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

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

After the above code executes, x will be:

HELLO WORLD!

Creating JavaScript Objects

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

There are two different methods to create new objects:

Using Object to define and create an instance of an object.
Using a function to define an object, then create new object instances.

Using Object

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

The Object constructor creates an object wrapper.

The Object constructor creates an object based on the given parameters:

If the value is null or undefined, it will create and return an empty object.
If a primitive value is passed, it will construct an object of the wrapper type.
If a reference value is passed, it will return that value, with the copied variable holding the same reference address.
When called as a non-constructor, Object behaves like new Object().

Syntax:

// Called as a constructor
new Object([value])

value can be any value.

The following example uses Object to generate a Boolean object:

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

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

Example

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

You can also create objects using object literals, with the following syntax:

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

This involves creating name:value pairs within curly braces, separated by commas.

Example

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

JavaScript objects are collections of name:value pairs.

Using Object Constructors

This example uses a function to construct an object:

Example

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

In JavaScript, this usually refers to the function itself or the object it belongs to, depending on the runtime context.

Creating JavaScript Object Instances

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");

Adding Properties to JavaScript Objects

You can add new properties to an existing object by simply assigning values to them:

Assuming the person object already exists, you can add new properties like firstname, lastname, age, and eyecolor:

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

x = person.firstname;

After the above code executes, x will be:

John

Adding Methods to JavaScript Objects

Methods are functions attached to objects.

Define object methods 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 changeName() function assigns the value of name to the person's lastname property.

Try It Yourself:

JavaScript Classes

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

In JavaScript, you do not create classes, nor do you create objects from classes as in other object-oriented languages.

JavaScript is prototype-based rather than class-based.

JavaScript for...in Loop

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

Syntax

for (variable in object) {
    code to be executed…
}

Note: The code block in the for...in loop will execute once for each property.

Example

Loop through the properties of an object:

Example

var person = {fname:"John", lname:"Doe", age:25}; 

for (x in person) {
    txt = txt + person[x];
}

JavaScript Objects are Mutable

Objects are mutable; they are addressed by reference, not by value.

The following example does not create a copy of the person object:

var x = person;  // Does not create a copy of person, but a reference

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

Example

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

var x = person;
x.age = 10;           // Both x.age and person.age will change

❮ Js Htmldom Nodelist Met Win Postmessage ❯