Objects, Prototypes and Classes in JavaScript

This post was originally published on attacomsian.com/blog.

---

JavaScript is based on a simple object-oriented programming model with objects being a fundamental part of the language. Almost everything in JavaScript is an object. Unlike other object-oriented programming languages such as Java, JavaScript objects are very flexible.

Objects

An object is a collection of key-value pairs called properties. A property's key is a string or symbol (also known as property name) and value can be anything. There are multiple ways to create an object in JavaScript. The simplest and the most popular way is to use object literal syntax:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29 
};

Objects can also be created using the new operator. The new keyword can be used either with in-built Object constructor function or user-defined constructor function:

// in-built constructor function
const user = new Object();
user.fisrtName = 'John';
user.lastName = 'Doe';
user.age = 29;

// user-defined constructor function
function User(fisrtName, lastName, age) {
    this.fisrtName = fisrtName;
    this.lastName = lastName;
    this.age = age;
};

const user = new User('John', 'Doe', 29);

A property's value can also be a function. Such a property is called a method:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29,
    fullName: function () {
        return `${this.fisrtName} ${this.lastName}`;
    }
};

Properties values are accessible using both the dot (.) notation and the square bracket ([]) notation:

// dot notation
console.log(user.fullName()); // John Doe
console.log(user.age); // 29

// square bracket notation - does not work for methods
console.log(user['fisrtName']); // John

You can add new properties to an existing object by just assigning them values:

user.country = 'United States';

// method can also be added
user.ageRange = function() {
    return `${this.age - 5}-${this.age + 5}`;
}

To remove a property from the object, use the delete operator:

delete user.age;

To iterate over all keys of an object, we can use the for...in loop:

for (const key in user) {
    console.log(user[key]);
}

The object literal syntax can only be used to create a single object. For creating multiple objects of the same type, we must use object constructor function:

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const rabbit = new Animal('Rabbit','🐰');
const cat = new Animal('Cat','🐱');

We cannot directly assign values to an object constructor to add new properties and method. New properties must be added inside the object constructor function:

Animal.color = 'Red'; // wrong way

// correct way
function Animal(name, icon, color) {
    // ...
    this.color = color;
};

Prototypes

All objects in JavaScript inherit properties and methods from another object called prototype. The prototype property allows us to add new properties and methods to existing object constructors. The new properties are shared among all instances of the specified type, rather than just by one instance of the object.

Let us add new properties to all objects of type Animal via prototype:

// add property
Animal.prototype.color = 'White';

// add method
Animal.prototype.meow = function() {
    if(this.name === 'Cat') {
        return `${this.name} can meow!`;
    } else {
        return `${this.name} cannot meow!`;
    }
}

Now the above cat and rabbit objects have the property color and method meow() because the prototype of Animal has them:

console.log(cat.color); // White
console.log(rabbit.meow()); // Rabbit cannot meow!
console.log(cat.meow()); // Cat can meow!

If you want to access the shared prototype property through an instance of a specific type, there is a __proto__ property available. Through this property, you can modify the existing prototype properties or even add new properties. Since the prototype property is shared among all instance, changes made to one instance's prototype property or method will be reflected in all instances:

cat.__proto__.color = 'Black';
cat.__proto__.eatMeat = true;

console.log(rabbit.color); // Black
console.log(rabbit.eatMeat); // true

Similar to objects, the prototype property or method can be removed using the delete operator:

delete cat.__proto__.eatMeat;
// OR
delete Animal.prototype.eatMeat;

console.log(rabbit.eatMeat); // undefined

As we can see above, the prototype property is a core part of object basics in JavaScript. Any changes made to this property affects all instances of that particular object type.

Classes

The concept of classes was introduced in JavaScript in ES6 (ECMA2015). In the object-oriented programming paradigm, a class is a blueprint for creating objects with properties and methods while encapsulating the implementation details from the user. However, the concept of true classes does not exist in JavaScript.

JavaScript classes are nothing but just syntactic sugar over existing prototype-based inheritance and constructor functions. Let us see an example:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `👋 ${this.name}!`;
    }
}

Now if we want to create a new instance of Person class, we must use the new operator:

const bill = new Person('Bill', 25);
console.log(bill.sayHi()); // 👋 Bill!

When we create an object of Person class, the class constructor does the following:

1. Create a new function named Person and copy all the properties declared inside the constructor into it (name and age).
2. Add all methods of the class, such as sayHi(), to Person.prototype property.

Afterward, when we call any method of the object, it is taken from the prototype property.

Summary

Objects are an important part of JavaScript language. Almost everything in JavaScript is an object.

• An object is a collection of key-value properties. An object can be created with either object literal syntax or object constructor function syntax.
• Whenever a new function is created in JavaScript, the JavaScript engine automatically attaches a prototype property to it. Changes made to this property are shared among all instances of a particular object type. It is a great way of adding new properties to existing object constructor functions.
• ES6 brought classes to JavaScript, which are nothing but a new way of writing constructor functions by utilizing the prototype functionality.

If you want to learn more about objects, here is an in-depth MDN guide that explains how to use objects, properties, and methods.

---

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

---

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Comments

[Daniel Klimuntowski]

Very neat description of objects, prototypes and classes in JavaScript. Thanks!