💡2.6 코드 구조화 패턴

JS 생태계에 데이터와 행동 관점에서 코드를 구조화하는 패턴은 클래스와 모듈이 있다. 클래스와 모듈은 상호 배타적인 패턴이 아니므로 이 두 패턴을 모두 사용해야 한다. (한 패턴만 사용하는 프로그램도, 두 패턴 모두 사용하지 않는 프로그램도 있다.)

⭐️ 2.6.1 클래스

클래스는 사용자가 정의한 데이터 타입으로 데이터와 이 데이터를 조작하는 동작이 들어간다. 프로그램에서 어떻게 동작하는지 구체적인 값이 필요하다면 new 키워드를 사용해 인스턴스를 만들어야 한다.

class Page {
    constructor(text) {
        this.text = text;
    }

    print() {
        console.log(this.text);
    }
}

class Notebook {
    constructor() {
        this.pages = [];
    }

    addPage(text) {
        var page = new Page(text);
        this.pages.push(page);
    }

    print() {
        for (let page of this.pages) {
            page.print();
        }
    }
}

var mathNotes = new Notebook();
mathNotes.addPage("Arithmetic: + - * / ...");
mathNotes.addPage("Trigonometry: sin cos tan ...");

mathNotes.print();
// ..

📌 Page 클래스에서 문자열 형태의 데이터는 this.text 멤버 변수에 저장된다. print() 메서드를 사용하면 콘솔에 데이터를 출력할 수 있다.

📌 Notebook 클래스에서 Page 인스턴스가 요소로 있는 배열을 데이터로 사용한다. 동작을 정의한 메서드는 1. addPage(): Page 인스턴스를 새롭게 만들고, 이 인스턴스를 멤버 변수인 배열에 추가한다. 2.print()는 Notebook 내 모든 페이지를 출력하는 동작을 담당한다.

📌 mathNotes = new Notebook()은 Notebook 클래스를 사용해 인스턴스를 만들고, page = new Page(text)에서는 Page 클래스를 사용해 인스턴스를 생성한다.

클래스의 동작(메서드)은 클래스만 가지고 사용할 수 없다. mathNotes.addPage()나 page.print() 처럼 인스턴스를 통해서만 호출할 수 있다.

클래스 메커니즘을 사용하면 데이터(ex. text, pages)와 데이터의 동작(ex. addPage(), print())을 한 곳에 묶어 구조화할 수 있다.

상속

클래스 지향 설계에는 상속과 다형성을 빼놓을 수 없다. (JS에서는 잘 사용하지 않는 설계)

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

    print() {
        console.log(`
            Title: ${ this.title }
            By: ${ this.author }
            ${ this.pubDate }
        `);
    }
}

📌 Publication 클래스에 출판에 필요한 동작이 정의되어 있다.

좀 더 구체적인 출판 형태인 책, 블로그 포스팅을 코드로 구현해보자.

class Book extends Publication {
    constructor(bookDetails) {
        super(
            bookDetails.title,
            bookDetails.author,
            bookDetails.publishedOn
        );
        this.publisher = bookDetails.publisher;
        this.ISBN = bookDetails.ISBN;
    }

    print() {
        super.print();
        console.log(`
            Publisher: ${ this.publisher }
            ISBN: ${ this.ISBN }
        `);
    }
}

class BlogPost extends Publication {
    constructor(title,author,pubDate,URL) {
        super(title,author,pubDate);
        this.URL = URL;
    }

    print() {
        super.print();
        console.log(this.URL);
    }
}

📌 Book과 BlogPost 클래스 모두 extends라는 키워드를 사용해 Publication 클래스에서 정의한 동작을 확장해서 사용한다.

📌 각 생성자 내에 있는 super()는 부모 클래스인 Pubblbication의 생성자를 자식 클래스에서도 사용할 수 있도록 코드를 다시 작성하지 않아도 출판 타입에 맞게 초기화할 수 있다.

자식 클래스의 예시를 보자.

var YDKJS = new Book({
    title: "You Don't Know JS",
    author: "Kyle Simpson",
    publishedOn: "June 2014",
    publisher: "O'Reilly",
    ISBN: "123456-789"
});

YDKJS.print();
// Title: You Don't Know JS
// By: Kyle Simpson
// June 2014
// Publisher: O'Reilly
// ISBN: 123456-789

var forAgainstLet = new BlogPost(
    "For and against let",
    "Kyle Simpson",
    "October 27, 2014",
    "https://davidwalsh.name/for-and-against-let"
);

forAgainstLet.print();
// Title: For and against let
// By: Kyle Simpson
// October 27, 2014
// https://davidwalsh.name/for-and-against-let

📌 두 자식 클래스의 인스턴스를 통해 부모 클래스인 Publication에서 상속 받아 새롭게 재정의한 메서드인 print()를 호출할 수 있었다.

📌 자식 클래스 Book과 BlogPost 각 자식 클래스의 print() 메서드 내부에서 super.print()를 호출하여 부모 클래스의 print() 메서드를 그대로 상속받아 사용한다.

→ 상속받은 메서드와 새롭게 정의한 메서드의 이름이 동일하고 공존할 수 있는 것을 다형성이라고 한다.

상속: 클래스라는 독립된 논리적 공간에 데이터와 행동을 체계화할 수 있도록 만드는 강력한 도구이다. 자식 클래스는 부모 클래스의 데이터나 동작에 접근하거나 이를 사용하는 방식으로 부모 클래스와 협력한다.

⭐️ 2.6.2 모듈

모듈 패턴은 논리적 단위 기준으로 데이터와 행동을 그룹화하는 데 목적이 있다. 모듈도 클래스처럼 협력을 위해 다른 모듈의 데이터나 행동을 가져오거나 접근할 수 있다.

모듈과 클래스의 가장 눈에 띄는 차이점은 문법이다.

클래식 모듈

클래식 모듈은 최소 한 번 이상 실행되는 외부 함수이다. 이 외부 함수는 모듈 인스턴스 내부의 숨겨진 데이터를 대상으로 작동하는 함수가 있는 '인스턴스'를 반환한다.

클래식 모듈은 단순한 함수이기도, 함수 호출하면 모듈 인스턴스가 생성되기 때문에 클래식 모듈 인스턴스에 있는 함수를 모듈 팩토리라고 설명하기도 한다.

🔗 클래스

1. 메서드와 데이터를 객체 인스턴스에 저장

2. 메서드와 데이터에 접근하려면 접두사 this. 사용

3. 인스턴스의 API가 클래스 자체에 정의

4. 모든 데이터와 메서드가 공개

🔗 모듈

1. this. 없어도 스코프 내 식별자 역할 변수를 사용해 메서드와 데이터에 접근

2. 외부에 노출된 공개 메서드를 사용해 객체를 명시적으로 만들고 반환 → 참조되지 않은 메서드는 팩토리 함수 내에 비공개

ES 모듈 내부에 클래식 모듈을 함께 사용하면 모듈 인스턴스를 여러 개 만들 수 있다. ES 모듈을 사용하고 있다면, 클래스보다는 클래식 모듈 사용을 권장한다.

모듈 인슽턴스 하나만 필요하다면 export 키워드를 사용해 필요한 메서드를 직접 내보내 사용하면 된다.