JavaScript의 비밀스러운 삶: 청사진

Source: Dev.to

ES6 Classes are just “syntactic sugar” for prototypes

Timothy는 칠판 앞에 서서 자신의 작품을 감상했다. 그는 완벽한 직사각형 상자를 그렸다.

“드디어,” 그는 손에 묻은 먼지를 털며 말했다. “문명이다.”

그 상자 안에 그는 클래스를 적었다:

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

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

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

“봐, Margaret,” Timothy가 활짝 웃으며 말했다. “깨끗하고 구조화돼 있으며, Java나 C++에서 쓰는 설계도와 똑같아. 드디어 라이브러리에 제대로 된 템플릿이 생겼어.”

Margaret는 확대경과 작은 드라이버를 들고 다가왔다.

“확실히 예쁘긴 해, Timothy. 하지만 겉모습에 속아서는 안 돼.”

그녀는 class라는 단어를 드라이버로 두드렸다.

“이건 템플릿이 아니라 코스튬이야. 그 아래의 기계 구조는 20년 전과 정확히 똑같아.”

Margaret는 칠판 중앙에 선을 그었다.

“네가 쓰고 있다고 생각하는 것이 바로 이거야,” 그녀가 그의 클래스를 가리키며 말했다. “하지만 엔진이 실제로 보는 것은 이거야.”

오른쪽에는 그녀가 old way—생성자 함수를 적었다:

// 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");

“두 코드는 동일해,” Margaret가 밝혀냈다. “class 키워드는 단지 문법 설탕일 뿐이야. 생성자와 메서드를 모아 깔끔한 블록으로 포장하지만, 엔진은 이를 풀어 기존의 프로토타입 체인을 그대로 만든다.”

Timothy가 물었다, “그럼 설계도가 없는 거야?”

“아니,” Margaret가 대답했다. “함수와 객체만 서로 연결돼 있을 뿐이야.”

What new actually does

Timothy는 new 연산자에 대해 궁금해졌다.

“그럼 new는 어떨까? 그 단어는 뭔가 특별하게 느껴져. 마치 공장 기계를 가동시키는 느낌이야.”

“그것도 기계야,” Margaret가 동의했다. “아주 간단한 기계로 정확히 네 단계만 수행하지.”

그녀는 코드를 지우고 기어가 돌아가는 모습을 보여주기 위해 수동 구현을 적었다:

// 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;
}

“그게 전부야?” Timothy가 물었다.

“그게 전부야,” Margaret가 고개를 끄덕이며 말했다. “마법 같은 생성이 아니라 배관 작업이야: 버킷을 만들고, 파이프(setPrototypeOf)를 연결하고, 데이터를 채워(apply)서 너에게 건네주는 거지.”

Timothy는 자신의 가정을 테스트했다:

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

“하! 클래스는 그냥 함수에 불과해!” 그가 외쳤다. “그리고 링크는 실제다.”

Takeaway

Timothy는 현대 클래스 문법이 언제나 존재해 온 프로토타입 기반 메커니즘 위에 편리한 축약형일 뿐이라는 것을 깨달았다. class 키워드는 가독성을 높이고 관련 로직을 그룹화하지만 새로운 객체 모델을 도입하는 것이 아니라—내부적으로는 여전히 함수를 만들고 프로토타입을 통해 객체를 연결한다. 이를 이해하면 “인스턴스”와 new 연산자에 대한 오해를 피하고, 개발자들이 엔진이 실제로 하는 일을 눈여겨보게 된다.