176일차 - class

이미 오래전에 배웠긴 했지만, 사용해본 적이 거의 없어서 기억속에서 멀어졌었다.
하지만, 이번에 복기하는 겸 다시 공부 후 정리해보려고 한다.

class

우선 알게된 것이 있어서 먼저 언급해 볼까 한다.
화살표 함수는 사용하지 못한다
그 이유는 화살표 함수는 자신의 this가 없기 떄문이다.
현재 범위에서 존재하지 않는 this를 찾기 떄문에, 화살표 함수는 바깥 범위애서 this를 찾는다.

class는 object를 만드는 기계이다.

만약 사람들에 대한 정보(이름, 나이, 거주지)를 객체로 저장하고 싶다. 만약 한명 한명 저장하려면 3명을 저장하려면 object를 3개 100명을 저장하려면 object를 100개 생성해야 한다.

const person1 = { name: '지성', age: 30, residence: 'Seoul' };

const Person2 = { name: '감천', age: 26, residence: 'Seoul' };

const Person3 = { name: '길동', age: 24, residence: 'Busan' };

보기만 해도 비효율적이다.
function으로 객체 생성 함수를 생성할 수는 있었지만, ES6부터 class문법이 생겨서 더 효율적으로 생성 가능해졌다.

// 첫글자 영어 대문자 쓰는것이 국룰 객체를 생성하는 Person이라는 class
class Person {
  // constructor는 객체를 생성하고 초기화 하는 메서드
  constructor(name, age, residence) {
    this.name = name;
    this.age = age;
    this.residence = residence;
  }
}

const Person1 = new Person('지성', 30, 'Seoul') // Person { name: '지성', age: 30, residence: 'Seoul' }

const Person2 = new Person('감천', 26, 'Seoul') // Person { name: '감천', age: 26, residence: 'Seoul' }

const Person3 = new Person('길동', 24, 'Busan') // Person { name: '길동', age: 24, residence: 'Busan' }

super

super 키워드는 객체의 부모가 가지고 있는 메서드를 호출하기 위해 사용된다.

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

// class 자식 extends 부모
class Developer extends Person {
  constructor(name, age, residence, stack) {
    // super로 상속
    super(name, age, residence);
    this.stack = stack;
  }
}

const Developer1 = new Developer('김발자', 27, 'Seoul', 'JS') // Developer { name: '김발자', age: 27, residence: 'Seoul', stack: 'JS' }

static

static은 정적메서드로, 클래스 함수 안에서 메서드를 정의할 수 있다.

class MyName {
  static getName(name) {
    return `MyName is ${name}`
  }
}

MyName.getName(MinChan) // 'MyName is MinChan'

참고 자료

코딩애플