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:
- Create a new function named
Person
and copy all the properties declared inside the constructor into it (name
andage
). - Add all methods of the class, such as
sayHi()
, toPerson.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.
Top comments (1)
Very neat description of objects, prototypes and classes in JavaScript. Thanks!