클래스(class)

클래스는 객체를 생성하기 위한 템플릿(서식)이다.
(2015년(ES6)에 추가된 문법으로 이전에는 함수로 객체를 생성)

공장(factory) 함수

function createPerson(name, age) {
  return { name, age };
}

const person1 = createPerson('young', 2);
const person2 = createPerson('hyun', 9);

---

생성자(constructor) 함수

원래 window를 가리키던 this가 'new' 연산자를 통해 가상의 새로운 객체인 자기자신을 가리킨다. (즉, 생성자 함수의 리턴값으로 생성된 인스턴스가 됨)

함수명은 개발자들 간의 약속으로 대문자로 시작한다.
프로토타입 메서드: 메서드는 'prototype' 속성 안에 추가한다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function() {
  console.log(this.name, this.age);
}

const person1 = new Person('young', 2); // 실수로 new를 빼면 this는 window를 가리킴
const person2 = new Person('hyun', 9);

---

클래스

클래스 안에서 this는 새로운 객체(person)이다.
※주의! 화살표 함수를 이용해 메서드를 작성하면 this가 다른 것을 가리키게 된다.

class Person {
  constructor(name, age) { // 생성자 함수
    this.name = name;
    this.age = age;
  }
  sayHi() { // 생성자 함수에서의 prototype이라 할 수 있는 메서드
    console.log(this.name, this.age); 
  }
}

const person1 = new Person('young', 2); // 실수로 new를 빼면 에러 발생!
const person2 = new Person('hyun', 9);

과거의 생성자 함수에서는 생성자 따로, prototype 메서드 따로 떨어져 있어 한 눈에 확인하기 어렵다는 문제가 있었다.

클래스는 하나의 클래스 안에 생성자, prototype 메서드가 '하나로 묶여' 코드가 깔끔하고 보기 쉽다.👍
(클래스를 이용해 객체 생성, 초기값, 객체 관련 메서드가 한 세트)
관련 있는 코드들은 항상 같이 묶어주는 것을 추천!!🙏

Q. 클래스를 어떤 경우에 사용할까? 사용할 때 좋은 점?
A. 비슷한 객체를 여러개 생성하거나 객체 간에 서로 상호작용할 때 클래스로 묶어준다.
동작들을 메서드로 작성하면 클래스 안에 그룹화할 수 있고 코드가 기능별로 묶여있어 깔끔하다.
클래스를 사용하지 않았을 때 실수로 발생하는 버그를 최소화할 수 있다.

클래스 상속

extends 상속 예약어를 통해 부모 클래스에서 자식 클래스로 생성자와 메서드를 상속 받는다.
super 를 통해 부모 클래스의 생성자 공통 속성/메서드에 접근하여 상속받고, 부모와 다른 별도의 속성은 따로 작성한다.

자식 클래스에서 메서드를 작성하지 않았더라도 부모 클래스의 메서드를 대신 호출하므로 생략 가능하며 자식 클래스에서도 동일 메서드를 사용할 수 있다.

class People { // 부모 클래스
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

class Programmer extends People { // 자식 클래스
  constructor (name, age, languages) { 
    super (name, age); // 부모 클래스의 생성자 접근
    this.languages = languages;
  }
  sayHi() { // 부모 클래스의 메서드 접근(생략 가능)
    console.log(`Hi, I'm ${this.name}`);
  }
  writeCode() { // 부모 클래스에 없는 메서드
    console.log(I can use + this.languages.join() + code); 
  }
}

const programmer = new Programmer('yk', 25, ['html', 'css', 'js']);
programmer.writeCode(); // I can use html,css,js code