JS 기술면접 4-3. Class 문법

26. Class 문법의 주요 개념(클래스, 인스턴스, getter, setter, 상속, static method ) 설명.

JavaScript에서의 클래스 문법은 객체지향 프로그래밍(OOP)을 지원하기 위해 도입된 문법입니다. ES6(ECMAScript 2015)부터 제공되며, 객체 생성 및 관리가 더 직관적이고 명확하게 표현됩니다. 주요 개념은 다음과 같습니다.

1. 클래스 (Class)
   클래스는 객체를 생성하기 위한 청사진입니다. class 키워드를 사용해 정의하며, 클래스 내부에 속성과 메서드를 정의할 수 있습니다.

예시
javascript
코드 복사
class Person {
  constructor(name, age) {
    this.name = name; // 속성 정의
    this.age = age;
  }

  greet() { // 메서드 정의
    console.log(`Hello, my name is ${this.name}`);
  }
}

2. 인스턴스 (Instance)
   클래스의 청사진을 기반으로 생성된 객체를 인스턴스라고 합니다. new 키워드를 사용해 인스턴스를 생성합니다.

예시
javascript
코드 복사
const person1 = new Person("Alice", 25);
person1.greet(); // Hello, my name is Alice

3. 생성자 (Constructor)
   클래스 내 constructor 메서드는 객체가 생성될 때 호출됩니다. 생성자는 객체의 초기 속성을 설정하는 데 사용됩니다.

예시
javascript
코드 복사
class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
}

const myCar = new Car("Toyota", "Corolla");
console.log(myCar.brand); // Toyota

4. Getter와 Setter
   클래스 속성에 안전하게 접근하거나 수정할 수 있도록 get과 set 키워드를 사용해 정의합니다.

예시
javascript
코드 복사
class Account {
  constructor(balance) {
    this._balance = balance; // private-like 변수
  }

  get balance() { // Getter
    return this._balance;
  }

  set balance(value) { // Setter
    if (value < 0) {
      throw new Error("Balance cannot be negative");
    }
    this._balance = value;
  }
}

const account = new Account(1000);
console.log(account.balance); // 1000
account.balance = 500; // Setter 호출
console.log(account.balance); // 500

5. 상속 (Inheritance)
   한 클래스가 다른 클래스의 속성과 메서드를 상속받을 수 있습니다. 이를 통해 코드의 재사용성을 높일 수 있습니다. extends 키워드를 사용해 상속을 구현합니다.

예시
javascript
코드 복사
class Animal {
  speak() {
    console.log("Animal speaks");
  }
}

class Dog extends Animal { // Animal을 상속
  speak() {
    console.log("Woof!");
  }
}

const dog = new Dog();
dog.speak(); // Woof!

6. 정적 메서드 (Static Method)
   정적 메서드는 클래스 자체에서 호출할 수 있는 메서드로, 인스턴스와는 독립적으로 동작합니다. static 키워드로 정의됩니다.

예시
javascript
코드 복사
class MathOperations {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathOperations.add(5, 3)); // 8

7. 공개 및 비공개 필드 (Public and Private Fields)
   클래스 속성을 공개(public)하거나 비공개(private)로 선언할 수 있습니다. 비공개 속성은 #을 접두어로 사용해 정의합니다.

예시
javascript
코드 복사
class Employee {
  #salary; // Private field

  constructor(name, salary) {
    this.name = name;
    this.#salary = salary;
  }

  getSalary() {
    return this.#salary; // Private field 접근
  }
}

const emp = new Employee("Bob", 50000);
console.log(emp.getSalary()); // 50000
// console.log(emp.#salary); // 에러: Private field는 외부에서 접근 불가

8. 클래스 필드
   클래스 내부에서 필드를 선언할 수 있습니다. 최신 문법에서는 클래스 외부에서도 쉽게 설정할 수 있습니다.

예시
javascript
코드 복사
class User {
  name = "Default"; // 클래스 필드

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

const user = new User();
user.greet(); // Hello, Default

9. 다형성 (Polymorphism)
   다형성은 동일한 메서드 이름이 서로 다른 클래스에서 다르게 동작할 수 있게 하는 객체지향 원칙입니다.

예시
javascript
코드 복사
class Shape {
  draw() {
    console.log("Drawing a shape");
  }
}

class Circle extends Shape {
  draw() {
    console.log("Drawing a circle");
  }
}

class Square extends Shape {
  draw() {
    console.log("Drawing a square");
  }
}

const shapes = [new Shape(), new Circle(), new Square()];
shapes.forEach(shape => shape.draw());
// Output:
// Drawing a shape
// Drawing a circle
// Drawing a square

10. Super 키워드
    super 키워드는 부모 클래스의 생성자나 메서드를 호출할 때 사용됩니다.

예시
javascript
코드 복사
class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello from ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 부모 생성자 호출
    this.age = age;
  }

  greet() {
    super.greet(); // 부모 메서드 호출
    console.log(`I am ${this.age} years old`);
  }
}

const child = new Child("Alice", 10);
child.greet();
// Output:
// Hello from Alice
// I am 10 years old

이 모든 개념은 JavaScript에서 객체지향 프로그래밍(OOP)을 구현하는 데 사용되며, 재사용성, 유지보수성, 코드 가독성을 높이는 데 유용합니다.