[JS] Class(클래스) / Private Class Fields

📌 Class

: 객체를 생성하기 위한 템플릿

• 객체 = 붕어빵, 클래스 = 붕어빵 기계
• 클래스(class)를 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있다.

• 인스턴스(instance): 클래스를 통해 생성된 객체
• 메서드(method): 클래스 내에 정의된 함수
• this: 자기 스스로의 객체

 

 

✅ 생성

class 클래스명 {
  constructor() { ... }
  method1() { ... }
  method2() { ... }
}

• 클래스명은 항상 대문자로 시작한다. 

 

 

⏩ 생성자 메서드 constructor( )

: class의 인스턴스 객체를 생성하고 초기화하는 메서드

• class에서 필요한 기초 정보를 세팅하는 곳
  - 전달 받은 인수를 매개 변수로 받는다.
• 객체를 new로 생성할 때 가장 먼저 자동으로 호출된다.
• 생성자 메서드를 따로 정의하지 않으면 기본 생성자가 자동으로 생성된다.
  ➡ 함수 본문이 비워진 채로 만들어진다. 

 

 

 

 

✅ 호출

new 클래스명(매개변수)

• new 키워드를 통해 클래스 호출
  
  • 클래스 내부에서 정의한 메서드가 들어 있는 객체가 생성된다. 
  • 넘겨받은 인수와 함께 constructor()가 자동으로 실행된다. 

 

순수 함수 

function User(name) {
  this.name = name;
}

User.prototype.sayHi = function() {
  alert(this.name);
};

// 사용
let user = new User("John");
user.sayHi();

 

 

class 사용

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

  sayHi() {
    alert(this.name);
  }
}

// 사용
let user = new User("John");
user.sayHi();

 

 

 

 

✅ 상속

 

⏩ extends

: 자식 클래스가 부모 클래스를 상속받을 때 사용

class ChildClass extends ParentClass {
  // 자식 클래스 정의
}

 

// 부모 클래스 정의
class Animal {
  constructor(name) {
    this.name = name;
  }

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

// 자식 클래스 정의
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 부모 클래스의 constructor 호출
    this.breed = breed;
  }

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

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 'Buddy barks.'

 

 

 

 

⏩ super

: 자식 클래스에서 부모 클래스의 메서드나 생성자를 호출할 때 사용

• 자식 클래스는 부모 클래스의 메서드를 재정의(overriding)할 수 있다
  👉 이 때 super를 사용하여 부모 클래스의 메서드를 호출

 

생성자에서 super 사용

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

class Child extends Parent {
  constructor(name, age) {
    super(name); // 부모 클래스의 constructor 호출
    this.age = age;
  }
}

 

 

 

메서드에서 super 사용

class Parent {
  greet() {
    console.log('Hello from Parent!');
  }
}

class Child extends Parent {
  greet() {
    super.greet(); // 부모 클래스의 greet 메서드 호출
    console.log('Hello from Child!');
  }
}

const child = new Child();
child.greet();
// 'Hello from Parent!'
// 'Hello from Child!'

 

 

---

📌 Private Class Fields

: 클래스 내부의 속성을 비공식적으로 비공개 상태로 정의

• 클래스 인스턴스의 속성이나 메서드를 비공식적으로 숨기기 위해 사용
• 클래스의 내부 상태를 보호하고, 클래스 외부에서 접근하지 못하도록 하는데 사용
  - 내부 인터페이스와 외부 인터페이스를 구분 짓는다.

• public
  • 어디서든지 접근할 수 있음
  • 외부 인터페이스 구성
• private
  
  • 클래스 안에서만 접근
  • 내부 인터페이스 구성
• protected
  
  • 클래스 자신과 자손 클래스에서만 접근 허용
  • 내부 인터페이스 구성

 

 

✨ 객체 지향 프로그래밍의 프로퍼티와 메서드

• 내부 인터페이스(internal interface)
  : 동일한 클래스 내의 다른 메서드에선 접근할 수 있지만, 클래스 밖에선 접근할 수 없는 프로퍼티와 메서드
  
  
• 외부 인터페이스(external interface)
  : 클래스 밖에서도 접근 가능한 프로퍼티와 메서드

 

 

 

✅ private

_프로퍼티명

• 클래스 안에서만 접근

class Animal {
  // Protected 필드를 시뮬레이션
  _name;

  constructor(name) {
    this._name = name; // Protected 필드 초기화
  }

  // Protected 필드 접근 메서드
  getName() {
    return this._name;
  }

  setName(newName) {
    this._name = newName;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 부모 클래스의 constructor 호출
    this._breed = breed; // Protected 필드 추가
  }

  getBreed() {
    return this._breed;
  }

  // Protected 필드에 접근
  describe() {
    return `${this.getName()} is a ${this._breed}`;
  }
}

const dog = new Dog('Rover', 'Labrador');
console.log(dog.describe()); // 'Rover is a Labrador'
console.log(dog.getName()); // 'Rover'
console.log(dog.getBreed()); // 'Labrador'

 

 

 

 

✅ protected

#프로퍼티명

• 클래스 자신과 자손 클래스에서만 접근 허용

class Person {
  // 비공식 비공개 필드 선언
  #name;

  constructor(name) {
    this.#name = name; // 비공식 비공개 필드 초기화
  }

  // 비공식 비공식 필드 접근 메서드
  getName() {
    return this.#name;
  }

  setName(newName) {
    this.#name = newName;
  }
}

const person = new Person('Alice');
console.log(person.getName()); // 'Alice'
person.setName('Bob');
console.log(person.getName()); // 'Bob'

// 외부에서 비공식 비공개 필드 접근 시도
console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

 

---

 

클래스와 기본 문법

 

Classes in JavaScript - Web 개발 학습하기 | MDN

 

constructor - JavaScript | MDN

 

super - JavaScript | MDN

 

private, protected 프로퍼티와 메서드