JavaScript Introduction | Object | Working with Objects

this Keyword

In JavaScript, the this keyword points to the object that contains the JavaScript code area where the keyword is used.

For example, the this keyword used inside a method points to the object that contains that method.
The this keyword used inside an object points to the object itself.
Because this is a keyword rather than a variable, users cannot arbitrarily change the value it points to.

The this keyword used inside an object constructor function does not have any value and is simply replaced by the new object.

Deleting Object Properties

The following are ways to reference object properties in JavaScript.

Syntax

objectName.propertyName
or
objectName["propertyName"]

In JavaScript, you can delete an object property with the delete keyword.

Syntax

delete objectName.propertyName;

When a property is deleted with the delete keyword, not only the property value but also the property itself is deleted.
This keyword was originally created only to delete object properties, so it does nothing when used on functions or variables.

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("white", "Maru", 1);
delete myDog.age; // deletes the age property.
// outputs undefined because the age property has been deleted.
document.write("My dog's age is " + myDog.age + ".");

You can freely add or delete new properties or methods on prototypes you create directly, as shown above.
You can also modify the prototypes of JavaScript standard objects arbitrarily, but serious errors may occur.
Therefore, you should not modify the prototypes of JavaScript standard objects.

Iterating over Object Properties

In JavaScript, you can iterate over all properties of an object with the for / in statement.
The for / in statement makes it easy to iterate over all enumerable properties of an object.

Besides the for / in statement, the following methods can also be used to iterate over object properties.

1. Object.keys()
2. Object.getOwnPropertyNames()

The Object.keys() method returns an array containing the names of the object’s own enumerable properties.
The Object.getOwnPropertyNames() method returns an array containing the names of all own properties of the object.

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("white", "Maru", 1);

// Sets the enumerable attribute of the color property to false.
Object.defineProperty(myDog, 'color', {enumerable : false} );
// Returns an array containing the names of the object's own enumerable properties.
document.write(Object.keys(myDog) + "<br>");       // name, age
// Returns an array containing the names of all own properties of the object.
document.write(Object.getOwnPropertyNames(myDog)); // color, name, age

The Object.defineProperty() method was added in ECMAScript 5 to add properties to an object.
It can also set the attributes of the property being added.

Comparing Objects

In JavaScript, two separate objects can never be said to be equal, even if all their property values are the same.

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("white", "Maru", 1);
var hisDog = new Dog("white", "Maru", 1);      // creates an object with all the same property values.
document.write((myDog == hisDog) + "<br>");    // false
document.write((myDog === hisDog) + "<br>");   // false

var herDog = hisDog;                           // assigns the hisDog object to variable herDog.
document.write((hisDog == herDog) + "<br>");   // true
document.write((hisDog === herDog) + "<br>");  // true

In the example above, the myDog and hisDog objects have the same property values.
However, because these two objects are separate objects, comparison with the equality (==) operator and the strict equality (===) operator both returns false.

In the example above, the hisDog object is assigned to variable herDog.
A variable assigned an object in this way is called an object reference, and from that point on, variable herDog points to the hisDog object.
In other words, an object reference does not store the object itself, but stores the address where the object is located.
Therefore, comparing variables herDog and hisDog with the equality and strict equality operators returns true in both cases.