JavaScript Introduction | Object | Object Properties and Methods

Object Properties

Every JavaScript object inherits all properties of the Object object and the Object.prototype object.
The prototype property lets you easily add new properties or methods to an existing prototype.

Object Methods

Every JavaScript object inherits all properties and methods of the Object object and the Object.prototype object.
Commonly used representative object methods are as follows.

1. hasOwnProperty()
2. propertyIsEnumerable()
3. isPrototypeOf()
4. isExtensible()
5. toString()
6. valueOf()

hasOwnProperty() Method

The hasOwnProperty() method checks whether a specific property exists on the object.
It checks only properties declared directly on that object, and returns false for inherited properties even if they have the same name.

function Dog(color, name, age, family) {
    this.color = color;
    this.name = name;
    this.age = age;
    this.family = family;
    this.breed = function() {
        return this.color + " " + this.family;
    }
}
var myDog = new Dog("black", "Gom", 3, "Bulldog");
myDog.hasOwnProperty("color"); // true
myDog.hasOwnProperty("breed"); // true
myDog.hasOwnProperty("class"); // inherited property, so returns false.

propertyIsEnumerable() Method

The propertyIsEnumerable() method checks whether a specific property exists on the object and is enumerable.
In other words, this method checks whether the result of hasOwnProperty() is true and the property is also enumerable.

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

document.write(myDog.propertyIsEnumerable("color") + "<br>"); // false
document.write(myDog.propertyIsEnumerable("name") + "<br>");  // true
document.write(myDog.propertyIsEnumerable("age"));            // true

An enumerable property means a property whose internal enumerable flag is set to true.
These properties can be accessed with a for / in statement.

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.

isPrototypeOf() Method

The isPrototypeOf() method checks whether the current object exists in the prototype chain of a specific object.

var day = new Date(); // creates a Date object.
// Checks whether the prototype of object day is Date.prototype.
document.write(Date.prototype.isPrototypeOf(day));          // true
document.write(Date.prototype.isPrototypeOf(new String())); // false

isExtensible() Method

The isExtensible() method returns whether new properties can be added to an object.

In JavaScript, new properties can be added to every object by default. However, the preventExtensions() method can be used to prevent new properties from being added to that object.

var day = new Date(); // creates a Date object.
// Checks whether a new property can be added to object day.
document.write(Object.isExtensible(day) + "<br>"); // true

// Prevents new properties from being added to that object.
var myDay = Object.preventExtensions(day);
document.write(Object.isExtensible(day));          // false

toString() Method

The toString() method returns the value of the object that called this method as a string.

var arr = [10, "string", true]; // array
var bool = false;               // boolean
function func() { return 0; }   // function
arr.toString();  // 10,string,true
bool.toString(); // false
func.toString(); // the entire function source code is returned as a string.

The toString() method does not receive any arguments.

valueOf() Method

The valueOf() method returns the primitive type value of a specific object.
In JavaScript, when an object is used where a primitive type value is expected, this method is called internally.
If an object does not have a primitive type value, this method returns the object itself.

function func(n) {
    this.number = n;
}
myFunc = new func(4);
document.write(myFunc + 5); // ① : [object Object]5

func.prototype.valueOf = function() { // defines the valueOf() method.
    return this.number;
}
document.write(myFunc + 5); // ② : 9

In part ① of the example above, the myFunc object is used where a number type value is expected for arithmetic operation. Therefore, JavaScript internally calls the valueOf() method of that object. However, because the valueOf() method of this object has not yet been defined, the object itself is returned. Therefore, string concatenation rather than arithmetic operation is performed.

After that, the example defines the valueOf() method using the prototype property. Therefore, in part ②, the internally called valueOf() method returns the value of the number property of that object. As a result, arithmetic operation is performed normally.

Defining getter and setter Methods

Properties defined with getter and setter methods are called accessor properties, unlike data properties that hold simple values.

A getter method is a method for retrieving the value of a specific property.
When JavaScript accesses the value of an object property, it calls the getter method without passing any arguments.

A setter method is a method for setting the value of a specific property.
When JavaScript changes the value of an object property, it calls the setter method by passing the value to assign as an argument.

The following example defines a getter method.

var gildong = { age: 18 };
document.write(gildong.age + "<br>"); // 18

Object.defineProperty(gildong, "americanAge", { get: function() { return this.age - 1; } });
document.write(gildong.americanAge); // 17

In the example above, when adding the americanAge property to the gildong object, the get keyword is used to define a getter method.
Therefore, when trying to reference that property, the predefined getter method is automatically called internally.

The following example defines a setter method.

var gildong = { age: 18 };
gildong.age = 20;
document.write(gildong.age + "<br>"); // 20

Object.defineProperty(gildong, "changeAge", { set: function(n) { this.age = this.age - n; } });
gildong.changeAge = 5;
document.write(gildong.age); // 15

In the example above, when adding the changeAge property to the gildong object, the set keyword is used to define a setter method.
Therefore, when trying to change the value of that property, the predefined setter method is automatically called internally.

The versions of major web browsers that support getter and setter methods are as follows.