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.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.