[TIL] #45 Javascript

Class

extends

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  speak() {
    console.log(`${this.age}살 ${this.name} 말해봐`);
  }
}

class Dog extends Animal {}

let a = new Dog("강아지", 24);
a.speak();

> 24살 강아지 말해봐

음.. 확장이다
Animal 클래스를 Dog 클래스로 확장,
혹은 Dog 클래스가 Animal 클래스를 상속받는다

constructor는 initialize 해주는 메서드

super

자꾸 파이썬이랑 연관지어서 생각하게 된다
기능은 똑같다

super를 사용하지 않고
메서드는 override해서 사용

class Dog extends Animal {
  speak() {
    console.log(`${this.age}살 ${this.name} 멍멍멍멍`);
  }
}
> 24살 강아지 멍멍 

super를 사용해서 부모 클래스의 메서드를 이어 받아서 사용

class Dog extends Animal {
  speak() {
    super.speak();
  }
}
> 24살 강아지 말해봐 

Typescript

class Animal {
  name: String;
  age: Number;
  constructor(name: String, age: Number) {
    this.name = name;
    this.age = age;
  }

  speak() {
    console.log(`${this.age}살 ${this.name} 말해봐 `);
  }
}

class Dog extends Animal {}

let a = new Dog("강아지", 24);

처음에는 되게 비효율적이지 않나 생각했는데
꼼꼼하다... 실수를 할 확률이 줄어든다
안정성있는 프로그램을 만들 수 있게 된다

정적 메서드

@property와 비슷한 역할을 한다

class User {
  static method() {
    console.log("User");
  }
}

class Me {}

Me.method = function () {
  console.log("me");
};

User.method();
Me.method();

>User
>Me

static 메서드를 사용하게 되면 클래스에 property를 직접 할당하는 것과 같다

private, public, protect

아무것도 붙지 않은 method나 property는 public으로 클래스를 사용하는 모든곳에서
읽기/ 쓰기가 가능하다

private의 경우 앞에 private를 붙여 클래스 내부에서만
사용이 가능하도록 만들어 준다

최근에 추가된 문법으로
앞에 #을 붙여 private 으로 사용 가능하다

protect의 경우는 읽기 전용 메서드이다
private나 public처럼 앞에 붙이는게 아닌
앞에 _를 붙여주게 되면 보호받게 된다

protect는 상속이 가능하다

getter, setter

사용하게 되면 코드가 간결해지고, 파이썬의 경우 사용하는 곳이 굉장히 많은 걸로
알고있는데, 자바스크립트에서는 정확히 모르겠지만 아마 사용하는곳이 많지 않을까 싶다

let user = {
  name: "Kim",
  surName: "ddangkong",

  get fullName() {
    return `${this.name} ${this.surName}`;
  },

  set fullName(value) {
    [this.name, this.surName] = value.split(" ");
  },
};

user.fullName = "Kim junhyung";
console.log(user.name);
console.log(user.surName);

>Kim
>junhyung

사용하게 되면 fullName이란 가상의 프로퍼티가 생긴다
fullName이란 프로퍼티는 읽고 쓸수는 있지만, 실제로 존재하지는 않는다

get

인수가 없는 함수로, 프로퍼티를 읽을 때 동작함

set

인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨

defineProperty

function User(name, date) {
  this.name = name;
  this.date = date;

  Object.defineProperty(this, "age", {
    get() {
      let today = new Date().getFullYear();
      return today - this.date.getFullYear();
    },
  });
}

let kk = new User("kk", new Date(2000, 1, 1));
console.log(kk.name);
console.log(kk.date);
console.log(kk.age);

>kk
>2000-01-31T15:00:00.000Z
>21

set을 defineProperty의 두번쨰 인자로 넘겨준다
getter, setter를 사용하는 것과 같은 효과