[ JavaScript ] Class and OOP

결·2023년 7월 31일

목록 보기

4/9

📌 Class

정보를 일반화해서 정리하는 방법
객체지향 프로그래밍에서 특정 객체(인스턴스) 생성하기 위한
변수와 메소들를 정의하는 일종의 틀

class Idol {
    name;
    year;

    // 생성자 => 위에서 name, year 를 따로 정의하지 않아도 괜찮음 (속성 정의는 optional)
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }

    // 메소드 정의
    sayName(){
        return `안녕하세요. 저는 ${this.name} 입니다.`;
    }
}

const yujin = new Idol('안유진',2003); 
console.log(yujin);
console.log(yujin.sayName());

const liz = new Idol('리즈',2004);
console.log(liz);
console.log(liz.name);
console.log(liz.year);
console.log(liz.sayName());

클래스는 함수로 인식
클래스로 생성한 객체는 object

console.log(typeof Idol);
console.log(typeof liz);

📌 Getter and Setter

🧷 Getter

값을 가져올 때 사용
함수처럼 정의하지만 변수처럼 사용

데이터를 가공해서 새로운 데이터 반환시
private 한 값 반환시

private 값 : 실제로 값은 갖고 있으나, 외부에서 엑세스하지 못하는 값
=> getter 이용해 가져옴

🧷 Setter

값을 새로 저장할 때 사용
무조건 파라미터를 받아야함

class Idol {
    name;
    year;

    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
	
  	// getter
    get nameAndYear() {
        return `${this.name} - ${this.year}`;
    }

	// setter
    set name(name) {
        this.name = name;
    }
}

const yujin = new Idol('안유진', 2003);
console.log(yujin);
console.log(yujin.nameAndYear);

yujin.name = '가나다';
console.log(yujin);

class Idol2 {
    #name;
    year;

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

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

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

const liz = new Idol2('리즈', 2004);
console.log(liz);
console.log(liz.name);

liz.name = '가나다';
console.log(liz.name)

📌 Static Keyword

객체가 아닌 클래스에 귀속됨

class Idol {
    name;
    year;
    static groupName;

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

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

const yujin = new Idol('안유진', 2003);
console.log(yujin);

console.log(Idol.groupName);
console.log(Idol.returnGroupName());

🧷 factorial constructor

class Idol2 {
    name;
    year;
    static groupName;

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

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

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

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


const liz2 = Idol2.fromList(
    [
        '리즈',
        2004,
    ]
);
console.log(liz2);

📌 상속

extends 키워드 사용
객체들 간의 관계를 구축하는 방법
수퍼클래스 또는 부모 클래스 등의 기존의 클래스로부터 속성과 동작을 상속받을 수 있음
자식클래스는 부모 클래스의 속성/동작을 물려받아 사용할 수 있지만,
부모클래스는 자식 클래스의 속성, 함수 등 사용 불가

class Idol {
    name;
    year;

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

class FemaleIdol extends Idol {
    dance() {
        return `${this.name}이 춤을 춥니다.`
    }
};


class MaleIdol extends Idol {
    sing() {
        return `${this.name}이 노래를 부릅니다.`
    }
};

const yujin = new FemaleIdol('안유진', 2003);
console.log(yujin);
console.log(yujin.name);
console.log(yujin.dance());

const jimin = new MaleIdol('지민', 1995);
console.log(jimin);
console.log(jimin.name);
console.log(jimin.sing());

🧷 instance of

console.log(yujin instanceof Idol);
console.log(yujin instanceof FemaleIdol);
console.log(yujin instanceof MaleIdol);

📌 Super Keyword

부모 클래스로부터 받아오기 위한 키워드
함수 안에서는 this 키워드 사용해 변수 불러옴
함수 안에서 함수 불러올 경우 super 키워드 사용

class Idol {
    name;
    year;

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

    sayHello() {
        return `안녕하세요! ${this.name} 입니다.`
    }
}

class FemaleIdol extends Idol {
    part;

    constructor(name, year, part) {
        super(name, year);        // 부모클래스 것을 받아옴; super 키워드 사용
        this.part = part;
    }

    sayHello() {
        return `${super.sayHello()} ${this.part}를 맡고 있습니다.`
    }
};

const yujin = new FemaleIdol('안유진', 2003, '보컬');
console.log(yujin);
console.log(yujin.sayHello());

const liz = new Idol('리즈', 2004);
console.log(liz);
console.log(liz.sayHello());

📝 Class Challenge

문제 및 해설

class Country {
    name;
    idolGroups;

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

class IdolGroup {
    name;
    members;

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


class Idol {
    name;
    year;

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


class MaleIdol extends Idol {
    sing() {
        return `${this.name}이 노래를 합니다.`
    }
}


class FemaleIdol extends Idol {
    dance() {
        return `${this.name}이 춤을 춥니다.`
    }
}


const cIveMembers = iveMembers.map(
    (x) => new FemaleIdol(x['name'], x['year'])
);
console.log(cIveMembers);


const cBTS = btsMembers.map(
    (x) => new MaleIdol(x['name'], x['year'])
);
console.log(cBTS);


const IVE = new IdolGroup(
    '아이브',
    cIveMembers, 
)
console.log(IVE);


const BTS = new IdolGroup(
    'BTS',
    cBTS, 
)
console.log(BTS);


const korea = new Country(
    '대한민국',
    [
        IVE,
        BTS
    ],
);
console.log(korea);