자바스크립트 클래스(class) 기초 개념과 실전 예제

자바스크립트 클래스(class) 기초 개념과 실전 예제

자바스크립트(JavaScript)는 객체 지향 프로그래밍을 지원하며, 이를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다. 이 글에서는 자바스크립트 클래스(class)의 기본 개념부터 실전 예제까지 다루어, 여러분이 자바스크립트 클래스를 쉽게 이해하고 활용할 수 있도록 돕겠습니다.

 

 

목차

1. 클래스란 무엇인가?
2. 기본 클래스 정의하기
3. 생성자와 메서드
4. 상속과 확장
5. 실전 예제
6. 결론

 

1. 클래스란 무엇인가?

클래스는 객체를 생성하기 위한 템플릿입니다. 자바스크립트에서 클래스는 ES6(ECMAScript 2015) 버전에서 도입되었으며, 프로토타입 기반 상속을 보다 직관적으로 사용할 수 있게 해줍니다.

 

 

2. 기본 클래스 정의하기

자바스크립트에서 클래스를 정의하는 문법은 다음과 같습니다:

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

위의 코드에서는 Person 클래스를 정의하고, name과 age 속성을 초기화하는 생성자 메서드를 포함하고 있습니다.

 

 

3. 생성자와 메서드

클래스는 생성자 외에도 여러 메서드를 가질 수 있습니다. 예를 들어:

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

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

const john = new Person('John', 30);
john.greet(); // Hello, my name is John and I am 30 years old.

 

 

4. 상속과 확장

자바스크립트 클래스는 상속을 통해 확장할 수 있습니다. 이를 통해 코드 재사용이 더욱 쉬워집니다:

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age);
        this.jobTitle = jobTitle;
    }

    work() {
        console.log(`${this.name} is working as a ${this.jobTitle}.`);
    }
}

const jane = new Employee('Jane', 28, 'Software Engineer');
jane.greet(); // Hello, my name is Jane and I am 28 years old.
jane.work(); // Jane is working as a Software Engineer.

 

 

 

 

5. 실전 예제

이제 자바스크립트 클래스를 활용한 실제 예제를 살펴보겠습니다. 이 예제에서는 간단한 은행 계좌 클래스를 정의하고, 입금 및 출금 기능을 구현합니다:

class BankAccount {
    constructor(owner, balance = 0) {
        this.owner = owner;
        this.balance = balance;
    }

    deposit(amount) {
        this.balance += amount;
        console.log(`${this.owner} deposited ${amount}. New balance: ${this.balance}`);
    }

    withdraw(amount) {
        if (amount > this.balance) {
            console.log('Insufficient funds');
        } else {
            this.balance -= amount;
            console.log(`${this.owner} withdrew ${amount}. New balance: ${this.balance}`);
        }
    }
}

const account = new BankAccount('Alice');
account.deposit(100); // Alice deposited 100. New balance: 100
account.withdraw(30); // Alice withdrew 30. New balance: 70
account.withdraw(80); // Insufficient funds

 

 

6. 결론

자바스크립트 클래스는 객체 지향 프로그래밍의 강력한 도구로, 코드의 재사용성과 유지보수성을 크게 향상시킵니다. 기본 개념부터 상속과 확장, 그리고 실전 예제까지 살펴보면서 자바스크립트 클래스의 다양한 활용법을 익혔기를 바랍니다.