Skip to content

25. OOP (Object-Oriented Programming).md

Latest commit

 

History

History
129 lines (90 loc) · 3.21 KB

25. OOP (Object-Oriented Programming).md

File metadata and controls

129 lines (90 loc) · 3.21 KB

OOP (Object-Oriented Programming)

Core OOP Principles

These are the four pillars you must know — and be able to give JavaScript / React examples for.

a. Encapsulation

Definition: Hiding implementation details and exposing only what's necessary through a public API.

In JavaScript: Achieved with closures, classes, or private fields (#property).

In React: Component state is "encapsulated" — it's not directly accessible from outside the component.

Example:

function Counter() {
  const [count, setCount] = React.useState(0); // Encapsulated inside the component
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

b. Abstraction

Definition: Hiding complex logic behind a simpler interface.

In JavaScript: Use functions, classes, or modules to expose only necessary methods.

In React: Custom hooks abstract reusable logic.

Example:

function useCounter(initialValue = 0) {
  const [count, setCount] = React.useState(initialValue);
  const increment = () => setCount((c) => c + 1);
  return { count, increment };
}

Now you can use useCounter() without caring how it's implemented.

c. Inheritance

Definition: Reusing code by creating child classes from parent classes.

In JavaScript: Achieved with class and extends.

In React:

  • Class components can extend React.Component or React.PureComponent.
  • Modern React prefers composition over inheritance, but you should still know this.
class MyComponent extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

d. Polymorphism

Definition: Same interface, different implementation.

In JavaScript: Method overriding or implementing the same method in different classes.

In React: Passing different props or components to achieve different behavior.

function Button({ as: Component = "button", children, ...props }) {
  return <Component {...props}>{children}</Component>;
}

// Usage:
<Button>Click Me</Button>
<Button as="a" href="#">Link Button</Button>

Same Button interface, but different rendering behavior.

OOP in JavaScript Context

Since React uses JS, you should understand:

  • class syntax and constructor
  • this keyword binding issues in class components
  • Prototypes and prototype chain
  • Static methods (static myMethod() {}) for utility functionality

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

How It Relates to React Interviews

Common questions you might get:

  1. Explain the four pillars of OOP with examples in React.
  2. Difference between composition and inheritance — why React prefers composition.
  3. How would you use OOP in a large-scale React project?
  4. How does encapsulation apply to state in React?
  5. When would you choose a class component over a functional component?

Quick React-Specific OOP Cheats

  • State & props = Encapsulation
  • Custom hooks / HOCs = Abstraction
  • Class components = Inheritance example (via React.Component)
  • Props-driven rendering = Polymorphism