JavaScript Class

용어 정리

인스턴스

• 클래스를 통해 만들어진 객체

// 자동차 클래스 정의
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  drive() {
    console.log("The car is driving.");
  }
}

// Car 클래스를 사용하여 인스턴스 생성
const myCar = new Car("Toyota", "Camry");
const yourCar = new Car("Honda", "Accord");

// myCar와 yourCar는 Car 클래스의 인스턴스이다.

캡슐화

• 외부로 노출해야 하는 값과 내부에서만 사용하는 값을 구분하는 기능
• 외부에서 내부 데이터에 바로 접근을 하지 못하게 하고 필요한 메소드만 열어두는 특성

// ES6 이후에는 클래스 내에서 #을 사용하여 private 필드를 정의할 수 있다.
// (ts에서는 private 키워드 사용 가능)
// private 필드는 클래스 외부에서 직접 접근할 수 없으므로 정보 은닉을 달성

class Car {
  #make;   // 제조사 (private 필드)
  #model;  // 모델 (private 필드)
  #year;   // 연도 (private 필드)
  #speed;  // 현재 속도 (private 필드)

  constructor(make, model, year) {
    this.#make = make;
    this.#model = model;
    this.#year = year;
    this.#speed = 0;
  }

  // 속도를 증가시키는 메서드
  accelerate(amount) {
    this.#speed += amount;
  }

  // 속도를 감소시키는 메서드
  brake(amount) {
    this.#speed -= amount;
  }

  // 현재 속도를 반환하는 메서드
  getSpeed() {
    return this.#speed;
  }

  // 제조사를 반환하는 메서드
  getMake() {
    return this.#make;
  }

  // 모델을 반환하는 메서드
  getModel() {
    return this.#model;
  }

  // 연도를 반환하는 메서드
  getYear() {
    return this.#year;
  }
}

// Car 클래스의 사용 예시
const myCar = new Car("Toyota", "Camry", 2022);

// 속도를 증가시킴
myCar.accelerate(20);

// 현재 속도를 출력
console.log("Current Speed:", myCar.getSpeed());

// 모델을 출력
console.log("Car Model:", myCar.getModel());

// private 필드는 클래스 외부에서 접근할 수 없으므로 직접적인 변경을 막을 수 있다.
// myCar.#make = "Honda";  // 이 코드는 에러를 발생시킨다.

클래스 변수와 인스턴스 변수

정의

클래스 변수 (정적 변수)

• 클래스 자체에 속하는 변수
• 모든 인스턴스가 공유하는 공통된 값을 저장하며, 클래스명을 통해 직접 접근하고, static 키워드를 사용하여 선언

인스턴스 변수

• 각 인스턴스마다 개별적으로 존재하는 변수
• 인스턴스의 고유한 특성을 나타내는 값을 저장하며, this 키워드를 사용하여 접근

특징

클래스 변수

• 모든 인스턴스가 공유하기 때문에 메모리 효율성을 높인다.
• 값 변경 시 모든 인스턴스에 영향을 미친다.
• 클래스 초기화 시 자동으로 초기화
• static 키워드를 사용하여 선언

인스턴스 변수

• 각 인스턴스마다 독립적으로 값을 가질 수 있다.
• 특정 인스턴스의 고유한 정보를 저장하는 데 유용
• this 키워드를 사용하여 접근
• 인스턴스 생성 시 자동으로 초기화

예시 코드

클래스 변수

class Person {
  static count = 0; // 클래스 변수 선언

  constructor(name) {
    this.name = name;
    Person.count++; // 클래스 변수 접근 및 변경
  }
}

console.log(Person.count); // 0

const p1 = new Person('Alice');
console.log(Person.count); // 1

const p2 = new Person('Bob');
console.log(Person.count); // 2

인스턴스 변수

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

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

const p1 = new Person('Alice', 30);
console.log(p1.getName()); // Alice
console.log(p1.getAge()); // 30

const p2 = new Person('Bob', 25);
console.log(p2.getName()); // Bob
console.log(p2.getAge()); // 25

접근 제한자

static

정의

• 클래스 자체에 속하는 변수와 메서드를 선언할 때 사용

특징

• 모든 인스턴스가 공유하는 공통 데이터 및 함수
• 클래스명을 통해 직접 접근
• 인스턴스 생성 없이도 사용 가능
• 메모리 효율성을 높이고 코드 간결성을 유지하는 데 도움된다.

public

정의

• 클래스 외부에서 자유롭게 접근하고 사용할 수 있는 속성과 메서드를 선언할 때 사용

특징

• 객체 인스턴스를 통해 직접 접근하거나 변경할 수 있다.
• 다른 클래스에서도 자유롭게 사용 가능
• 코드 작성 시 편리하지만, 데이터 유출이나 의도치 않은 변경 가능성이 높다.

private

정의

• 클래스 내부에서만 접근하고 사용할 수 있는 속성과 메서드를 선언할 때 사용

특징

• 클래스 외부에서 직접 접근하거나 변경할 수 없다.
• 데이터 캡슐화를 통해 정보 은닉과 보안을 강화할 수 있습니다.
• 코드 복잡성을 증가시킬 수 있으며, 테스트하기 어려울 수 있다.

예시 코드

JavaScript

class Foo {
  x = 1;            // Field declaration
  #p = 0;           // Private field
  static y = 20;    // Static public field
  static #sp = 30;  // Static private field

  bar() {
    this.#p = 10; // private 필드 참조
    // this.p = 10; // 새로운 public p 필드를 동적 추가한다.
    return this.#p;
  }
}

const foo = new Foo();
console.log(foo); // Foo {#p: 10, x: 1}

console.log(foo.x); // 1
// console.log(foo.#p); // SyntaxError: Undefined private field #p: must be declared in an enclosing class
console.log(Foo.y); // 20
// console.log(Foo.#sp); // SyntaxError: Undefined private field #sp: must be declared in an enclosing class
console.log(foo.bar()); // 10

TypeScript

class Foo {
  public x = 1; // Field declaration
  private p = 0; // Private field
  public static y = 20; // Static public field
  private static sp = 30; // Static private field

  bar() {
    this.p = 10; // private 필드 참조
    // this.x = 10; // 새로운 public x 필드를 동적 추가한다.
    return this.p;
  }
}

const foo = new Foo();
console.log(foo); // Foo {p: 10, x: 1}

console.log(foo.x); // 1
// console.log(foo.p); // SyntaxError: Undefined private field p: must be declared in an enclosing class
console.log(Foo.y); // 20
// console.log(Foo.sp); // SyntaxError: Undefined private field sp: must be declared in an enclosing class
console.log(foo.bar()); // 10