prototypes-and-inheritance - javascript Interview Questions | Preplance

1. What does the new keyword do in JavaScript?

Difficulty: MediumType: MCQTopic: JS Prototypes

The new keyword performs four steps when creating an object: Step 1: Creates a new empty object. Step 2: Sets the prototype of the new object to the constructor's prototype property. Step 3: Calls the constructor function with this bound to the new object. Step 4: Returns the new object, unless the constructor explicitly returns another object. This is how object-oriented programming works in JavaScript before ES6 classes. Forgetting new when calling a constructor can cause bugs because this will refer to the global object instead.

Example code

// Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log('Hi, I am ' + this.name);
};

// Using new keyword
const john = new Person('John', 30);

// What new does:
// 1. Creates empty object: {}
// 2. Sets prototype: object.__proto__ = Person.prototype
// 3. Calls Person with this = object: Person.call(object, 'John', 30)
// 4. Returns object

console.log(john.name); // 'John'
console.log(john.age);  // 30
john.greet(); // 'Hi, I am John'

// Check prototype
console.log(john.__proto__ === Person.prototype); // true
console.log(john instanceof Person); // true

// Forgetting new (common mistake)
const jane = Person('Jane', 25); // Forgot new!
console.log(jane); // undefined
console.log(window.name); // 'Jane' (polluted global!)

// Manual implementation of new
function myNew(constructor, ...args) {
  // Step 1: Create empty object
  const obj = {};
  
  // Step 2: Set prototype
  Object.setPrototypeOf(obj, constructor.prototype);
  
  // Step 3: Call constructor
  const result = constructor.apply(obj, args);
  
  // Step 4: Return object (or result if object)
  return typeof result === 'object' && result !== null ? result : obj;
}

const bob = myNew(Person, 'Bob', 35);
console.log(bob.name); // 'Bob'
bob.greet(); // 'Hi, I am Bob'

2. What does Object.create() do?

Difficulty: MediumType: MCQTopic: JS Prototypes

Object.create creates a new object with the specified object as its prototype. You pass the prototype object as the first argument. The new object will inherit from it. Object.create allows creating objects without using constructor functions or classes. It is the purest form of prototypal inheritance in JavaScript. You can pass null to create an object with no prototype, useful for creating truly empty objects. Object.create is commonly used in design patterns and frameworks.

Example code

// Basic Object.create
const personProto = {
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const john = Object.create(personProto);
john.name = 'John';
john.greet(); // 'Hello, John'

// john inherits from personProto
console.log(Object.getPrototypeOf(john) === personProto); // true

// Create object with no prototype
const emptyObj = Object.create(null);
console.log(Object.getPrototypeOf(emptyObj)); // null
// No toString, hasOwnProperty, etc.

// Adding properties during creation
const jane = Object.create(personProto, {
  name: {
    value: 'Jane',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 25,
    writable: true
  }
});

jane.greet(); // 'Hello, Jane'
console.log(jane.age); // 25

// Inheritance pattern with Object.create
function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

// Set up inheritance
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(this.name + ' says woof!');
};

const buddy = new Dog('Buddy', 'Golden Retriever');
buddy.eat();  // 'Buddy is eating'
buddy.bark(); // 'Buddy says woof!'

// Compare with direct assignment (wrong)
Dog.prototype = Animal.prototype; // Don't do this!
// This shares the same object, not creates inheritance

3. What is the difference between hasOwnProperty and the in operator?

Difficulty: EasyType: MCQTopic: Object Props

HasOwnProperty checks if a property exists directly on the object, not in its prototype chain. The in operator checks if a property exists anywhere in the prototype chain, including inherited properties. Use hasOwnProperty when you only want own properties, not inherited ones. This is important when iterating over objects to avoid processing inherited properties. Modern alternative is Object.hasOwn for better safety. Understanding this difference is crucial for working with prototypes.

Example code

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log('Hello');
};

const john = new Person('John');
john.age = 30;

// hasOwnProperty - only own properties
console.log(john.hasOwnProperty('name'));  // true (own)
console.log(john.hasOwnProperty('age'));   // true (own)
console.log(john.hasOwnProperty('greet')); // false (inherited)

// in operator - checks prototype chain
console.log('name' in john);  // true (own)
console.log('age' in john);   // true (own)
console.log('greet' in john); // true (inherited)
console.log('toString' in john); // true (from Object.prototype)

// Iterating safely with for...in
for (let key in john) {
  console.log(key); // name, age, greet (includes prototype)
}

for (let key in john) {
  if (john.hasOwnProperty(key)) {
    console.log(key); // name, age (only own)
  }
}

// Modern alternative - Object.keys (only own enumerable)
const ownKeys = Object.keys(john);
console.log(ownKeys); // ['name', 'age']

// Object.hasOwn (ES2022) - safer than hasOwnProperty
console.log(Object.hasOwn(john, 'name'));  // true
console.log(Object.hasOwn(john, 'greet')); // false

// Why Object.hasOwn is better
const obj = Object.create(null); // No prototype
// obj.hasOwnProperty('x'); // TypeError!
Object.hasOwn(obj, 'x'); // false (safe)

// Practical example - checking property
function getValue(obj, key) {
  if (obj.hasOwnProperty(key)) {
    return obj[key];
  }
  return 'Property not found';
}

4. What are getters and setters in JavaScript classes?

Difficulty: MediumType: MCQTopic: Object Props

Getters and setters are special methods that look like properties but execute code when accessed or assigned. Getters use the get keyword and are called when you read a property. They must return a value. Setters use the set keyword and are called when you assign to a property. They receive the new value as a parameter. They allow computed properties and validation without exposing the implementation. Getters and setters make APIs cleaner by hiding internal logic. They are commonly used for data validation, computed properties, and encapsulation.

Example code

// Getters and setters in class
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  // Getter - acts like property
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  // Setter - acts like property assignment
  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
  
  get age() {
    return this._age;
  }
  
  set age(value) {
    if (value < 0) {
      throw new Error('Age cannot be negative');
    }
    this._age = value;
  }
}

const john = new Person('John', 'Doe');

// Use getter like a property (no parentheses)
console.log(john.fullName); // 'John Doe'

// Use setter like property assignment
john.fullName = 'Jane Smith';
console.log(john.firstName); // 'Jane'
console.log(john.lastName);  // 'Smith'

// Validation with setter
john.age = 30;  // Works
console.log(john.age); // 30
// john.age = -5; // Error: Age cannot be negative

// Getters and setters in object literals
const circle = {
  _radius: 5,
  
  get radius() {
    return this._radius;
  },
  
  set radius(value) {
    if (value <= 0) {
      throw new Error('Radius must be positive');
    }
    this._radius = value;
  },
  
  get area() {
    return Math.PI * this._radius ** 2;
  },
  
  get circumference() {
    return 2 * Math.PI * this._radius;
  }
};

console.log(circle.radius); // 5
console.log(circle.area);   // 78.53...

circle.radius = 10;
console.log(circle.area); // 314.15... (computed automatically)

// Private-like properties
class BankAccount {
  constructor(balance) {
    this._balance = balance; // Convention: _ means private
  }
  
  get balance() {
    return this._balance;
  }
  
  set balance(value) {
    throw new Error('Cannot set balance directly');
  }
  
  deposit(amount) {
    this._balance += amount;
  }
}

const account = new BankAccount(1000);
console.log(account.balance); // 1000
// account.balance = 5000; // Error!

5. What are static methods in JavaScript classes?

Difficulty: EasyType: MCQTopic: JS Classes

Static methods belong to the class itself, not to instances of the class. You call static methods directly on the class, not on objects created from the class. Static methods cannot access instance properties using this, because they are not called on instances. Static methods are useful for utility functions related to the class. Common examples include factory methods, helper functions, and utility operations. They are defined using the static keyword in classes.

Example code

class MathUtils {
  // Static method
  static add(a, b) {
    return a + b;
  }
  
  static multiply(a, b) {
    return a * b;
  }
  
  // Instance method
  calculate(x, y) {
    return x + y;
  }
}

// Call static method on class
console.log(MathUtils.add(5, 3));      // 8
console.log(MathUtils.multiply(4, 2)); // 8

// Cannot call on instance
const math = new MathUtils();
// math.add(5, 3); // TypeError!

// Can call instance method
console.log(math.calculate(5, 3)); // 8

// Factory pattern with static method
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  static create(name, email) {
    // Validation or processing
    if (!email.includes('@')) {
      throw new Error('Invalid email');
    }
    return new User(name, email);
  }
  
  static fromJSON(json) {
    const data = JSON.parse(json);
    return new User(data.name, data.email);
  }
}

const user1 = User.create('John', 'john@example.com');
const user2 = User.fromJSON('{"name":"Jane","email":"jane@example.com"}');

// Built-in static methods
console.log(Array.isArray([1, 2, 3])); // true (Array.isArray)
console.log(Object.keys({a: 1}));      // ['a'] (Object.keys)

// Static properties (ES2022)
class Config {
  static apiUrl = 'https://api.example.com';
  static timeout = 5000;
}

console.log(Config.apiUrl); // 'https://api.example.com'

// Inheritance and static methods
class Animal {
  static type() {
    return 'Animal';
  }
}

class Dog extends Animal {
  static type() {
    return 'Dog';
  }
}

console.log(Animal.type()); // 'Animal'
console.log(Dog.type());    // 'Dog'

6. Compare constructor functions and ES6 classes. What are the advantages of each?

Difficulty: MediumType: SubjectiveTopic: JS Classes

Constructor functions and ES6 classes both create objects with shared methods, but have important differences. Constructor functions: Traditional pre-ES6 way to create object types. Just regular functions called with new keyword. Manually add methods to prototype. More verbose but shows how JavaScript works. Greater flexibility in some cases. ES6 classes: Modern syntax introduced in ES6. Syntactic sugar over constructor functions and prototypes. Cleaner and more familiar syntax for developers from other languages. Built-in support for inheritance with extends and super. Methods are non-enumerable by default. Must be called with new, cannot call as regular function. Key differences: Syntax: Classes are cleaner and more readable. Strict mode: Classes automatically run in strict mode. Hoisting: Functions are hoisted, classes are not. Calling: Functions can be called without new, classes cannot. Method enumeration: Class methods are non-enumerable, function prototype methods are enumerable. Advantages of constructor functions: More explicit about prototypes. Can be called without new with checks. More flexibility in dynamic scenarios. Better for understanding JavaScript internals. Advantages of classes: Cleaner, more readable syntax. Better for developers from classical OOP languages. Built-in inheritance support. Less boilerplate for common patterns. Industry standard in modern JavaScript. When to use: Use classes in modern code for better readability. Use constructor functions when working with legacy code. Understand both because classes use prototypes underneath. Both approaches ultimately create the same prototype-based structure.

Example code

// CONSTRUCTOR FUNCTION

function PersonFunc(name, age) {
  this.name = name;
  this.age = age;
}

PersonFunc.prototype.greet = function() {
  console.log('Hi, I am ' + this.name);
};

PersonFunc.prototype.getAge = function() {
  return this.age;
};

// Static method
PersonFunc.create = function(name, age) {
  return new PersonFunc(name, age);
};

const john = new PersonFunc('John', 30);
john.greet(); // 'Hi, I am John'

// ES6 CLASS

class PersonClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hi, I am ${this.name}`);
  }
  
  getAge() {
    return this.age;
  }
  
  static create(name, age) {
    return new PersonClass(name, age);
  }
}

const jane = new PersonClass('Jane', 25);
jane.greet(); // 'Hi, I am Jane'

// DIFFERENCE 1: Enumeration

// Constructor function methods are enumerable
for (let key in john) {
  console.log(key); // name, age, greet, getAge
}

// Class methods are non-enumerable
for (let key in jane) {
  console.log(key); // name, age (only own properties)
}

// DIFFERENCE 2: Calling without new

// Function can be called without new (mistakes possible)
const wrong = PersonFunc('Bob', 35); // Forgot new
console.log(wrong); // undefined
// console.log(window.name); // 'Bob' (polluted global!)

// Class must use new
// const wrong2 = PersonClass('Alice', 28); // TypeError!

// DIFFERENCE 3: Hoisting

const p1 = new PersonFunc('Test', 20); // Works (hoisted)

// const p2 = new PersonClass('Test', 20); // ReferenceError!
// (classes not hoisted)

// INHERITANCE COMPARISON

// Constructor function inheritance (verbose)
function AnimalFunc(name) {
  this.name = name;
}

AnimalFunc.prototype.eat = function() {
  console.log(this.name + ' is eating');
};

function DogFunc(name, breed) {
  AnimalFunc.call(this, name);
  this.breed = breed;
}

DogFunc.prototype = Object.create(AnimalFunc.prototype);
DogFunc.prototype.constructor = DogFunc;

DogFunc.prototype.bark = function() {
  console.log(this.name + ' barks');
};

// Class inheritance (clean)
class AnimalClass {
  constructor(name) {
    this.name = name;
  }
  
  eat() {
    console.log(this.name + ' is eating');
  }
}

class DogClass extends AnimalClass {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  bark() {
    console.log(this.name + ' barks');
  }
}

// WHEN TO USE WHAT

// Use classes (modern, preferred)
class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log('Hello ' + this.name);
  }
}

// Use constructor functions (legacy, or when needed)
function OldStyleUser(name) {
  this.name = name;
}
OldStyleUser.prototype.greet = function() {
  console.log('Hello ' + this.name);
};

// Both create same structure
console.log(typeof PersonClass); // 'function'
console.log(PersonClass.prototype.greet); // function
console.log(PersonFunc.prototype.greet);  // function

7. What is Object.create() and how is it used for inheritance? Compare it with constructor functions.

Difficulty: MediumType: SubjectiveTopic: JS Prototypes

Object.create is a method that creates a new object with a specified prototype object. It provides direct control over an object's prototype without using constructor functions. How Object.create works: Takes an object as first argument. Creates a new empty object. Sets the new object's prototype to the argument. Returns the new object. Optional second argument specifies property descriptors. Use cases: Creating objects with specific prototypes. Setting up inheritance without constructors. Creating objects without Object.prototype, using null. Implementing object composition patterns. Inheritance with Object.create: Create a prototype object with shared methods. Use Object.create to create child objects. Add instance-specific properties after creation. More explicit than constructor functions. Comparing to constructor functions: Object.create is more direct and explicit. Constructor functions provide encapsulation with private variables. Object.create better for simple prototypal patterns. Constructor functions better for creating multiple similar objects. Classes provide best syntax for most cases. Advantages of Object.create: No need for constructor function. Direct prototype manipulation. Can create objects without Object.prototype. More functional programming style. No confusion about new keyword. Disadvantages: Less encapsulation than constructors. No automatic property initialization. More verbose for creating multiple objects. Less familiar to developers from classical OOP. Best practices: Use Object.create for simple inheritance. Use classes for complex object hierarchies. Use Object.create with null for dictionary objects. Understand it helps understand prototypes. Object.create is fundamental to understanding JavaScript's prototype system.

Example code

// BASIC OBJECT.CREATE

const personProto = {
  greet: function() {
    console.log('Hi, I am ' + this.name);
  },
  introduce: function() {
    console.log(`${this.name}, age ${this.age}`);
  }
};

// Create object with personProto as prototype
const john = Object.create(personProto);
john.name = 'John';
john.age = 30;

john.greet(); // 'Hi, I am John'

// john inherits from personProto
console.log(Object.getPrototypeOf(john) === personProto); // true

// INHERITANCE PATTERN

const animal = {
  eat: function() {
    console.log(this.name + ' is eating');
  },
  sleep: function() {
    console.log(this.name + ' is sleeping');
  }
};

const dog = Object.create(animal);
dog.name = 'Buddy';
dog.bark = function() {
  console.log(this.name + ' says woof!');
};

dog.eat();  // 'Buddy is eating' (inherited)
dog.bark(); // 'Buddy says woof!' (own)

// Multi-level inheritance
const puppy = Object.create(dog);
puppy.name = 'Max';
puppy.play = function() {
  console.log(this.name + ' is playing');
};

puppy.play(); // 'Max is playing' (own)
puppy.bark(); // 'Max says woof!' (from dog)
puppy.eat();  // 'Max is eating' (from animal)

// PROPERTY DESCRIPTORS

const person = Object.create(personProto, {
  name: {
    value: 'Jane',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 25,
    writable: true,
    enumerable: true
  },
  id: {
    value: 123,
    writable: false,  // Read-only
    enumerable: false // Won't show in for...in
  }
});

console.log(person.name); // 'Jane'
console.log(person.id);   // 123
// person.id = 456; // Cannot change (writable: false)

// CREATING OBJECT WITHOUT PROTOTYPE

const dictionary = Object.create(null);
dictionary.key1 = 'value1';
dictionary.key2 = 'value2';

// No inherited properties
console.log(dictionary.toString); // undefined
console.log(dictionary.hasOwnProperty); // undefined

// Useful for pure data storage
console.log(Object.getPrototypeOf(dictionary)); // null

// COMPARE: OBJECT.CREATE VS CONSTRUCTOR

// Using Object.create
const carProto = {
  start: function() {
    console.log(this.model + ' starting');
  }
};

const car1 = Object.create(carProto);
car1.model = 'Tesla';
car1.year = 2024;

// Using constructor function
function Car(model, year) {
  this.model = model;
  this.year = year;
}

Car.prototype.start = function() {
  console.log(this.model + ' starting');
};

const car2 = new Car('Tesla', 2024);

// Both create similar structure
car1.start(); // 'Tesla starting'
car2.start(); // 'Tesla starting'

// INHERITANCE COMPARISON

// Object.create approach
function createDog(name, breed) {
  const dog = Object.create(animal);
  dog.name = name;
  dog.breed = breed;
  dog.bark = function() {
    console.log('Woof!');
  };
  return dog;
}

const buddy = createDog('Buddy', 'Labrador');

// Constructor approach
function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const max = new Dog('Max', 'Retriever');

// WHEN TO USE WHAT

// Use Object.create for:
// - Simple prototypal inheritance
// - Creating objects with specific prototypes
// - Dictionary objects (with null prototype)

// Use constructor functions for:
// - Creating multiple similar objects
// - Encapsulation with closures
// - When working with legacy code

// Use classes for:
// - Modern, clean syntax
// - Complex inheritance hierarchies
// - New projects

8. What is at the end of every prototype chain?

Difficulty: HardType: MCQTopic: JS Prototypes

The prototype chain ends with null. Every object ultimately inherits from Object.prototype. The prototype of Object.prototype is null, which marks the end. When JavaScript looks for a property, it goes up the chain until it finds the property or reaches null. Reaching null means the property does not exist anywhere in the chain. Understanding the prototype chain explains how inheritance and property lookup work in JavaScript. This is a common interview question testing deep knowledge of prototypes.

Example code

// Prototype chain visualization
const obj = {};

// obj -> Object.prototype -> null
console.log(Object.getPrototypeOf(obj)); // Object.prototype
console.log(Object.getPrototypeOf(Object.prototype)); // null

// Array prototype chain
const arr = [];
// arr -> Array.prototype -> Object.prototype -> null

console.log(Object.getPrototypeOf(arr)); // Array.prototype
console.log(Object.getPrototypeOf(Array.prototype)); // Object.prototype
console.log(Object.getPrototypeOf(Object.prototype)); // null

// Function prototype chain
function myFunc() {}
// myFunc -> Function.prototype -> Object.prototype -> null

console.log(Object.getPrototypeOf(myFunc)); // Function.prototype
console.log(Object.getPrototypeOf(Function.prototype)); // Object.prototype
console.log(Object.getPrototypeOf(Object.prototype)); // null

// Property lookup example
const person = {
  name: 'John'
};

// Looking for toString
// 1. Check person - not found
// 2. Check Object.prototype - found!
console.log(person.toString()); // '[object Object]'

// Looking for nonExistent
// 1. Check person - not found
// 2. Check Object.prototype - not found
// 3. Reach null - return undefined
console.log(person.nonExistent); // undefined

9. What does the instanceof operator check?

Difficulty: MediumType: MCQTopic: JS Operators

The instanceof operator checks if an object's prototype chain includes a constructor's prototype property. It returns true if the constructor's prototype appears anywhere in the object's prototype chain. Instanceof does not check if the object was directly created by that constructor, only if the prototype exists in the chain. It returns false for primitive values. Instanceof is useful for type checking and validation in JavaScript. You can manipulate prototypes to trick instanceof, so it is not completely reliable.

Example code

function Person(name) {
  this.name = name;
}

function Animal(type) {
  this.type = type;
}

const john = new Person('John');
const dog = new Animal('Dog');

// Basic instanceof
console.log(john instanceof Person); // true
console.log(dog instanceof Animal);  // true
console.log(john instanceof Animal); // false

// Everything is an instance of Object
console.log(john instanceof Object); // true
console.log(dog instanceof Object);  // true
console.log([] instanceof Object);   // true

// Arrays
const arr = [1, 2, 3];
console.log(arr instanceof Array);  // true
console.log(arr instanceof Object); // true

// Primitives return false
console.log(5 instanceof Number);       // false
console.log('hello' instanceof String); // false
console.log(true instanceof Boolean);   // false

// Wrapper objects return true
console.log(new Number(5) instanceof Number); // true

// How instanceof works
function myInstanceof(obj, constructor) {
  let proto = Object.getPrototypeOf(obj);
  
  while (proto !== null) {
    if (proto === constructor.prototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }
  
  return false;
}

console.log(myInstanceof(john, Person)); // true
console.log(myInstanceof(john, Object)); // true

// Can be tricked by changing prototype
const obj = {};
console.log(obj instanceof Array); // false

Object.setPrototypeOf(obj, Array.prototype);
console.log(obj instanceof Array); // true (tricked!)

10. Are ES6 classes truly different from constructor functions?

Difficulty: EasyType: MCQTopic: JS Classes

ES6 classes are syntactic sugar over JavaScript's existing prototype-based inheritance. Under the hood, classes still use prototypes and constructor functions. Classes provide cleaner and more familiar syntax for developers from other languages. Key differences: Class methods are non-enumerable by default. Classes must be called with new. Classes have stricter mode automatically. The class syntax is preferred in modern JavaScript for creating objects, but understanding prototypes is still essential. Classes make code more readable but do not change how JavaScript inheritance works internally.

Example code

// ES6 Class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hi, I am ${this.name}`);
  }
  
  static create(name, age) {
    return new Person(name, age);
  }
}

// Equivalent constructor function
function PersonFunc(name, age) {
  this.name = name;
  this.age = age;
}

PersonFunc.prototype.greet = function() {
  console.log('Hi, I am ' + this.name);
};

PersonFunc.create = function(name, age) {
  return new PersonFunc(name, age);
};

// Both work the same way
const john = new Person('John', 30);
const jane = new PersonFunc('Jane', 25);

john.greet(); // 'Hi, I am John'
jane.greet(); // 'Hi, I am Jane'

// Both use prototypes
console.log(john.__proto__ === Person.prototype); // true
console.log(jane.__proto__ === PersonFunc.prototype); // true

// Class is still a function
console.log(typeof Person); // 'function'

// Key differences:

// 1. Class methods are non-enumerable
for (let key in john) {
  console.log(key); // Only 'name' and 'age', not 'greet'
}

for (let key in jane) {
  console.log(key); // 'name', 'age', and 'greet'
}

// 2. Classes must use new
// const bob = Person('Bob', 35); // TypeError!

// 3. Classes are in strict mode
class Test {
  method() {
    console.log(this); // undefined if called without object
  }
}

11. What is the prototype in JavaScript?

Difficulty: MediumType: MCQTopic: JS Prototypes

A prototype is an object from which other objects inherit properties and methods. Every JavaScript object has a hidden property called prototype that points to another object. When you access a property on an object, JavaScript first looks on the object itself. If not found, it looks in the prototype. This continues up the chain until the property is found or the chain ends. Functions have a prototype property that is used when creating objects with the new keyword. Prototypes enable inheritance in JavaScript without classes, though ES6 classes use prototypes under the hood. Understanding prototypes is crucial for mastering JavaScript.

Example code

// Every object has a prototype
const obj = {};
console.log(Object.getPrototypeOf(obj)); // Object.prototype

// Function prototype property
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name);
};

const john = new Person('John');
john.greet(); // 'Hello, John'

// john doesn't have greet directly
console.log(john.hasOwnProperty('greet')); // false
console.log(john.hasOwnProperty('name'));  // true

// greet comes from prototype
console.log(john.__proto__ === Person.prototype); // true

// Prototype chain
const arr = [1, 2, 3];
// arr -> Array.prototype -> Object.prototype -> null

console.log(arr.__proto__ === Array.prototype); // true
console.log(arr.__proto__.__proto__ === Object.prototype); // true

// Adding to prototype affects all instances
Person.prototype.sayBye = function() {
  console.log('Bye, ' + this.name);
};

john.sayBye(); // 'Bye, John' (new method available)

12. What does the super keyword do in a class?

Difficulty: MediumType: MCQTopic: JS Classes

The super keyword is used to call functions on an object's parent class. In a constructor, super calls the parent constructor and must be called before accessing this. In methods, super accesses parent class methods. You must call super in the child constructor before using this, or you will get an error. Super provides clean syntax for inheritance compared to older patterns. It is essential for extending classes in ES6.

Example code

// Parent class
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  eat() {
    console.log(this.name + ' is eating');
  }
  
  makeSound() {
    console.log('Some generic sound');
  }
}

// Child class
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call parent constructor
    this.breed = breed;
  }
  
  bark() {
    console.log(this.name + ' says woof!');
  }
  
  makeSound() {
    super.makeSound(); // Call parent method
    console.log('Woof woof!');
  }
}

const buddy = new Dog('Buddy', 'Golden Retriever');

buddy.eat();  // 'Buddy is eating' (inherited)
buddy.bark(); // 'Buddy says woof!' (own method)
buddy.makeSound();
// 'Some generic sound'
// 'Woof woof!'

// Must call super before this
class Cat extends Animal {
  constructor(name, color) {
    // this.color = color; // ReferenceError!
    super(name); // Must call super first
    this.color = color; // Now this is ok
  }
}

// Static methods and super
class Parent {
  static info() {
    console.log('Parent info');
  }
}

class Child extends Parent {
  static info() {
    super.info(); // Call parent static method
    console.log('Child info');
  }
}

Child.info();
// 'Parent info'
// 'Child info'

// Prototype chain with classes
const dog = new Dog('Max', 'Labrador');
// dog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null

console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Object); // true

13. Explain prototypal inheritance in JavaScript. How does it differ from classical inheritance?

Difficulty: HardType: SubjectiveTopic: JS Prototypes

JavaScript uses prototypal inheritance, which is fundamentally different from classical inheritance used in languages like Java or C++. Prototypal inheritance: Objects inherit directly from other objects, not from classes. Every object has a hidden link to another object called its prototype. When you access a property, JavaScript looks in the object first, then follows the prototype chain until found or reaching null. How it works: Each object has an internal prototype property accessible via underscore underscore proto underscore or Object.getPrototypeOf. Functions have a prototype property used when creating objects with new. New objects created from a constructor get that constructor's prototype as their prototype. Properties and methods can be shared through the prototype chain. Classical inheritance: Classes are blueprints for objects. Objects are instances of classes. Inheritance creates is-a relationships. Classes inherit from other classes using extends keyword. Key differences: JavaScript has no true classes, only objects. ES6 classes are syntactic sugar over prototypes. In classical OOP, you define classes then create instances. In prototypal OOP, you create objects that serve as prototypes for other objects. Prototypal inheritance is more flexible but can be confusing. Advantages of prototypal inheritance: More flexible and dynamic. Can change prototypes at runtime. Memory efficient by sharing methods. Simpler mental model, everything is an object. Disadvantages: Can be confusing for developers from classical OOP backgrounds. Easier to make mistakes with prototype chain. Less structure than class-based systems. Best practices: Use ES6 classes for cleaner syntax. Understand prototypes underneath. Share methods through prototype, not in constructor. Avoid modifying built-in prototypes. Understanding prototypal inheritance is essential for mastering JavaScript and common in interviews.

Example code

// PROTOTYPAL INHERITANCE

// Objects inherit from objects
const animalProto = {
  eat: function() {
    console.log(this.name + ' is eating');
  }
};

const dog = Object.create(animalProto);
dog.name = 'Buddy';
dog.bark = function() {
  console.log(this.name + ' says woof!');
};

dog.eat();  // 'Buddy is eating' (inherited)
dog.bark(); // 'Buddy says woof!' (own)

// Prototype chain
console.log(Object.getPrototypeOf(dog) === animalProto); // true

// CONSTRUCTOR FUNCTION PATTERN

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

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating');
};

function Dog(name, breed) {
  Animal.call(this, name); // Call parent constructor
  this.breed = breed;
}

// Set up inheritance
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(this.name + ' says woof!');
};

const buddy = new Dog('Buddy', 'Golden Retriever');
buddy.eat();  // 'Buddy is eating'
buddy.bark(); // 'Buddy says woof!'

// Prototype chain: buddy -> Dog.prototype -> Animal.prototype -> Object.prototype -> null

// ES6 CLASS SYNTAX (still uses prototypes)

class AnimalClass {
  constructor(name) {
    this.name = name;
  }
  
  eat() {
    console.log(this.name + ' is eating');
  }
}

class DogClass extends AnimalClass {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  bark() {
    console.log(this.name + ' says woof!');
  }
}

const max = new DogClass('Max', 'Labrador');
max.eat();  // 'Max is eating'
max.bark(); // 'Max says woof!'

// Still using prototypes underneath
console.log(max.__proto__ === DogClass.prototype); // true
console.log(DogClass.prototype.__proto__ === AnimalClass.prototype); // true

// CLASSICAL INHERITANCE (for comparison)
// In Java:
// class Animal {
//   String name;
//   void eat() { ... }
// }
// class Dog extends Animal {
//   String breed;
//   void bark() { ... }
// }
// Dog dog = new Dog();

// Key differences:
// 1. JavaScript: Objects inherit from objects
//    Classical: Classes inherit from classes
// 2. JavaScript: Dynamic prototype chain
//    Classical: Fixed class hierarchy
// 3. JavaScript: Can modify prototypes at runtime
//    Classical: Cannot modify classes after definition

// Memory efficiency
function Person(name) {
  this.name = name;
  // Bad: Each instance gets its own copy
  // this.greet = function() { console.log('Hi'); };
}

// Good: Shared across all instances
Person.prototype.greet = function() {
  console.log('Hi, I am ' + this.name);
};

const p1 = new Person('John');
const p2 = new Person('Jane');

// Same method reference (memory efficient)
console.log(p1.greet === p2.greet); // true

14. Explain the prototype chain in JavaScript. How does property lookup work?

Difficulty: HardType: SubjectiveTopic: JS Prototypes

The prototype chain is the mechanism JavaScript uses to implement inheritance and property lookup. How it works: Every object has an internal prototype link that points to another object. This creates a chain of objects. When you access a property, JavaScript searches up this chain until found or reaching null. Null marks the end of the chain. Property lookup process: Step 1: Check if property exists directly on the object. Step 2: If not found, check the object's prototype. Step 3: If not found, check the prototype's prototype. Step 4: Continue until property is found or reaching null. Step 5: If null is reached, return undefined. The chain structure: All objects ultimately inherit from Object.prototype. Arrays inherit from Array.prototype which inherits from Object.prototype. Functions inherit from Function.prototype which inherits from Object.prototype. The chain always ends with Object.prototype whose prototype is null. Methods on the prototype: Methods shared by all instances live on the prototype. This saves memory compared to copying methods to each instance. Changes to prototype affect all existing instances. Common gotchas: Adding properties to an object does not affect its prototype. Modifying prototype affects all objects using that prototype. Performance decreases with longer chains. Can accidentally overwrite prototype methods. Accessing prototypes: Use Object.getPrototypeOf for reading. Use Object.setPrototypeOf for setting, though this is slow. Use underscore underscore proto underscore for convenience, though deprecated. Use instanceof to check prototype chain. Understanding the prototype chain is fundamental to JavaScript and frequently tested in interviews.

Example code

// BASIC PROTOTYPE CHAIN

const obj = {};
// obj -> Object.prototype -> null

console.log(Object.getPrototypeOf(obj)); // Object.prototype
console.log(Object.getPrototypeOf(Object.prototype)); // null

// PROPERTY LOOKUP DEMONSTRATION

function Person(name) {
  this.name = name; // Own property
}

Person.prototype.greet = function() {
  console.log('Hello ' + this.name);
}; // Prototype property

const john = new Person('John');

// Lookup for 'name'
// 1. Check john object - FOUND
console.log(john.name); // 'John'

// Lookup for 'greet'
// 1. Check john object - not found
// 2. Check Person.prototype - FOUND
john.greet(); // 'Hello John'

// Lookup for 'toString'
// 1. Check john object - not found
// 2. Check Person.prototype - not found
// 3. Check Object.prototype - FOUND
console.log(john.toString()); // '[object Object]'

// Lookup for 'nonExistent'
// 1. Check john object - not found
// 2. Check Person.prototype - not found
// 3. Check Object.prototype - not found
// 4. Reach null - return undefined
console.log(john.nonExistent); // undefined

// VISUALIZING THE CHAIN

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

Animal.prototype.eat = function() {
  console.log('Eating');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const buddy = new Dog('Buddy', 'Labrador');

// Prototype chain:
// buddy -> Dog.prototype -> Animal.prototype -> Object.prototype -> null

// Verify chain
console.log(Object.getPrototypeOf(buddy) === Dog.prototype); // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null

// Property lookup on buddy
buddy.bark(); // Found on Dog.prototype
buddy.eat();  // Found on Animal.prototype
console.log(buddy.toString()); // Found on Object.prototype

// SHADOWING PROPERTIES

const parent = {
  value: 10
};

const child = Object.create(parent);

console.log(child.value); // 10 (from parent)

child.value = 20; // Creates own property (shadows parent)

console.log(child.value);  // 20 (own property)
console.log(parent.value); // 10 (unchanged)

delete child.value; // Remove own property
console.log(child.value); // 10 (back to parent)

// PERFORMANCE IMPLICATIONS

// Short chain (fast)
const obj1 = {x: 1};
console.log(obj1.x); // Quick lookup

// Long chain (slower)
const level1 = {a: 1};
const level2 = Object.create(level1);
const level3 = Object.create(level2);
const level4 = Object.create(level3);
const level5 = Object.create(level4);

console.log(level5.a); // Slower (walks through 4 prototypes)

// COMMON METHODS ON OBJECT.PROTOTYPE

const anyObj = {};

// These are all inherited from Object.prototype
console.log(anyObj.toString());        // '[object Object]'
console.log(anyObj.hasOwnProperty('x')); // false
console.log(anyObj.valueOf());         // {}

// CHECKING THE CHAIN

console.log(buddy instanceof Dog);    // true
console.log(buddy instanceof Animal); // true
console.log(buddy instanceof Object); // true

// Using in operator (checks entire chain)
console.log('bark' in buddy); // true
console.log('eat' in buddy);  // true

// Using hasOwnProperty (only own properties)
console.log(buddy.hasOwnProperty('name'));  // true
console.log(buddy.hasOwnProperty('bark'));  // false
console.log(buddy.hasOwnProperty('eat'));   // false

Master Interviews
Anywhere, Anytime

Prototypes and Inheritance – Javascript interview questions

Set overview

Javascript – Prototypes and Inheritance questions (14)

1. What does the new keyword do in JavaScript?

Continue your preparation

2. What does Object.create() do?

3. What is the difference between hasOwnProperty and the in operator?

4. What are getters and setters in JavaScript classes?

5. What are static methods in JavaScript classes?

6. Compare constructor functions and ES6 classes. What are the advantages of each?

7. What is Object.create() and how is it used for inheritance? Compare it with constructor functions.

8. What is at the end of every prototype chain?

9. What does the instanceof operator check?

10. Are ES6 classes truly different from constructor functions?

11. What is the prototype in JavaScript?

12. What does the super keyword do in a class?

13. Explain prototypal inheritance in JavaScript. How does it differ from classical inheritance?

14. Explain the prototype chain in JavaScript. How does property lookup work?

More sets in Javascript

Explore related subjects

Master Interviews Anywhere, Anytime

Prototypes and Inheritance – Javascript interview questions

Set overview

1. What does the new keyword do in JavaScript?

Continue your preparation

2. What does Object.create() do?

3. What is the difference between hasOwnProperty and the in operator?

4. What are getters and setters in JavaScript classes?

5. What are static methods in JavaScript classes?

6. Compare constructor functions and ES6 classes. What are the advantages of each?

7. What is Object.create() and how is it used for inheritance? Compare it with constructor functions.

8. What is at the end of every prototype chain?

9. What does the instanceof operator check?

10. Are ES6 classes truly different from constructor functions?

11. What is the prototype in JavaScript?

12. What does the super keyword do in a class?

13. Explain prototypal inheritance in JavaScript. How does it differ from classical inheritance?

14. Explain the prototype chain in JavaScript. How does property lookup work?

More sets in Javascript

Explore related subjects

Master Interviews
Anywhere, Anytime