The Secret Life of JavaScript: The Blueprint

Source: Dev.to

ES6 Classes are just “syntactic sugar” for prototypes

Timothy stood at the chalkboard, admiring his work. He had drawn a perfect, rectangular box.

“Finally,” he said, dusting his hands. “Civilization.”

Inside the box, he wrote a class:

class Book {
    constructor(title, author) {
        this.title = title;
        this.author = author;
    }

    read() {
        console.log("Reading " + this.title);
    }
}

const myBook = new Book("The Hobbit", "Tolkien");

“Look at it, Margaret,” Timothy beamed. “It is clean, structured, and looks exactly like the blueprints used in Java or C++. We finally have proper templates in the library.”

Margaret walked over, holding a magnifying glass and a small screwdriver.

“It is certainly pretty, Timothy. But do not be fooled by the paint.”

She tapped the word class with the screwdriver.

“This is not a template. This is a costume. Underneath, the machinery is exactly the same as it was twenty years ago.”

Margaret drew a line down the middle of the board.

“This is what you think you are writing,” she said, pointing to his class. “But this is what the engine actually sees.”

On the right side, she wrote the old way—the constructor function:

// 1. The Constructor Function
function Book(title, author) {
    this.title = title;
    this.author = author;
}

// 2. The Prototype Link
Book.prototype.read = function() {
    console.log("Reading " + this.title);
};

const myBook = new Book("The Hobbit", "Tolkien");

“They are identical,” Margaret revealed. “The class keyword is just syntactic sugar. It gathers the constructor and the methods and packages them into a neat block, but the engine simply unpacks them and builds the same old prototype chain.”

Timothy asked, “So there is no blueprint?”

“No,” Margaret replied. “There are only functions and objects linked together.”

What new actually does

Timothy wondered about the new operator.

“But what about new? That word feels special. It feels like I am firing up a factory machine.”

“It is a machine,” Margaret agreed. “A very simple one that performs exactly four steps.”

She erased the code and wrote a manual implementation to show him the gears turning:

// What 'new' actually does:
function fakeNew(Constructor, ...args) {
    // Step 1: Create a new, empty object
    const newObj = {};

    // Step 2: Link it to the prototype
    Object.setPrototypeOf(newObj, Constructor.prototype);

    // Step 3: Bind 'this' and run the constructor
    Constructor.apply(newObj, args);

    // Step 4: Return the object
    return newObj;
}

“That is it?” Timothy asked.

“That is it,” Margaret nodded. “It is not magic creation. It is just plumbing: it builds a bucket, connects the pipes (setPrototypeOf), fills it with data (apply), and hands it to you.”

Timothy tested his assumptions:

console.log(typeof Book); // "function"
console.log(Object.getPrototypeOf(myBook) === Book.prototype); // true

“Ha! The class is just a function!” he shouted. “And the link is real.”

Takeaway

Timothy realized that the modern class syntax is a convenient shorthand over the same prototype‑based mechanics that have always existed in JavaScript. While the class keyword improves readability and groups related logic, it does not introduce a new object model—under the hood, it still creates functions and links objects via prototypes. Understanding this helps avoid misconceptions about “instances” and the new operator, reminding developers to keep an eye on what the engine actually does.