[Javascript]자바스크립트 클래스 이해하기

자바스크립트에서 클래스는 객체 지향 프로그래밍을 구현하는 데 매우 유용한 도구입니다. 클래스는 객체의 구조와 행동을 정의하는 틀을 제공하며, 이를 통해 더 깔끔하고 관리하기 쉬운 코드를 작성할 수 있습니다. 이번 포스팅에서는 자바스크립트 클래스의 기본 개념과 예제를 통해 클래스를 활용하는 방법을 알아보겠습니다.

≣ 목차

• 클래스 정의하기: 기본 구조와 키워드🏷️
• 생성자 - 객체 초기화하기🛠️
• 다양한 객체 생성하기🧪
• 클래스 속성에 접근하기🎨
• 클래스 메서드 호출하기🗣️
• 클래스와 인스턴스의 타입 확인하기🔍
• 핵심 내용👀

---

01. 클래스 정의하기: 기본 구조와 키워드🏷️

자바스크립트에서 클래스는 객체 지향 프로그래밍(OOP)을 지원하기 위해 ES6(ECMAScript 2015)에서 도입된 문법입니다. 클래스를 사용하면 객체를 생성하기 위한 템플릿을 정의할 수 있습니다. 클래스는 프로퍼티(속성)와 메서드(기능)로 구성됩니다. 다음은 자바스크립트 클래스의 기본 개념과 예제입니다.

클래스 정의

자바스크립트 클래스를 정의하려면 class 키워드를 사용합니다.

class Person {
    // 생성자 메서드: 객체 생성 시 호출됩니다.
    constructor(name, age) {
        this.name = name; // 프로퍼티 정의
        this.age = age;   // 프로퍼티 정의
    }

    // 메서드 정의
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

---

객체 생성

new 키워드를 사용하여 클래스로부터 객체를 생성합니다.

const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

person1.sayHello(); // 출력: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 출력: Hello, my name is Bob and I am 25 years old.

---

클래스의 구성 요소

생성자(constructor) 메서드

• constructor 메서드는 객체가 생성될 때 호출됩니다.
• 이 메서드를 통해 초기 프로퍼티를 설정할 수 있습니다.

프로퍼티(properties)

• 클래스 내부에서 정의된 변수로, 객체의 속성을 나타냅니다.
• 생성자 내부에서 this 키워드를 사용하여 정의합니다.

메서드(methods)

• 클래스 내부에서 정의된 함수로, 객체의 동작을 나타냅니다.

---

02. 생성자 - 객체 초기화하기🛠️

클래스 생성자는 객체가 생성될 때 호출되는 특별한 메서드입니다. 생성자 안에서 객체의 초기 상태를 설정할 수 있습니다.

class Animal {
    constructor(name, species, age) {
        this.name = name; // 동물 이름
        this.species = species; // 동물 종
        this.age = age; // 동물 나이
    }
}

---

03. 다양한 객체 생성하기🧪

위에서 정의한 Animal 클래스를 사용하여 여러 객체를 생성합니다.

const animal1 = new Animal('Leo', 'Lion', 5);
const animal2 = new Animal('Bella', 'Elephant', 8);
const animal3 = new Animal('Max', 'Dog', 3);

console.log(animal1);
console.log(animal2);
console.log(animal3);

각 인스턴스는 Animal 클래스의 속성과 메서드를 상속받습니다. 위의 코드는 각각의 동물 객체를 생성하고 콘솔에 출력합니다.

---

04. 클래스 속성에 접근하기🎨

생성된 객체의 속성에 접근하려면 점 표기법을 사용합니다.

console.log(animal1.name); // 출력: Leo
console.log(animal2.species); // 출력: Elephant
console.log(animal3.age); // 출력: 3

---

05. 클래스 메서드 호출하기🗣️

클래스 메서드는 객체의 동작을 정의합니다. 이를 호출하여 특정 작업을 수행할 수 있습니다.

class Animal {
    constructor(name, species, age) {
        this.name = name;
        this.species = species;
        this.age = age;
    }

    displayInfo() {
        console.log(`Animal: ${this.name} (${this.species}), Age: ${this.age}`);
    }
}

const animal1 = new Animal('Leo', 'Lion', 5);
animal1.displayInfo(); // 출력: Animal: Leo (Lion), Age: 5

---

06. 클래스와 인스턴스의 타입 확인하기

클래스와 인스턴스의 타입을 확인하려면 instanceof 연산자를 사용합니다. 이를 통해 객체가 특정 클래스의 인스턴스인지 확인할 수 있습니다. 자바스크립트에서 클래스는 함수로 취급되며, 클래스로 생성한 인스턴스는 객체로 취급됩니다.

// instanceof 연산자 사용
console.log(animal1 instanceof Animal); // 출력: true
console.log(animal2 instanceof Animal); // 출력: true
console.log(animal3 instanceof Animal); // 출력: true

console.log(animal1 instanceof Array); // 출력: false

// typeof 연산자 사용
console.log(typeof Animal); // "function
console.log(typeof animal1); // 출력: object
console.log(typeof animal2); // 출력: object
console.log(typeof animal3); // 출력: object

---

07. 핵심 내용👀