코딩 스쿨 JavaScript

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ JavaScript Classes
JavaScript Class Intro
JavaScript Class Inheritance
JavaScript Class Static

JavaScript Class Intro

JavaScript Classes: 소개 및 기본 개념

  • *JavaScript의 클래스(Class)**는 객체 지향 프로그래밍(OOP) 개념을 구현할 수 있는 구조로, **ES6(ECMAScript 2015)**에서 도입되었습니다. 클래스는 객체를 생성하고 상속을 구현하는 방법을 단순화하여, 코드의 재사용성과 유지보수성을 크게 향상시킵니다. JavaScript에서 클래스는 사실상 프로토타입 기반 객체를 사용하며, 객체 지향 프로그래밍의 편리한 문법적 설탕이라고 할 수 있습니다.

이 가이드는 JavaScript 클래스의 기본 개념과 사용법을 소개합니다.

1. 클래스 기본 구조

클래스는 class 키워드를 사용하여 정의되며, **생성자 함수(constructor)**를 통해 객체의 초기 상태를 설정할 수 있습니다. 또한, 클래스 내부에는 메서드를 정의하여 객체가 수행할 동작을 지정할 수 있습니다.

1.1. 클래스 정의 구문

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 person1 = new Person('Alice', 25);
person1.greet();  // Hello, my name is Alice and I am 25 years old.

1.2. 주요 특징

  • class 키워드를 사용해 클래스를 정의합니다.
  • *생성자 함수(constructor)**는 객체가 생성될 때 호출되어, 초기 속성을 설정합니다.
  • 클래스 내부에 메서드를 정의하여 객체의 동작을 지정할 수 있습니다.
  • new 키워드를 사용해 클래스로부터 인스턴스를 생성합니다.

2. 클래스와 생성자 함수

클래스의 constructor 메서드는 객체가 생성될 때 호출되며, 객체의 초기 상태를 설정하는 데 사용됩니다. **constructor**는 객체의 속성을 정의하고 초기값을 할당할 수 있습니다.

2.1. 생성자 함수 예시

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

    // 메서드 정의
    start() {
        console.log(`${this.brand} ${this.model} is starting.`);
    }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.start();  // Toyota Corolla is starting.
  • constructor 함수는 new 키워드로 객체를 생성할 때 자동으로 호출됩니다.
  • *this*는 생성된 객체를 참조하며, 객체의 속성을 정의하고 초기화합니다.

3. 클래스 메서드

클래스 내부에 정의된 함수는 메서드라고 불리며, 객체가 수행할 동작을 정의합니다. 메서드는 객체의 속성에 접근하고 **this**를 통해 객체를 참조할 수 있습니다.

3.1. 클래스 메서드 예시

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    // 면적 계산 메서드
    getArea() {
        return this.width * this.height;
    }

    // 둘레 계산 메서드
    getPerimeter() {
        return 2 * (this.width + this.height);
    }
}

const myRectangle = new Rectangle(10, 5);
console.log(myRectangle.getArea());       // 50
console.log(myRectangle.getPerimeter());  // 30
  • 클래스 내부에 정의된 함수는 메서드이며, 인스턴스에서 호출할 수 있습니다.
  • *this*를 통해 클래스의 속성에 접근하여 동작을 수행합니다.

4. 클래스 상속 (Inheritance)

JavaScript 클래스는 상속을 지원하여, 부모 클래스의 속성과 메서드를 자식 클래스에서 재사용할 수 있습니다. 상속을 통해 코드의 중복을 줄이고, 객체 간 계층 구조를 만들 수 있습니다.

4.1. 클래스 상속 구문

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

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

// Dog 클래스는 Animal 클래스를 상속받음
class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // 부모 클래스의 생성자를 호출
        this.breed = breed;
    }

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

const myDog = new Dog('Rex', 'Golden Retriever');
myDog.speak();  // Rex barks.

4.2. 주요 특징

  • extends 키워드를 사용하여 클래스 상속을 구현합니다.
  • *super()*를 호출하여 부모 클래스의 생성자를 호출하고, 부모 클래스의 초기화를 수행합니다.
  • 메서드 오버라이딩을 통해 부모 클래스의 메서드를 자식 클래스에서 재정의할 수 있습니다.

5. 정적 메서드 (Static Methods)

정적 메서드는 인스턴스가 아닌 클래스 자체에 속하는 메서드로, 인스턴스를 통해 호출되지 않고 클래스 이름을 통해 직접 호출됩니다. 정적 메서드는 주로 유틸리티 함수나 클래스와 관련된 동작을 정의할 때 사용됩니다.

5.1. 정적 메서드 구문

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

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

console.log(MathUtils.add(5, 10));        // 15
console.log(MathUtils.multiply(3, 4));    // 12
  • static 키워드를 사용해 정적 메서드를 정의합니다.
  • 정적 메서드는 클래스 이름을 통해 직접 호출되며, 인스턴스에서 호출할 수 없습니다.

6. 클래스 필드 (Field)와 프로퍼티

클래스 필드는 객체의 속성을 정의하며, 공개 필드와 비공개 필드로 나눌 수 있습니다. 필드는 클래스 내부에서 정의되며, 객체가 생성될 때마다 해당 필드가 초기화됩니다.

6.1. 공개 필드

class Circle {
    radius = 0;  // 공개 필드

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

    getArea() {
        return Math.PI * this.radius ** 2;
    }
}

const myCircle = new Circle(5);
console.log(myCircle.getArea());  // 78.53981633974483
  • 클래스 내부에서 필드를 정의하면 공개 필드가 되며, 객체 외부에서도 접근할 수 있습니다.

6.2. 비공개 필드

비공개 필드는 # 기호로 시작하며, 클래스 외부에서 직접 접근할 수 없습니다. 이를 통해 객체의 캡슐화를 구현할 수 있습니다.

class BankAccount {
    #balance = 0;  // 비공개 필드

    deposit(amount) {
        this.#balance += amount;
    }

    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance());  // 100
console.log(account.#balance);  // SyntaxError: Private field '#balance' must be declared in an enclosing class
  • 비공개 필드는 클래스 내부에서만 접근할 수 있으며, 외부에서 직접 접근하거나 수정할 수 없습니다.

7. 클래스의 캡슐화

  • *캡슐화(Encapsulation)**는 객체의 **상태(속성)**를 외부에서 직접 접근하지 못하게 하고, 메서드를 통해서만 접근할 수 있도록 하는 개념입니다. 이를 통해 객체의 상태 보호와 일관성 유지가 가능합니다.

7.1. 캡슐화 예시

class Employee {
    #salary = 0;  // 비공개 필드

    setSalary(amount) {
        if (amount > 0) {
            this.#salary = amount;
        } else

 {
            console.log('Invalid salary');
        }
    }

    getSalary() {
        return this.#salary;
    }
}

const employee = new Employee();
employee.setSalary(5000);
console.log(employee.getSalary());  // 5000
employee.setSalary(-1000);  // Invalid salary
  • 비공개 필드와 메서드를 통해 객체의 상태를 보호하고 제어할 수 있습니다.

요약

JavaScript 클래스는 **객체 지향 프로그래밍(OOP)**을 쉽게 구현할 수 있는 구조로, 코드의 재사용성과 유지보수성을 높이는 데 유용합니다.

  • class 키워드를 사용해 클래스를 정의하며, 생성자 함수로 객체의 초기 상태를 설정할 수 있습니다.
  • 클래스 내부에서 메서드를 정의하여 객체가 수행할 동작을 지정할 수 있습니다.
  • 상속을 통해 부모 클래스의 속성과 메서드를 자식 클래스에서 재사용할 수 있습니다.
  • 정적 메서드는 인스턴스가 아닌 클래스 자체에 속하며, 클래스 이름으로 직접 호출할 수 있습니다.
  • 캡슐화를 통해 객체의 상태를 보호하고, 비공개 필드를 사용하여 외부 접근을 차단할 수 있습니다.

클래스는 객체 지향 프로그래밍의 핵심 개념을 쉽게 구현할 수 있는 강력한 도구로, 구조적이고 재사용 가능한 코드를 작성하는 데 유용합니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com