[JavaScript] 클래스

JavaScript 에서 객체를 생성하는 방법은 두 가지가 존재한다! 

 

1. 객체 리터럴 방식 ( `{ }` 사용 )

2. `class` 를 사용한 방식

---

 

1. 객체 리터럴 방식

let studentA = {
  name: "홍길동",
  grade: "A+",
  age: 27,
  study() {
    console.log("열심히 공부 함");
  },
  introduce() {
    console.log("안녕하세요!");
  },
};

 

이렇게 해서 객체를 만들어 줄 수있지만 , 재사용성이 떨어짐..

 

2. `class`를 이용한 객체 생성

class Student {
  // 필드 (속성)
  name;
  grade;
  age;

  // 생성자 (객체가 생성될 때 자동 실행)
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }

  // 메서드 (객체가 사용할 함수)
  study() {
    console.log("열심히 공부 함");
  }

  introduce() {
    console.log(`안녕하세요! ${this.name}입니다.`);
  }
}

 

`constructor`를 통해 객체의 속성을 설정할 수 있음.

 

3. 클래스 인스턴스 생성 ( 객체 만들기 )

let studentB = new Student("홍길동", "A+", 27);
console.log(studentB);
studentB.study();
studentB.introduce();

---

 

4. 상속 사용하기 

`extends` 키워드를 활용해서 상속을 사용할 수 있다.

 

Student 클래스를 상속받아 `StudentDeveloper` 클래스를 만들어보자

class StudentDeveloper extends Student {
  // 추가 필드
  favoriteSkill;

  // 생성자 (부모 클래스의 속성을 그대로 상속받고, 새로운 속성 추가)
  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age); // 부모(Student)의 생성자 호출
    this.favoriteSkill = favoriteSkill;
  }

  // 새로운 메서드 추가
  programing() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함.`);
  }
}

 

5. 상속받은 클래스 사용하기

const studentDeveloper = new StudentDeveloper("임꺽정", "B+", 27, "TypeScript");
console.log(studentDeveloper);
studentDeveloper.programing();