How to use inherited properties of an object in JavaScript

Own and inherited properties of an object in JavaScript

In JavaScript, an object is just a collection of key-value pairs called properties. Each property has a key and a value. The property key can be a string or a symbol, and the value can be anything.

Unlike other programming languages like Java, C#, or Python, there is no concept of true classes in JavaScript. Almost all objects in JavaScript are instances of Object; a global object that inherits properties from Object.prototype. Due to this prototypal inheritance, a property of an object can be either own or inherited.

In this article, you'll learn the difference between own and inherited properties from an object in JavaScript.

Own properties

A property that is defined directly on the object is called its own property.

Let us create a new JavaScript object:

const user = {
    name: 'John Doe',
    age: 25
};

The above user object is a plain JavaScript object that defines two own properties, name and age, directly on it.

To list all own properties of an object, you can use the built-in method called Object.getOwnPropertyNames():

const user = {
    name: 'John Doe',
    age: 25
};

const props = Object.getOwnPropertyNames(user);

console.log(props);     // [ 'name', 'age' ]

To check whether a property is the object's own or inherited property, you can call the hasOwnProperty() method on the object:

user.hasOwnProperty('name');    // true
user.hasOwnProperty('email');    // false

Inherited properties

Inherited property is a property that the object inherits from the prototype object.

For example, every JavaScript object inherits the toString property from its prototype object which evaluates to a function:

user.toString;    // function() {...}

When JavaScript evaluates the above expression (user.toString), it first looks inside the own properties of user to find the toString property. Since it is an inherited property, the search will fail. Then JavaScript moves on to the prototype object of user and finds the toString property.

Nested object inheritance

The prototype object is not the only way of inheriting properties. You can even create a new object by using an existing object as a prototype and inherit all of its properties.

The following example creates an object called employee that inherits from the user object:

const user = {
    name: 'John Doe',
    age: 25
};

const employee = Object.create(user, {
    department: {
        value: 'HR',
        enumerable: true
    }
});

employee.hasOwnProperty('name');          // false
employee.hasOwnProperty('department');    // true

The employee object has its own property department, and inherits name and age properties from its prototype user.

Overriding inherited properties

You can also override the inherited properties and define them directly on the object.

Let us define the toString property directly on the user object:

const user = {
    name: 'John Doe',
    age: 25,
    toString() {
        return 'Hey there!';
    }
};

user.toString();    // Hey there!

Since the user object defines its own toString property now, it no longer inherits it from the prototype object:

// get object prototype
const proto = Object.getPrototypeOf(user);

user.toString === proto.toString;   // false

The Object.getPrototypeOf() method is used to get the prototype object in JavaScript.

When an object defines an own property and also inherits a property with the same name, the own property takes precedence over the inherited one.

However, if you remove the own property for some reason, then the inherited property is available again:

user.toString();    // Hey there!

// delete own property
delete user.toString;

// inherited property
user.toString();    // [object Object]

Note: Although JavaScript does not put any restrictions on overriding the inherited properties, it might lead to unnecessary bugs and errors. Therefore, it is not advised to modify the prototype object.

Summary

A JavaScript object can have both its own and inherited properties. A property can be either own property or an inherited one.

The own properties are defined directly on the object. On the other hand, the inherited properties are the ones inherited from the prototype object.

You can also inherit the properties of an existing object by the Object.create() method.

There are no restrictions to override the prototype properties, but it is not recommended.

const user = {
    name: 'John Doe',
    age: 25
};

const user = {
    name: 'John Doe',
    age: 25
};

const props = Object.getOwnPropertyNames(user);

console.log(props);     // [ 'name', 'age' ]

user.hasOwnProperty('name');    // true
user.hasOwnProperty('email');    // false

user.toString;    // function() {...}

const user = {
    name: 'John Doe',
    age: 25
};

const employee = Object.create(user, {
    department: {
        value: 'HR',
        enumerable: true
    }
});

employee.hasOwnProperty('name');          // false
employee.hasOwnProperty('department');    // true

const user = {
    name: 'John Doe',
    age: 25,
    toString() {
        return 'Hey there!';
    }
};

user.toString();    // Hey there!

// get object prototype
const proto = Object.getPrototypeOf(user);

user.toString === proto.toString;   // false

user.toString();    // Hey there!

// delete own property
delete user.toString;

// inherited property
user.toString();    // [object Object]

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript