▶ JavaScript Tutorial

JavaScript Classes

JavaScript Classes: 클래스의 이해와 활용

JavaScript 클래스는 ES6(ECMAScript 2015)에서 도입된 객체지향 프로그래밍(OOP) 방식을 지원하는 문법으로, 기존의 프로토타입 기반 상속을 보다 직관적이고 깔끔하게 사용할 수 있게 해줍니다. JavaScript의 클래스는 객체 생성, 상속 등을 처리하는 데 유용하며, 객체의 청사진(blueprint) 역할을 합니다.

이 가이드는 JavaScript 클래스의 기본 문법, 생성자 함수, 메서드 정의, 상속과 클래스 활용에 대해 설명합니다.

1. 클래스의 기본 문법

JavaScript에서 클래스를 정의하려면 class 키워드를 사용합니다. 클래스 내부에는 생성자 함수와 메서드를 정의할 수 있습니다.

1.1. 기본 클래스 정의

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

    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const person1 = new Person("Alice", 25);
person1.greet();  // 출력: Hello, my name is Alice.

위 예제에서, Person 클래스는 **name**과 **age**라는 속성을 가지며, **greet**라는 메서드를 정의하고 있습니다. 클래스를 인스턴스화할 때는 new 키워드를 사용해 객체를 생성합니다.

2. 생성자 함수 (`constructor`)

*생성자 함수(constructor)**는 클래스의 인스턴스가 생성될 때 호출되며, 객체의 속성을 초기화하는 데 사용됩니다. constructor는 클래스에서 하나만 정의할 수 있으며, 클래스 인스턴스를 생성할 때 필요한 데이터를 처리합니다.

2.1. 생성자 함수의 역할

class Animal {
    constructor(type, sound) {
        this.type = type;
        this.sound = sound;
    }

    makeSound() {
        console.log(`${this.type} says ${this.sound}`);
    }
}

const dog = new Animal("Dog", "Woof");
dog.makeSound();  // 출력: Dog says Woof

constructor 내부에서 this 키워드는 생성된 인스턴스 객체를 가리키며, 그 객체에 속성을 추가하거나 초기화할 수 있습니다.

3. 클래스 메서드

클래스 내부에서 정의된 함수는 메서드라고 부릅니다. 일반 메서드는 클래스의 인스턴스가 호출할 수 있으며, 정적 메서드는 클래스 자체에서 호출할 수 있습니다.

3.1. 인스턴스 메서드

클래스 내부에서 정의한 메서드는 클래스 인스턴스가 호출할 수 있습니다.

class Car {
    constructor(brand) {
        this.brand = brand;
    }

    drive() {
        console.log(`${this.brand} is driving.`);
    }
}

const myCar = new Car("Toyota");
myCar.drive();  // 출력: Toyota is driving.

3.2. 정적 메서드 (`static`)

정적 메서드는 클래스 자체에서 호출되며, 클래스의 인스턴스가 아닌 클래스 자체와 관련된 작업을 수행할 때 사용됩니다. 정적 메서드는 static 키워드로 정의됩니다.

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtil.add(5, 3));  // 출력: 8

정적 메서드는 클래스 인스턴스에서 호출할 수 없으며, 클래스 자체에서만 호출이 가능합니다.

4. 클래스 상속

*상속(Inheritance)**은 클래스 간에 속성과 메서드를 재사용할 수 있게 해주는 객체지향 프로그래밍의 핵심 개념입니다. JavaScript에서는 extends 키워드를 사용해 클래스를 상속할 수 있습니다.

4.1. 기본 상속

자식 클래스는 부모 클래스의 속성과 메서드를 상속받으며, super 키워드를 통해 부모 클래스의 생성자나 메서드를 호출할 수 있습니다.

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

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);  // 부모 클래스의 생성자를 호출
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Rex");
dog.speak();  // 출력: Rex barks.

*super(name)*는 부모 클래스의 생성자를 호출하여 부모 클래스의 속성을 초기화합니다.
자식 클래스는 부모 클래스의 메서드를 오버라이딩하여 재정의할 수 있습니다.

4.2. 상속과 메서드 오버라이딩

자식 클래스에서 부모 클래스의 메서드를 오버라이딩할 때, **super**를 사용하여 부모 클래스의 메서드를 호출할 수 있습니다.

class Animal {
    speak() {
        console.log("Animal makes a sound.");
    }
}

class Cat extends Animal {
    speak() {
        super.speak();  // 부모 클래스의 speak 메서드를 호출
        console.log("Cat meows.");
    }
}

const cat = new Cat();
cat.speak();
// 출력:
// Animal makes a sound.
// Cat meows.

5. 클래스 필드

클래스 필드는 클래스의 인스턴스가 생성될 때 초기화되는 속성입니다. 기본적으로 생성자 내에서 선언되며, 인스턴스가 생성될 때 동적으로 할당됩니다. 최신 JavaScript 문법에서는 클래스 필드를 생성자 외부에서 선언할 수도 있습니다.

5.1. 필드 정의

class Person {
    name = "Anonymous";  // 클래스 필드 선언

    constructor(age) {
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person = new Person(30);
person.greet();  // 출력: Hello, my name is Anonymous and I am 30 years old.

클래스 필드는 생성자 내에서 초기화되지 않고, 클래스 정의 시 바로 초기화할 수 있습니다.

6. 클래스의 접근 제어자 (Private Fields)

JavaScript에서 접근 제어자는 아직 정식으로 도입되지 않았지만, **프라이빗 필드(Private Fields)**는 최신 문법에서 지원되며, 클래스 내부에서만 접근 가능한 변수를 선언할 수 있습니다. 프라이빗 필드는 변수 이름 앞에 **#**을 붙여서 선언합니다.

6.1. 프라이빗 필드 사용

class Counter {
    #count = 0;  // 프라이빗 필드

    increment() {
        this.#count++;
        console.log(this.#count);
    }

    getCount() {
        return this.#count;
    }
}

const counter = new Counter();
counter.increment();  // 출력: 1
console.log(counter.getCount());  // 출력: 1
console.log(counter.#count);  // 오류: 프라이빗 필드에 외부에서 접근할 수 없음

*#count*는 클래스 내부에서만 접근할 수 있는 프라이빗 필드입니다.
외부에서 프라이빗 필드에 직접 접근하려고 하면 오류가 발생합니다.

7. 클래스의 활용 예시

7.1. 계산기 클래스

class Calculator {
    add(a, b) {
        return a + b;
    }

    subtract(a, b) {
        return a - b;
    }

    multiply(a, b) {
        return a * b;
    }

    divide(a, b) {
        if (b === 0) {
            return "Cannot divide by zero.";
        }
        return a / b;
    }
}

const calc = new Calculator();
console.log(calc.add(10, 5));  // 출력: 15
console.log(calc.divide(10, 0));  // 출력: Cannot divide by zero.

요약

클래스는 객체를 생성하고, 재사용 가능한 코드를 작성하기 위한 **객체지향 프로그래밍(OOP)**의 중요한 구성 요소입니다.
*생성자 함수(constructor)**는 클래스 인스턴스를 생성할 때 호출되며, 객체의 속성을 초기화합니다.
*정적 메서드(static)**는 클래스 자체에서 호출할 수 있는 메서드입니다.
*상속(extends)**을 통해 부모

클래스의 속성과 메서드를 자식 클래스가 물려받을 수 있습니다.

프라이빗 필드는 클래스 내부에서만 접근할 수 있는 변수를 선언하는 방법입니다.

JavaScript 클래스는 코드의 구조를 명확하게 만들고, 재사용성과 유지 보수성을 향상시키는 데 매우 유용한 도구입니다. 객체지향 프로그래밍의 원칙을 따르는 클래스 설계를 통해 더 나은 코드 품질을 유지할 수 있습니다.

코딩 스쿨 JavaScript