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 its 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 an in-built Object constructor function or a 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, you must use the 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 methods. 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. These properties are shared among all instances of the specified type rather than just 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. You can modify the existing prototype properties or add new properties using this property.

Since the prototype property is shared among all instances, 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 to this property affect 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 the 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 the 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 the Person.prototype property.

Afterward, when we call any method of the object, it is taken from the prototype property. Read this article to learn more about JavaScript classes.

Summary

Objects are an essential 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. Changes to this property are shared among all instances of a particular object type. It is a popular 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.

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