# Own and inherited properties of an object in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 24, 2020. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-own-inherited-properties

> Learn about the own and inherited properties of an object in JavaScript and how they differ from each other.

In JavaScript, an [object](https://attacomsian.com/blog/objects-prototypes-classes-javascript#objects) 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](https://attacomsian.com/blog/objects-prototypes-classes-javascript#prototypes), 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](https://attacomsian.com/blog/javascript-create-object) a new JavaScript object:

```javascript
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()`:

```javascript
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](https://attacomsian.com/blog/javascript-object-check-if-property-exists#hasownproperty-method), you can call the `hasOwnProperty()` method on the object:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
// 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:

```javascript
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.