JavaScript 클래스 선언과 생성자, 쉽고 빠르게 배우기! - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 JavaScript의 클래스 선언과 생성자에 대해 알아볼게요. 여러분 혹시, 집에서 새 가구를 조립할 때 사용하는 조립 매뉴얼을 떠올려 본 적 있나요? 클래스와 생성자는 바로 이런 조립 매뉴얼과 첫 조립 과정처럼 생각하면 이해하기 쉬워요! 😊

---

클래스 선언: 가구의 조립 매뉴얼

클래스는 객체를 만들기 위한 청사진이에요. 즉, 새로 만들어질 객체(인스턴스)가 어떤 속성과 동작(메서드)을 가지는지 정의하는 거죠. 자, 예제로 바로 확인해볼까요?

// 클래스 선언
class Furniture {
  // 생성자: 인스턴스의 초기 상태를 설정
  constructor(type, material) {
    this.type = type; // 가구 유형 (ex. 책상, 의자)
    this.material = material; // 재료 (ex. 나무, 금속)
  }

  // 메서드: 가구 정보를 출력
  displayInfo() {
    console.log(`이 가구는 ${this.type}이며, 재료는 ${this.material}입니다.`);
  }
}

여기서 중요한 포인트!

1. 클래스 키워드: class로 클래스를 정의합니다.
2. 생성자 함수: constructor는 객체가 만들어질 때 초기값을 설정하는 함수에요.

---

생성자: 가구 조립 시작!

생성자는 새로운 객체를 만들 때 호출돼요. 마치 가구를 조립할 때, 필요한 나사를 준비하는 과정과 비슷하죠.

생성자 사용 예제

// Furniture 클래스 인스턴스 생성
const myDesk = new Furniture('책상', '나무');
const myChair = new Furniture('의자', '금속');

// 메서드 호출
myDesk.displayInfo(); // 이 가구는 책상이며, 재료는 나무입니다.
myChair.displayInfo(); // 이 가구는 의자이며, 재료는 금속입니다.

결과

복사편집이 가구는 책상이며, 재료는 나무입니다.
이 가구는 의자이며, 재료는 금속입니다.

🔑 Tip: 생성자를 통해 객체의 초기 상태를 깔끔하게 설정할 수 있어요!

---

클래스와 생성자가 왜 중요한가요?

현실 비유: 여러분이 가구를 자주 만들어야 한다고 가정해요. 매번 일일이 나사를 찾아 조립하는 게 너무 귀찮겠죠? 클래스는 반복적인 작업을 간단하게 처리할 수 있도록 도와줘요!

---

실전 예제: "자동차 클래스 만들기"

class Car {
  constructor(brand, color, year) {
    this.brand = brand; // 자동차 브랜드
    this.color = color; // 자동차 색상
    this.year = year;   // 제조 연도
  }

  startEngine() {
    console.log(`${this.brand} 자동차의 엔진이 가동되었습니다!`);
  }

  displayDetails() {
    console.log(`브랜드: ${this.brand}, 색상: ${this.color}, 연도: ${this.year}`);
  }
}

// 인스턴스 생성
const myCar = new Car('현대', '흰색', 2023);

// 메서드 호출
myCar.startEngine(); // 현대 자동차의 엔진이 가동되었습니다!
myCar.displayDetails(); // 브랜드: 현대, 색상: 흰색, 연도: 2023

---

😊 초보자 응원 메시지

JavaScript 클래스와 생성자는 여러분의 코드를 더욱 깔끔하고 구조화된 방식으로 만들어줍니다. 조금 어렵게 느껴질 수도 있지만, 반복해서 연습하면 분명 익숙해질 거예요! 여러분, 오늘도 멋진 코딩 여정 응원할게요! 🚀