✔️Class

자바스크립트에서도 클래스를 사용할 수 있습니다.

class IdolModel {
    name;
    year;

    constructor(name, year) {
        this.name = name;
        this.year = year;
    }

    sayName(){
        return `안녕하세요 저는 ${this.name}입니다.`;
    }
}

인스턴스 변수와 인스턴스 메서드 둘 다 자바스크립트에서는 속성(property)라고 칭합니다.

const yuJin = new IdolModel('안유진', 2003);
console.log(yuJin); // IdolModel {name: '안유진', year: 2003}

실행하면 위와 같은 결과를 얻을 수 있습니다.

자바스크립트는 좀.. 박살난 언어라서 프로퍼티(인스턴스 변수)를 선언 안하고 생성자에만 선언해도 됩니다.

class IdolModel {
    //name;
    //year;

    constructor(name, year) {
        this.name = name;
        this.year = year;
    }

    sayName(){
        return `안녕하세요 저는 ${this.name}입니다.`;
    }
}

const yuJin = new IdolModel('안유진', 2003);
console.log(yuJin); // IdolModel {name: '안유진', year: 2003}

이렇게 해도 똑같은 결과가 나오는데, 인스턴스 변수는 기본적으로 써주는 게 좋을 것 같습니다.

console.log(yuJin.name); // 안유진
console.log(yuJin.year); // 2003

이렇게 직접 프로퍼티에 접근할 수도 있습니다.

console.log(typeof IdolModel); // function
console.log(typeof yuJin); // object

IdolModel은 분명 class인데 typeof 연산자를 써서 IdolModel의 타입을 알아보니 function으로 나옵니다.

실제로 class는 function입니다.

📌getter, setter, private 키워드

class IdolModel2{
    #name;
    year;

    constructor(name, year){
        this.#name = name;
        this.year = year;
    }

    get name(){
        return this.#name;
    }

    set name(name){
        this.#name = name;
    }
}

const yuJin2 = new IdolModel2('안유진', 2003);

인스턴스 변수에 #을 붙이면 private 멤버로 인식합니다. #접근 제어자 문법은 es7을 지원하는 엔진부터 사용 가능합니다.

private 접근 제어자가 붙은 경우 해당 변수에 직접 접근이 불가능합니다.

private 접근 제어자가 붙은 경우는 직접 접근이 불가능해서 getter를 통해서 값을 불러올 수 있고, setter를 통해 값을 다시 할당할 수 있습니다.

getter와 setter는 함수가 아닙니다. 프로퍼티 접근처럼 사용할 수 있습니다.

console.log(yuJin2); // IdolModel2 {year: 2003}
console.log(yuJin2.name); // 안유진

yuJin2.name = '코드팩토리';
console.log(yuJin2.name); // 코드팩토리

실무에서는 immutable programming을 보통 하기 때문에 setter를 사용하는 패턴은 잘 쓰지 않습니다.

참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields

📌static 키워드

class IdolModel {
    name;
    year;
    static groupName = '아이브';

    constructor(name, year) {
        this.name = name;
        this.year = year;
    }

    static returnGroupName(){
        return '아이브';
    }
}

static 키워드로 선언된 프로퍼티는 class에 속하는 속성(프로퍼티)입니다.

const yuJin = new IdolModel('안유진', 2003);
console.log(yuJin); // IdolModel {name: '안유진', year: 2003}

console.log(IdolModel.groupName); // 아이브
console.log(IdolModel.returnGroupName()); // 아이브

생성된 인스턴스를 직접 콘솔에 찍으면 groupName은 나타나지 않습니다.

class 프로퍼티로 접근하면 확인할 수 있습니다.

👉정적 팩토리 메서드(팩토리 컨스트럭터)

static 키워드를 쓰는 이유 중 하나는 정적 패토리 메서드 패턴을 사용할 수 있기 때문입니다.

class IdolModel{
    name;
    year;

    constructor(name, year){
        this.name = name;
        this.year = year;
    }

    static fromObject(object){
        return new IdolModel(
            object.name,
            object.year,
        );
    }

    static fromList(list){
        return new IdolModel(
            list[0],
            list[1],
        );
    }
}

생성자 대신 사용할 수 있습니다. 특정 데이터로부터 인스턴스를 생성할 수 있도록 템플릿화 할 수 있는 장점이 있습니다.

const yuJin2 = IdolModel.fromObject({
    name: '안유진',
    year: 2003,
});
console.log(yuJin2); // IdolModel {name: '안유진', year: 2003}

const wonYoung = IdolModel.fromList(
    [
        '장원영',
        2003,
    ]
);
console.log(wonYoung); // IdolModel {name: '장원영', year: 2003}

참고
https://inpa.tistory.com/entry/GOF-%F0%9F%92%A0-%EC%A0%95%EC%A0%81-%ED%8C%A9%ED%86%A0%EB%A6%AC-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%83%9D%EC%84%B1%EC%9E%90-%EB%8C%80%EC%8B%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

---

🙏🙏🙏
해당 강의를 수강하며 정리한 내용입니다.
[코드팩토리][입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
https://www.inflearn.com/course/%EC%BD%94%EB%93%9C%ED%8C%A9%ED%86%A0%EB%A6%AC-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%92%80%EC%BD%94%EC%8A%A4