static, method

프레임워크를 더 효율적으로 개발할 수 있게 다양한 패턴을 고안하는데, 이를 디자인 패턴 이라고 한다.
이러한 디자인 패턴을 사용하기위해 추가된 문법이있는데 static속성과 static메소드이다.

class ClassName {
  static attr = value
  static method () {
  }
}

ClassName.attr;
ClassName.method();

이를 이용해 간단하게 사용문법을 만들어보면 아래와 같다.

class className {
  static attr = 30;
  static stMethod () {
    console.log("This is static method");
  }
}

className.attr // 30
className.stMethod() // This is static method

이를 이용해 제곱을 계산해주는 class의 static도 만들 수 있다.

class calculator {
  static square(value) {
    value *= value;
    console.log(value);
  }
}

calculator.square(30); // 900

override

부모가 갖고 있는 함수를 자식에서 다시 선언해서 덮어쓰는 것을 override라고 한다.

class className extends 상속하는ClassName {
  상속하는 class의 함수
}

위와 같은 방식으로 사용할 수 있다.

다음은 예시로 abc라는 class를 만들었다.

class abc {
   call () {
       this.a();
       this.b();
       this.c();
   }

   a () {
       console.log("A Method");
   }

   b () {
       console.log("B Method");
   }

   c () {
       console.log("C Method");
   }
}

new abc().a() // A Method

그리고 abc class를 상속받아 a method를 override 해보겠다.

class overrideABC extends abc {
  a () {
    console.log("A's child Method");
  }
}

new overrideABC().a() // A's child Method

위와 같이 a method 혹은 함수들을 상속받아 사용하는것을 override했다 라고 한다.

만약 위와같이 재구성하지않고 부모의 a method를 사용하고 싶다면 super를 사용하면된다.

class overrideABC extends abc {
  a() {
    super.a();
    console.log("A's child Method");
  }
}

new overrideABC().a() // A Method A's child Method

이런식으로 사용하면 된다.

toString()

어떤 객체를 문자열로 만들때 toString()이라는 메소드를 사용하였다. 자바 스크립트 모든 객체는 toString()을 갖는데, 이는 Object가 최상위 클래스를 가지며 어떤클래스를 만들어도 Object클래스로부터 상속을 받게되기 때문에 발생하는 현상이다. 이를 이용해 클래스를 만들때 toString()이라는 메소드를 만들면 Obeject로부터 상속받은 toString()을 override하게된다.

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

    toString() {
        return `이름: ${this.name}\n나이: ${this.age}`
    }
}

const pet = new Pet('나비', 6);
console.log(pet); // Pet {name: '나비', age: 6}
pet.toString(); // '이름: 나비\n나이: 6'

위와같이 그냥 객체를 문자열로 바꾸는게 아닌 이름: ${this.name}\n나이: ${this.age} 에 맞춰 바뀐 모습을 볼 수 있다.