[TIL] 자바스크립트 공부 8일차

typescript 사용 시, 클래스를 이용하여 라우터를 생성할 수 있다.
하지만 이 방법을 사용하지 않았던 이유가 자바 class만 배웠고
자바스크립트 class는 공부도 안해서 뭔가 무서웠다.
만약 다르면 어떻게하지.. 에러 수정은할 수 있을까 라는 생각에 못했지만
이번 시간에 자세히 알아보자.

클래스와 기본 문법

클래스의 의미는 객체지향 프로그래밍에서 특정 객체 생성을 위해
변수와 메소드를 정의하는 틀이라고 적혀있다.
실제로, new연산자나 생성자로 만들 수 있다.

기본 문법

class 클래스 이름 {
	메서드들
}

이렇게 클래스를 만들고 클래스 이름을 new로 호출시키면 내부 정의된 메서드가
들어있는 객체가 생성됩니다. 그리고 객체의 기본 상태 설정을 위해
생성자 메서드를 사용하면 쉽게 초기화시킬 수 있습니다.

예시)

class User {

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

  sayHi() {
    alert(this.name);
  }

}

let user = new User("John");
user.sayHi();

위처럼 constructor로 생성자를 정의시킨 후, 안에 있는 메서드를 사용할 수 있다.

클래스란?

아까 간단히 적은 몇 줄의 글로 완벽하게 이해할 수 없다.
자세히 알아보자!
클래스는 자바스크립트에서만 있는, 자바스크립트가 만든 개체는 아닙니다.
자바스크립트에서 클래스는 함수의 한 종류입니다.
실제로, class를 typeof로 확인하면 함수라는 결과값이 나온다.

예를 들어서 자세하게 파고들어가보자.
class User { ... }
위 크래스의 진짜 하는 일은?
1. User라는 이름을 가진 함수를 만듭니다.
2. 클래스 내에서 정의된 메서드는 prototype에 저장합니다.

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// 클래스는 함수입니다.
alert(typeof User); // function

// 정확히는 생성자 메서드와 동일합니다.
alert(User === User.prototype.constructor); // true

// 클래스 내부에서 정의한 메서드는 User.prototype에 저장됩니다.
alert(User.prototype.sayHi); // alert(this.name);

// 현재 프로토타입에는 메서드가 두 개입니다.
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

이해를 돕기 위해서 공식 문서에서 코드를 가져왔습니다.

getter와 setter

getter, setter 등 자바에서 private일 경우 메서드 호출을 통해
값을 바꾸거나 조회할 때 사용하는 것이 자바스크립트에서도 당연히 있다.

class User {

  constructor(name) {
    // setter를 활성화합니다.
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("이름이 너무 짧습니다.");
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // 이름이 너무 짧습니다.

get(), set()으로 값을 조회, 값을 수정할 수 있다.
하지만, 굳이 사용할 이유는 딱히 잘 모르겠다.

클래스 상속

자바에서 클래스를 배울 때 가장 강조하셨던 부분이다.
상속을 하기 위해선 extends 키워드를 이용하면 되고,
extends 뒤에 있는 클래스가 앞에 있는 클래스에 상속된다.
상속은 앞에 있는게 두개를 모두 사용할 수 있고,
뒤에 있는 건 앞에 있는 것을 사용할 수 없다.

메서드 오버라이딩

상속이란 개념이 나오면 당연히 나오는 오버라이딩이다.

대부분, 상속을 그대로 받지만 상속받은 메서드가 아닌 자체 메서드를 사용하고 싶을 때 사용한다.

부모 메서드 전체를 바꾸지 않고 부모 메서드를 기반으로 일부만 수정하거나
기능을 확장할 때 사용합니다.
이 때 사용되는 것이 super인데, 사용방법은

super.메서드(..) - 부모 클래스에 정의된 메서드를 호출
super(..) - 부모 생성자를 호출시킴

super로 부모 메서드를 가지고와서 this를 이용하여 자식 클래스의 메서드를
병합시키거나 super로 생성자 호출 후 값을 수정 후 만들 수 있습니다.

글을 마치며

항상 짧게 적고 여러가지 내용을 다뤘다면 이번엔 하나만 작성했습니다.
전에 클래스를 한번 자세히 배우고싶었지만 그러지 못했고
그런 점 때문에 하나를 위주로 적었던 것 같습니다.
클래스는 자바나 자바스크립트나 차이점은 있지만 기본 개념을 비슷하다고 느겼고 확실히 알아갈 수 있다고 생각했습니다.