PY
JS

Python to JavaScript

11 lessons

Progress0%
1Variables and Constants2Functions and Closures3Lists vs Arrays4Dicts vs Objects and Map5Classes and Prototypes6Modules and Imports7Async Programming8DOM and Browser APIs9Type Hints vs TypeScript10Error Handling11Build Tools and npm
All Mirror Courses
PY
JS
Classes and Prototypes
MirrorLesson 5 of 11
Lesson 5

Classes and Prototypes

Object-oriented programming in JavaScript

Introduction

In this lesson, you'll learn about classes and prototypes in JavaScript. Coming from Python, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
PY
From Python:

In Python, you're familiar with object-oriented programming in javascript.

JS
In JavaScript:

JavaScript has its own approach to object-oriented programming in javascript, which we'll explore step by step.

The JavaScript Way

Let's see how JavaScript handles this concept. Here's a typical example:

JS
JavaScript Example
class Shape {
  constructor(color) {
    this.color = color;
  }

  describe() {
    return `A ${this.color} shape`;
  }

  static default() {
    return new Shape("red");
  }

  static info() {
    return "I am a shape";
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const c = new Circle("blue", 5);
console.log(c.describe());

Comparing to Python

Here's how you might have written similar code in Python:

PY
Python (What you know)
class Shape:
    def __init__(self, color):
        self.color = color

    def describe(self):
        return f"A {self.color} shape"

    @classmethod
    def default(cls):
        return cls("red")

    @staticmethod
    def info():
        return "I am a shape"


class Circle(Shape):
    def __init__(self, color, radius):
        super().__init__(color)
        self.radius = radius

    def area(self):
        import math
        return math.pi * self.radius ** 2


c = Circle("blue", 5)
print(c.describe())
Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

@classmethod → static method that returns new instance

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

@staticmethod → static method (no cls/self)

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

JS has only static — no @classmethod distinction

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

super() in JS requires no arguments in the class body

Step-by-Step Breakdown

1. Constructor

JS uses constructor() instead of __init__(). this replaces self.

PY
Python
def __init__(self, x):
    self.x = x
JS
JavaScript
constructor(x) {
  this.x = x;
}

2. Static Methods

JS static methods cover both Python @staticmethod and @classmethod.

PY
Python
@classmethod
def default(cls): return cls("red")
@staticmethod
def info(): return "..."
JS
JavaScript
static default() { return new Shape("red"); }
static info() { return "..."; }
Common Pitfall
JS static methods don't receive a cls parameter. Reference the class by name inside the method.

3. Inheritance

extends and super work like Python's class Child(Parent) and super().__init__().

PY
Python
class Circle(Shape):
    def __init__(self, c, r):
        super().__init__(c)
JS
JavaScript
class Circle extends Shape {
  constructor(c, r) {
    super(c);
  }
}
Rule of Thumb
Always call super() before using this in a derived class constructor — JS will throw a ReferenceError otherwise.

Common Mistakes

When coming from Python, developers often make these mistakes:

  • @classmethod → static method that returns new instance
  • @staticmethod → static method (no cls/self)
  • JS has only static — no @classmethod distinction
Common Pitfall
Don't assume JavaScript works exactly like Python. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • constructor + this ≈ __init__ + self
  • extends / super ≈ (Parent) / super().__init__
  • One static keyword covers both @staticmethod and @classmethod
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Python code in JavaScript to practice these concepts.
PreviousNext