클래스

🌼 클래스의 기본 문법

class ClassName {
  constructor() {  }
  method1() {  }
  method2() {  }
  method3() {  }
}

 

클래스를 생성한 뒤 'new ClassName()'을 호출하면 객체가 생성된다.

constructor는 new에 의해 자동으로 호출되며, 객체를 초기화할 수 있다.

 

class Fruit {
  constructor(name) {
    this.name = name;
  }
  
  say() {
    console.log(this.name);
  }
  
}

const apple = new Fruit('apple');
apple.say(); //apple

 

new Fruit를 하는 순간 새로운 객체가 생성되고 constructor가 자동으로 실행된다.

this.name에 'apple'이 할당되고, 메서드 say를 실행하면 'apple'이 출력된다.

 

 

🌼 getter와 setter

class에서는 접근자 프로퍼티인 get과 set을 사용해 다른 데이터의 프로퍼티 값을 읽거나 저장할 수 있다.

둘 다 메서드 이름 앞에 get, set 키워드를 붙여 사용한다.

 

class Student {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.lastName}${this.firstName}`;
  }

  set fullName(value) {
    console.log(value);
  }
}

const student = new Student('길동', '홍');
console.log(student.fullName);

 

get은 가져오는 용도이므로 return이 필요하고

set은 프로퍼티에 할당하는 용도이므로 매개변수가 있어야 한다.

 

🌼 클래스 필드

클래스 필드를 사용하면 어떤 종류의 프로퍼티도 클래스에 추가할 수 있다.

 

class Student {
  name = "길동";

  greeting() {
    console.log(`${this.name} 안녕!`);
  }
}

new Student().greeting(); // 길동 안녕!

 

클래스 필드는 '프로퍼티 이름 = 값'을 쓰면 만들 수 있다.

클래스 필드는 개별 객체에만 클래스 필드가 설정된다.

따라서 Student.prototype에는 설정되지 않는다.

 

class Student {
  name = "길동";
}

const student = new Student();
console.log(student.name); //길동
console.log(Student.prototype.name); //undefined

 

🌼 접근 제어자

자바스크립트는 기본적으로 public이다.

pubilc 필드는 어디서든 참조할 수 있다.

이런 경우 누구든 손쉽게 원하는 값에 접근해 변경을 가할 수 있는 위험이 있다.

 

따라서 private으로 만들어 밖에서 접근할 수 없게 만든다.

'#'을 붙여 사용하고 클래스 안에서만 접근이 가능하다.

 

class Fruit {
  #name;

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

const apple = new Fruit('apple');
apple.#name = 'orange';
console.log(apple); //SyntaxError: Private field '#name' must be declared in an enclosing class

 

프로퍼티가 정의된 클래스와 그 클래스를 상속받는 클래스에서만 사용가능한 protected도 있다.

protected 역시 private처럼 내부 인터페이스를 숨길 때 사용한다.

'_'로 시작하는데 자바스크립트에서 지원하는 문법은 아니고 관습적으로 사용한다.

 

 

🌼 정적 메서드와 정적 프로퍼티

prototype이 아닌 클래스 함수 내에서 메서드와 프로퍼티를 만들 수 있다.

생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있다.

 

class Student {
  static staticMethod() {
    console.log('static');
  }
}

Student.staticMethod(); // static

const student = new Student();
student.staticMethod(); //TypeError

 

정적 프로퍼티와 정적 메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다.

또한, 클래스 레벨의 메서드에서는 this를 참조할 수 없다.

 

class Product {
  constructor(name, expirationDate) {
    this.name = name;
    this.expirationDate = expirationDate;
  }

  static compareExpirationDate(product1, product2) {
    return product1.expirationDate - product2.expirationDate;
  }
}

let products = [
  new Product('apple', 2),
  new Product('banana', 3),
  new Product('orange', 1),
  new Product('lemon', 5),
];

products.sort(Product.compareExpirationDate);
console.log(products);
// [
//   Product { name: 'orange', expirationDate: 1 },
//   Product { name: 'apple', expirationDate: 2 },
//   Product { name: 'banana', expirationDate: 3 },
//   Product { name: 'lemon', expirationDate: 5 }
// ]

 

Product.compareExpirationDate는 products를 비교해 주는 역할을 한다.

따라서 위에서 바라보는 방식으로 역할을 수행해야 한다.

그래서 각 products들의 expiration date를 비교할 수 있는 것이다.

 

🌼 상속

클래스는 상속할 수 있다.

상속을 사용하면 다른 클래스로의 확장이 가능해진다.

 

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

  eat() {
    console.log('먹는다');
  }

  play() {
    console.log('논다');
  }
}

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

  eat() {
    console.log('먹는다');
  }

  play() {
    console.log('논다');
  }

  drink(){
    console.log('술 마신다');
    
  }
}

 

두개의 클래스가 있다.

하나는 강아지, 하나는 사람이다.

둘 다 이름이 있고, 먹고, 논다.

다만 다른 것은 사람은 술을 마신다는 것이다.

class Dog와 Person은 중복되는 것이 너무 많다.

이때, 상속을 사용하면 된다.

 

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

  eat() {
    console.log('먹는다');
  }

  play() {
    console.log('논다');
  }
}

class Dog extends Animal {}
const dog = new Dog('바둑이');
dog.play();

class Person extends Animal {}
const person = new Person('홍길동');
person.eat();

 

Dog와 Person은 Animal이라는 공통점이 있기에 class Animal을 만들고 둘이 겹치는 부분을 정리한다.

그리고 extends를 통해 상속받으면 Animal에 있는 메서드를 Dog와 Person도 사용할 수 있다.

 

class Person extends Animal {
  constructor(name, hobby) {
    super(name);
    this.hobby = hobby;
  }

  call() {
    console.log(this.name, this.hobby);
  }
}
const person = new Person('홍길동', '공놀이');
person.call(); //홍길동, 공놀이

 

Animal이 가지고 있는 name을 쓰고, 새로운 hobby를 만들고 싶다면?

super를 통해 name을 사용하고, hobby는 새로 contructor에 넣어준다.

 

class Person extends Animal {
  constructor(name, hobby) {
    super(name);
    this.hobby = hobby;
  }

  play() {
    super.play();
    console.log('놀거야?');
  }
}
const person = new Person('홍길동', '공놀이');
person.play();
//논다
//놀거야?

 

부모 메서드를 토대로 일부 기능만 변경하고 싶을 때도 super를 사용한다.

이를 오버라이딩이라고 한다.

위 코드에서 play는 상속받은 Person에도 존재하는데 super를 하지 않고 작동한다면 Person.play인 '놀 거야?'만 출력된다.

그러나 super를 사용하면 Animal.play인 '논다'도 함께 출력됨을 알 수 있다.