본문 바로가기
기획자・디자이너를 위한 넓고 얕은 개발 지식/Javascript

8화. 자바스크립트 클래스란?

by theblnc 2024. 10. 28.
반응형

 

안녕하세요! 오늘은 자바스크립트에서 클래스가 무엇인지 아주 쉽게 설명해 드릴게요. 클래스를 알면, 자바스크립트로 사람, 강아지, 자동차 같은 물건을 만들고 표현할 수 있어요. 그럼 차근차근 알아볼까요?


1. 클래스란 무엇인가요?

클래스는 자바스크립트에서 물건이나 사람을 만드는 설계도라고 생각하면 돼요. 예를 들어, 강아지를 만들려면 강아지의 이름, 나이 같은 정보를 정해줘야겠죠? 그걸 클래스에서 미리 정해두는 거예요.


2. 클래스를 왜 사용할까요?

클래스를 사용하면 비슷한 물건쉽게 여러 개 만들 수 있어요. 한 번 클래스를 만들어 놓으면, 그걸 바탕으로 새로운 강아지사람 같은 여러 객체를 만들 수 있어요.


3. 클래스의 기본 구조

클래스는 두 가지를 정해줘요:

  • 속성: 물건이 가지고 있는 정보예요. (예: 이름, 나이)
  • 행동: 물건이 할 수 있는 일이에요. (예: 짖기, 달리기)
class Dog {
    constructor(name, age) {
        this.name = name;  // 강아지 이름
        this.age = age;    // 강아지 나이
    }

    bark() {  // 강아지가 짖는 행동
        console.log(`${this.name}가 멍멍 짖어요!`);
    }
}

위 예시는 강아지의 이름나이를 가지고 있고, 짖는 행동을 할 수 있는 클래스를 만든 거예요.


4. 클래스로 새로운 객체 만들기

클래스를 만들면, 그걸 바탕으로 **새로운 객체(실제 물건이나 사람)**를 만들 수 있어요. 예를 들어, Dog 클래스로 강아지 객체를 만들 수 있어요.

const myDog = new Dog("Charlie", 3);  // 이름이 Charlie인 3살 강아지 만들기

이렇게 만들면 Charlie라는 이름의 3살짜리 강아지가 만들어져요.


5. 객체의 행동 사용하기

객체는 클래스에서 정해진 행동도 할 수 있어요. Charlie라는 강아지가 짖는 행동을 하도록 할 수 있어요.

myDog.bark();  // 결과: "Charlie가 멍멍 짖어요!"

이렇게 클래스로 만든 객체는 **속성(이름, 나이)**과 **행동(짖기)**을 모두 가질 수 있어요.


6. 클래스의 장점

  • 비슷한 객체 여러 개 만들기: 클래스를 한 번 만들면, 비슷한 객체를 쉽게 여러 개 만들 수 있어요.
  • 코드가 깔끔해져요: 객체가 할 수 있는 행동과 속성을 한곳에 모아서 관리할 수 있어요.

결론 : 클래스는 객체를 만드는 설계도!

  • 클래스는 사람, 강아지, 물건 같은 객체를 만들기 위한 설계도예요.
  • 이름, 나이 같은 정보할 수 있는 행동을 클래스로 정해줄 수 있어요.
  • 이 설계도를 바탕으로 새로운 객체를 만들고, 그 객체가 할 수 있는 일을 정해줄 수 있어요.

이제 자바스크립트에서 클래스가 무엇인지 잘 알겠죠? 😊

 

반응형