DEV Community: Rishav Pandey

Mastering Prototypal Inheritance in JavaScript: A Comprehensive Guide

Rishav Pandey — Sun, 12 Nov 2023 16:20:43 +0000

Understanding Prototypal inheritance in Javascript is the key concept to understand how objects really work in Javascript which has always been tricky when compared to other traditional OOPS patterns in different programming languages. Prototypal inheritance is a way in which our objects in JS can inherit properties/methods from other objects.

This is one of the most commonly asked questions in Senior Frontend Interviews

Let’s first go through a code snippet and understand it -

//We have an object `person1` with two properties `name` and `place`
const person1 = {
  name: "bob",
  place: "Amsterdam"
}

// we have another object `person2` with property `name` 
const person2 = {
  name: "john"
}

console.log(person2.name) // john
console.log(person2.place) // undefined

The above code snippet is pretty clear about how we created two different objects while logging person2.place we get undefined which is correct and expected, let’s add something magical to the above code -

person2.__proto__ = person1

console.log(person2.place) // Amsterdam

WHAT? Now we’re getting Amsterdam a value of person2.place that was never defined by us earlier. So, what’s going on here?

Let’s confirm if there’s any property place existing in person2 the object via hasOwnProperty method —

console.log(person2.hasOwnProperty("place")) // false

So, what’s really going on here? We do not have any place property defined in the person2 object but still, it’s returning a value when we’re trying to access it.

If you remember we wrote a magical line person2.__proto__ = person1 and this is where everything happened, now let's understand how.

Understanding Prototypal Inheritance in Javascript

In Javascript, all the objects have a hidden property [[Prototype]] which either stores null within it or stores references to another object, and then we’ve another method __proto__ (proto property) which is a getter/setter of the hidden [[Prototype]] property of the object.

Whenever we try to fetch any property/method from any object, it has a default tendency to look over its own property, and if not found it checks within its [[Prototype]] property and returns the value. This is why we were able to get place property inside person2 object which was originally defined inside person1 object.

Let’s verify our concept and try to console person2 —

We can clearly see in the above image that we’ve [[Prototype]] object inside person2 which stores the reference of person1 object created earlier.

Prototype Chain

You might be wondering why is there another [[Prototype]] property inside the [[Prototype]] property of person2 object. And first of all, what's this [[Prototype]] in the object that we never defined?

This is the concept of a prototype chain in which an object looks over its [[Prototype]] to fetch the property/method and if not found it iterates to the [[Prototype]] of its own [[Prototype]] and if again not found it goes on till it finds the null.

Isn’t it confusing, let’s understand by another example —

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let kangaroo = {
  swims: true,
    __proto__: rabbit
}

console.log(kangaroo.eats) // true

This is how chained prototypal inheritance looks like when consoled out —

Things to note about Prototypal Inheritance in object

The reference of the prototype can’t be like a loop, like creating a circle. Javascript will throw an error if we try to assign proto in a circle.
The value of proto can be either an object or null. Other types are ignored.
An object can only have a single [[Protype]] property within it, it never inherits from two objects at the same time.
Prototype chaining ends only when it encounters null, or else it’ll go to the n level of depth to the top finding the requested property in the object.
An object always looks first within itself to search for any property before looking to its [[Prototype]], if it gets the same property both within itself and [[Prototype]], it’ll give priority to its own property.

Creating prototypal inheritance using Object.create()

We already saw a way in which we can inherit the property defined in any object to another object via the __proto__ keyword. But we can do this in other ways too.

We can use Object.create() method to create any object and bind another object to its prototype. Let’s visualize how —

let animal = {
  eats: true
};

let rabbit = Object.create(animal, {jumps: {value: true}})

console.log(rabbit.eats) // true

Summary

In JavaScript, we have the ability to use properties defined in one object to be used by different objects, which is known as Prototypal Inheritance.

JavaScript looks for inherited properties in the prototype of the object, but also in the prototype of the prototype, and so on in the chain of prototypes.

This is one of the classic ways of using OOPS in javascript and it’s very useful when used effectively.

Have any questions about prototypal inheritance? Let’s connect in a comment box!

My VS Code setting for Web Development in 2022

Rishav Pandey — Sat, 30 Jul 2022 13:48:18 +0000

After using VS Code for the last 5–6 years, I've tried tons of customization and setup in my Editor. No doubt VS code is expensive in terms of its memory usage of the system but with lots of features and being a Developer centric Editor it's worth trying.

I've been now very obsessed with the configuration and setup I've done which has undoubtedly increased my overall productivity a lot, and now would like to share my VS code setup with you all.

Appearance

Theme

I’ve been using the Dark color scheme from the start when I started using sublime(again one cool editor you can try).

Now, this is a personal choice and you can try the Light theme also.

I've tried several different themes, and now using Dracula for quite a long. There are other themes also worth trying like Monokai, Tokyo Night, Ayu, Night Owl, Cobalt2.

Font and Styling

Choosing a good font and its styling is very important if you're planning to spend most of your time on the editor itself.

My personal choice here is Cascadia Code or Fira Code. You're going to get some very cool interactive styling while writing the code. This even increases the readability of the code a lot. Few other fonts worth trying here are Source Code Pro, JetBrains Mono, Monolisa(paid).

Extensions

Now comes the real power of VSCode. Let me introduce you to some of the coolest extensions ones can use for writing efficient code while creating some cool web applications.

Those marked with an asterisk(*) should be definitely tried once.

Apollo GraphQL - Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
Auto Rename Tag - Automatically rename paired HTML/XML tag *
Babel JavaScript - VSCode syntax highlighting for today's JavaScript. *
Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more!
Code Time - Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.
Color Highlight - Highlight web colors in your editor
CSS Peek - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
ENV - Adds formatting and syntax highlighting support for env files (.env) to Visual Studio Code
Error Lens - Improve highlighting of errors, warnings and other language diagnostics. *
Eslint - Find and fix problems in your JavaScript code. *
GitHub Copilot - Your AI pair programmer
GitLens - Supercharge Git within VS Code *
GraphQL for VSCode - GraphQL syntax highlighting, linting, auto-complete, and more!
HTML CSS Support - CSS Intellisense for HTML
htmltagwrap - Wraps selected code with HTML tags
Import Cost - Display import/require package size in the editor *
JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax *
Live Server - Launch a development local Server with live reload feature for static & dynamic pages *
npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements *
Nx Console - Nx Console for Visual Studio Code
Polacode - 📸 Polaroid for your code
Prettier - Code formatter using prettier *
Project Manager - Easily switch between projects *
Settings Sync - Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. *
Stylelint - Official Stylelint extension for Visual Studio Code
Svg Preview - Preview for Svg files.
vscode-icons - Icons for Visual Studio Code

Frequently used shortcuts (in Mac) which ease my development

Toggle Explorer - CMD+B
Global search - CMD+SHIFT+F
Global search and Replace - CMD+SHIFT+H
Opening list of projects (Project Manager) - CMD+OPTION+P
Selecting line of codes in all the directions from the cursor - CMD+SHIFT+ARROW_KEY
Navigating the whole line UP/DOWN - OPTION+TOP/BOTTOM ARROW KEY
Copying the whole line beneath it - SHIFT+OPTION+DOWN_ARROW
Selecting any word in all the places present in the file - Double click on that word and CMD+D.
Multiple cursors - CMD+LEFT_CLICK
Emmet shortcuts - checkout to the link
Faster navigation with keyboard - Try using arrow_keys with OPTION/CMD Keys.

Recommended Settings/Configs I follow.

Set Require config to true and avoid unnecessary formatting when working on collaborative project.

Set Auto Save to onWindowChange. and avoid loosing the changes made while switching the editor.

Use the Project Manager extension and add frequently used projects there. You can easily switch between multiple projects despite of their location with a few keystrokes.
Configure terminal with code command and use VSCode inbuilt terminal. It saves a lot of time.
Never hesitate of using good extensions just to save some space on the system, It helps a lot in our day-to-day work.
Use CLI for every possible thing, and avoid GUI.