[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 6강 (2)

class, object, public&private, static, 상속과 다양성

오늘 내가 배운 것

Public & Private 

생성자를 쓰지 않고 정의할 수 있다.

그냥 정의하게 되면 public  (외부에서 접근이 가능하고),  #기호를 붙이게 되면 private(class 내에서만 값이 보여지고 접근이 되고, 값이 변경이 가능하다.)

 

Static (타입스크립트에서도 많이 쓰인다.)

오브젝트가 아닌 클래스에 연결해서 사용한다.

static함수를 호출 할 때도 클래스 이름을 이용해서 호출 해야한다. (static은 클래스에 붙여서 사용하는 것이므로 클래스로 호출하는 것이고, 클래스로 호출 하기 때문에 오브젝트를 생성하지 않고 바로 참조할 수 있다.)

class.~~ //ok

object.~~ //error

오브젝트에 상관없이, 들어오는 데이터에 상관이 없이 공통적으로 클래스에서 쓸 수 있는거라면  static과 static method 를 이용해서 작성하는 것이 메모리의 사용을 조금 더 줄여 줄 수 있다.

(static 부분에서 동영상을 보면서 적고 이해는 했는데 뭔가 위에 적은 내용이 너무 부실하다 생각해서 여러 사이트랑 동영상을 더 찾아봤는데... 이 부분을 정확하게 정리되어 있는 곳이 없는 느낌이다.. 아니 오히려 정리가 잘 되어있는건데 내가 좀 답답하게 느끼는걸지도 모르겠다. 뭔가 정확하게 한 문장으로 표현 할 방법은 없는 것인가..? )

상속 (inheritance)

연장한다는 뜻의 extends 키워드를 이용하게 되면 Shape 에 있는 모든 것들이 

Const rectangle의 rectangle 에 포함이 된다.

밑에 트라이앵글이라는 클래스를 만들 수 있는데 여기에도 똑같이 Shape의 클래스를 확장한다.

이 방식으로 상속을 하게 되는  것인데

상속을 하게 되면 공통되어지는  객체를 일일이 작성하지 않아도 extends를 이용해서 동일한 것들을 계속해서 재사용 할 수 있다. 

 

다양성

우리가 필요한 함수만 바로 재정의해서 사용할 수 있다.

(오버라이딩)

오버라이딩 해서 출력할 때 더이상 앞에 있는 기존의 정의가 호출 되지 않게 된다.

이때, 공통적으로(기존에) 정의한 것도 같이 출력하기를 원한다면 super 키워드를 사용하여 작성을 하면 부모메소드에 들어오라는 뜻으로, 

호출 하게되면 부모메소드 뒤에 새로 정의한 메소드가 같이 출력이 되게 된다.

 

 

 

---

동영상 보면서 따라 적어보기

// 3. Fields (public, priavte)
 // 너무 최근에 출시되서 현업에서 덜 쓰이고 있다!
 // 브라우저에 지원이 안되는 곳이 아직 많다

 class Experiment{
    publciField = 2;
    #privateField = 0;
 }
 const experiment = new Experiment();
 console.log(experiment.publciField);
 console.log(experiment.privateField);

// 4. Static properties and methods
// 이것도 최근에 추가됨.

class Article {
    static publisher = 'Dream Coding';
    constructor(articeNumber){
        this. articeNumber = articeNumber
    }

    static printPublisher() {
        console.log(Article.publisher);
    }
}  
const article1 = new Article(1);  
const aritcle2 = new Article(2);
//console.log(article1.publisher);   //undefined , underfined
console.log(Article.publisher);  //클래스 자체에 붙어있기 때문에 이렇게 사용해야한다.

//스태틱함수를 호출 할 때도 클래스 이름을 이용해서 프린트퍼블리셔로 호출해야함.
Article.printPublisher();


// 5. Inheritance (상속)
// a way for one class to extend another class.
class Shape { 
    constructor (width, height, color) {
        this.width = width;
        this.height = height;
        this.color = color;
    }

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

    getArea() { 
        return this.width * this.height;
    }
}
class Rectangle extends Shape {}
class Triangle extends Shape{
                //extends : 연장한다는 키워드를 이용.

    draw() {
        super.draw();
        console.log('🔺');
    }
    getArea(){
        return (this.width * this.height) / 2;
    }               //필요한 함수만 재정의 (오버라이딩)
}

const rectangle = new Rectangle(20, 20 , 'blue');
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle ( 20, 20, 'red');
triangle.draw();
console.log(triangle.getArea()); 


// 6. Class checking : instanceOf
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