클래스(Class) 기본기 다지기!

클래스는 객체지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 특정 객체를 만들기 위한 "틀"이라고 생각하면 됩니다. 예를 들어, 같은 모양의 빵을 만들려면 빵틀이 필요하듯, 클래스는 객체를 만들기 위한 설계도와 같은 역할을 합니다. 자바스크립트에서도 이 클래스를 사용해 비슷한 특성을 가진 여러 객체를 쉽게 만들 수 있습니다. 여기서는 자바스크립트의 클래스 사용법과 그 구조를 예제와 함께 이해하기 쉽게 알아볼테니 천천히 따라와보세요 :)🙌🏼

---

📍1. 클래스 정의하기

자바스크립트에서 클래스를 정의하려면 class 키워드를 사용합니다. 아래 예제에서 우리는 Dog라는 클래스를 정의했습니다.

class Dog {
  type; // 클래스의 프로퍼티
  size; 

  constructor(type, size) { // 생성자 함수
    this.type = type;
    this.size = size;
  }

  sayType() { // 메서드
    return `저는 ${this.type}입니다.`;
  }
}

1. 프로퍼티(Property)

• 클래스 내부에 있는 type과 size는 클래스가 가질 수 있는 속성을 말하며, 이를 프로퍼티라고 합니다.
• 자바스크립트에서는 꼭 프로퍼티를 미리 정의하지 않아도 사용할 수 있지만, 정의해두는 것이 좋은 코드입니다!

2. 생성자(Constructor)

• constructor는 클래스로부터 객체를 생성할 때 호출되는 특별한 함수입니다. new 키워드를 사용해 클래스를 호출하면 이 생성자가 실행됩니다.
• 이 안에서 this 키워드를 통해 새로 생성되는 객체의 프로퍼티를 초기화할 수 있습니다.

3. 메서드(Method)

• 클래스 내부에서 선언한 함수는 메서드라고 합니다. 위 예제에서 sayType()은 클래스의 메서드로 정의되었습니다.
• 클래스 내에서 함수를 선언할 때는 function 키워드를 사용하지 않습니다.

📍2. 클래스로 객체 만들기

클래스를 사용해 새로운 객체를 생성하려면 new 키워드를 사용합니다. 아래 예제는 Dog 클래스를 이용해 몇 가지 객체를 만드는 방법입니다.

const maltese = new Dog('말티즈', 'small'); 
const pome = new Dog('포메라니안', 'small');
const retriever = new Dog('리트리버', 'So Big');

console.log(maltese); 
console.log(pome);
console.log(retriever);

• new Dog('말티즈', 'small')와 같이 new 키워드를 사용하면, 클래스의 생성자에 전달된 값을 바탕으로 새로운 객체가 생성됩니다. 즉, 빵 틀에 빵을 넣어서 찍어내는 것이죠!
• 그래서 객체 지향적으로 프로그래밍이 가능하다는 것입니다.

📍3. 클래스의 사용법

생성한 객체의 프로퍼티와 메서드에 접근하는 방법은 아래와 같습니다.

console.log(maltese.type); // '말티즈' 출력
console.log(maltese.size); // 'small' 출력
console.log(maltese.sayType()); // '저는 말티즈입니다.' 출력

• 마침표(.) 표기법을 사용해 객체의 프로퍼티와 메서드에 접근할 수 있습니다.

📍4. 클래스와 객체의 관계

클래스로 생성된 객체는 object 타입입니다. 즉, 객체는 클래스에서 만들어진 인스턴스(instance)입니다. 이 부분이 중요한 이유는 객체와 클래스의 관계를 이해해야 더 효율적인 코드를 작성할 수 있기 때문이랍니다!

console.log(typeof Dog); // 'function' 출력
console.log(typeof maltese); // 'object' 출력

⭐중요: 왜 알아야 할까?

• 자바스크립트에서 클래스는 사실 함수입니다..! 그래서 typeof Dog를 실행하면 'function'이 출력됩니다.
• 하지만 클래스로 생성된 객체(maltese 등)는 object 타입입니다. 즉, 클래스를 사용해 객체를 만들면, 우리는 "객체 지향"의 방식을 따라 코드를 구성할 수 있습니다. 이렇게 하면 코드의 재사용성과 유지보수성이 높아집니다.

---

✨핵심 정리

1. 클래스의 생성자: constructor는 클래스로부터 객체를 만들 때 초기값을 설정해주는 역할을 합니다.
2. 프로퍼티와 메서드: 클래스 내부의 변수는 프로퍼티, 함수는 메서드입니다.
3. 클래스로 생성된 객체는 object 타입이다: 이는 객체지향 프로그래밍의 핵심으로, 클래스를 통해 동일한 구조의 여러 객체를 쉽게 만들고 관리할 수 있습니다.