00.Class.introduction.md

0. 자바스크립트의 클래스 소개

자바스크립트의 클래스 소개

클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법

ex. 학생을 객체로 표현한다면

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

이때 한 명의 학생이 더 필요하다면 다음과 같이 새로운 변수를 만들어야 함

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

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

→ 이때 studentA와 studentB에 저장된 객체는 동일한 프로퍼티를 가짐

→ 동일한 모양의 객체

이렇게 동일한 모양의 객체를 여러 개 생성해야 하면 어쩔 수 없이 중복이 발생…

이럴때 클래스라는 문법을 사용하면 도움이 됨

클래스 선언하기

class Student {
    
}

→ 클래스는 객체를 생성하는 틀

클래스를 선언했다면 다음으로는 필드를 선언해야 함.

• 필드: 이 클래스가 생성할 객체가 갖는 프로퍼티를 의미
• ex. 학생 객체는 name, age, grade 프로퍼티를 가짐

class Student {
  // 필드
  name;
  age;
  grade;
}

필드를 선언했다면 다음으로는 생성자를 선언함.

• 생성자는 특수한 메서드로 실질적으로 객체를 생성하는 함수

class Student {
  // 필드
  name;
  age;
  grade;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }
}

생성자에는 매개변수로 프로퍼티 값을 받아 this.프로퍼티의 값으로 할당함. 이때 this는 객체이며 현재 만들고 있는 객체를 의미함.

이렇게 생성자를 만들면 이제 이 클래스를 호출하여 객체를 생성할 수 있음

const studentB = **new Student("홍길동", "A+", 27)**;

클래스를 이용해 새로운 객체를 생성할 때에는 new 클래스이름 형태로 클래스의 생성자 함수를 호출함

이때 인수로 name, grade, age를 전달함

그럼 생성자가 호출되어 this.name에는 매개변수 name에 저장된 “홍길동”을 this.grade에는 매개변수 grade에 저장된 “A+”를 this.age에는 매개변수 age에 저장된 27을 저장함

{ name: "홍길동", grade: "A+", age: 27 }

→ 다음과 같이 생긴 객체를 생성

실제로 콘솔에 출력해 보면

class Student {
  // 필드
  name;
  age;
  grade;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }
}

const studentB = new Student("홍길동", "A+", 27);

console.log(studentB);
// Student { name: '홍길동', age: 27, grade: 'A+' }

다음으로는 클래스가 생성할 객체의 메서드도 설정해 줌

class Student {
  // 필드
  name;
  grade;
  age;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }

  // 메서드
  study() {
    console.log("열심히 공부 함");
  }

  introduce() {
    console.log(`안녕하세요!`);
  }
}

let studentB = new Student("홍길동", "A+", 27);

studentB.study(); // 열심히 공부 함
studentB.introduce(); // 안녕하세요!

this 활용하기

this는 현재 만들고 있는 객체를 의미

• 따라서 메서드에 다음과 같이 this를 활용해 객체 프로퍼티의 값을 활용하는 것 또한 가능함

class Student {
  (...)

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

let studentB = new Student("홍길동", "A+", 27);

studentB.introduce(); // 안녕하세요 이정환 입니다!

상속

앞서 만든 Student 클래스를 기반으로 추가적인 필드와 메서드를 갖는 클래스를 선언하고 싶다면 다음과 같이 상속을 사용하면 됨

class StudentDeveloper extends Student {
}

→ StudentDeveloper 클래스는 Student 클래스를 상속함.

→ Student 클래스에 정의된 모든 필드와 메서드를 자동으로 갖게 됨

StudentDeveloper 클래스만 새로운 필드나 메서드도 다음과 같이 정의할 수 있음

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

🚨 이때 StudentDeveloper 클래스에서 Student 클래스의 생서자를 함께 호출해줘야함

그렇지 않으면 생성되는 객체의 name, grade, age 값이 제대로 설정되지 않음. 따라서 다음과 같이 super라를 메서드를 호출함

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age);
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

super를 호출하고 인수로 name, grade, age를 전달하면 슈퍼 클래스의 생성자를 호출함.

따라서 this.name, this.grade, this.age의 값을 설정하게 됨.