JavaScript에서 클래스(class)

송연지·2024년 4월 9일
0

JavaScript에서 클래스(class)는 객체를 생성하기 위한 템플릿입니다. ES6에서 도입된 클래스는 기존의 프로토타입 기반 상속을 보다 명확하고 간단하게 표현할 수 있게 해줍니다. 클래스는 데이터(속성)과 이를 조작하는 코드(메서드)를 하나로 묶는 방법입니다.

클래스(Class)

클래스는 생성자 함수를 사용하는 대신 class 키워드를 사용하여 정의합니다. 생성자 함수 내에서 정의했던 메서드는 클래스 내부에 메서드로 포함됩니다.

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", 30);
person1.greet(); // "Hello, my name is Alice and I am 30 years old."

Getter와 Setter

Getter와 Setter는 클래스 내부의 속성을 보호하기 위해 사용됩니다. 이들은 간접적으로 클래스의 속성에 접근하고 수정할 수 있는 메서드입니다. Getter는 속성값을 읽을 때 호출되며, Setter는 속성값을 설정할 때 호출됩니다.

Getter의 예시

class Person {
  constructor(name) {
    this._name = name; // _name은 private property를 의미하는 관례적 표현
  }

  // Getter
  get name() {
    return this._name.toUpperCase();
  }
}

const person = new Person("Alice");
console.log(person.name); // "ALICE"

Setter의 예시

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

  // Setter
  set name(newName) {
    this._name = newName.trim();
  }
}

const person = new Person("Alice");
person.name = "   Bob   "; // Setter를 통해 이름을 설정할 때 공백 제거
console.log(person.name); // "BOB" - Getter 호출

Getter와 Setter의 특징

  1. 캡슐화와 정보 은닉: 클래스 내부의 상세 구현을 숨기고, 사용자가 객체의 속성에 접근하거나 수정하는 방식을 제어할 수 있습니다.
  2. 유효성 검사: Setter를 사용하면, 속성에 설정되는 값에 대해 유효성 검사를 할 수 있습니다. 이를 통해 객체의 상태를 안정적으로 유지할 수 있습니다.
  3. 사용 편의성: 속성에 접근하거나 설정할 때 메서드 호출이 아닌 속성처럼 접근할 수 있어 사용이 간편합니다.
  4. 호환성: Getter와 Setter를 사용함으로써 객체의 속성을 직접 변경하지 않고도, 내부적인 표현 방식을 변경할 수 있습니다. 이는 코드 변경에 따른 호환성 문제를 최소화합니다.

JavaScript의 클래스, Getter, Setter는 객체 지향 프로그래밍의 핵심 요소 중 하나입니다. 이들을 적절히 활용함으로써, 코드의 안정성, 가독성, 유지보수성을 높일 수 있습니다.

profile
프론트엔드 개발쟈!!

0개의 댓글