JavaScript Class

ES6부터 JS에 Class 개념이 생겼습니다.
객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이다.
Class자체에는 데이터가 없고 단 한번만 선언된다.
객체 단위로 코드를 그룹화 할 수 있고 코드를 재사용하기 위해 사용되는 문법!

붕어빵을 만들 때 붕어빵 기계 틀이 Class이고 팥을 넣거나 생크림을 넣어서 만들어진 팥 붕어빵, 생크림 붕어빵이 Object(객체)라고 보면 된다.

Class 선언

class Person {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
    }
}

// methods

greet() {
	console.log(`$this.naem}: hello!`);
}

const jongjin = new Person('jongjin', 30);
console.log(jongjin.name); // jongjin
console.log(jongjin.age); 30
jongjin.greet(); // jongjin: hello!

Getter와 Setter

getter는 객체의 프로퍼티를 가져오는 함수
setter는 객체의 프로퍼티를 설정하는 함수

class User {
	constructor(firstName, lastName, age) {
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    
    get age() { // 값을 리턴
    	return this._age;
    }
    
    set age(value) { // 값을 설정
    	this._age = value < 0 ? 0 : value;
    }
}
const user1 = new User('Kim', 'Jongjin', -1);

User class에서 age 부분을 -1로 잘못 입력될 때 바로 잡아주는 역할을 한다.
return this._age; 부분에서 _age라고 변수명을 설정한 이유는 get과 set을 정의한 순간 this.age는 바로 getter , = age; 는 setter를 호출하기 때문에 call stack 오류가 발생한다. 이것을 방지하기 위해 변수명을 조금 다르게 하는 것이다.
이와 같이 설정해놓으면 나이를 -1로 잘못 쳐도 다시 값을 설정해 리턴해준다.

(보충 필요)

상속과 다양성

Class 상속은 Class를 다른 Class로 확장할 수 있다.
기존에 있는 기능을 토대로 새로운 기능을 만들 수 있는 것이다.

class Shape {
    constructor(width, height, color){
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw() {
        console.log(`draw ${this.color}`)
    }

    getArea() {
        return width * this.height;
    }
}

class Rectangle extends Shape {} // 상속
class Triangle extends Shape { // 다양성
	draw() {
    	super.draw(); // override시 부모의 draw() 메서드를 같이 출력하기
        console.log('삼각형')
    }
    getArea() {
        return (this.width * this.height) / 2;
    }
}

const rectangle = new Rectangle(30, 30, 'yellow');
rectangle.draw();

상속
Shape Class를 만들어 놓고 Rectangle Class가 Shape Class를 상속 받으면 Shape Class의 기능을 그대로 가져다가 사용할 수 있다.

다양성
상속 받은 기능을 조금 다르게 수정해야 할때 새로운 Class내에서 새로 정의해줘야 한다.
Triangle Class를 생성할 때 getArea() 함수를 다시 재정의해서 사용할 수 있는데 이를 override라고 한다. override시 해당되는 부모의 메서드가 사용되어지지 않는데 super.draw() 메서드를 통해 부모의 draw()메서드도 같이 사용할 수 있다.

instanceof

앞의 변수가 뒤에 Class의 객체가 맞는지 확인해주는 역할

   console.log(rectangle instanceof Rectangle); // true
   console.log(triangle instanceof Rectangle); // false
   console.log(triangle instanceof Triangle); // ture
   console.log(triangle instanceof Shape); // true
   console.log(triangle instanceof Object); // true

마지막 triangle instanceof Object는 자바스크립트의 모든 Class는 객체에서 상속받기 때문에 True이다.

참고한 강의
드림코딩 by 엘리
강의가 정말 외국어로 해주셔도 이해가 될 정도로 명쾌하고 대단한 강의입니다! 추천!!!