[Javascript]자바스크립트 Getter, Setter, Static 완벽 가이드: 개념과 활용 예제

자바스크립트에서 Getter와 Setter는 객체의 프로퍼티를 제어하는 메서드입니다. 자바스크립트 Static 키워드는 클래스 레벨에서 메서드와 프로퍼티를 정의하는 데 사용됩니다. 이 글에서는 이러한 개념들을 자세히 알아보고, 어떻게 활용할 수 있는지 설명합니다.

≣ 목차

• Getter와 Setter의 기본 개념📚
• Getter와 Setter 사용법📝
• Getter와 Setter의 실제 활용 예제💡
• Static 키워드의 개념과 사용법🧩
• Static 메서드와 프로퍼티의 실제 활용 예제🚀
• Getter, Setter, Static을 사용할 때 주의할 점⚠️

Getter와 setter 그리고 static 멤버는 모두 클래스와 깊은 연관이 있습니다. 이들은 객체지향 프로그래밍에서 클래스의 기능을 확장하고 제어하는 데 중요한 역할을 합니다. 클래스에 대한 추가 정보는 아래 포스팅에서 확인하실 수 있습니다.😁

[자바스크립트]자바스크립트 클래스 이해하기

---

01. Getter와 Setter의 기본 개념📚

Getter란?

Getter는 객체의 프로퍼티 값을 반환하는 메서드입니다. 프로퍼티를 직접 접근하는 대신, Getter를 통해 값을 가져올 수 있습니다. Getter를 정의할 때는 get 키워드를 사용합니다.

Setter란?

Setter는 객체의 프로퍼티 값을 설정하는 메서드입니다. 프로퍼티에 새로운 값을 할당할 때 Setter를 사용하여 추가적인 검증이나 로직을 포함할 수 있습니다. Setter를 정의할 때는 set 키워드를 사용합니다.

---

02. Getter와 Setter 사용법📝

자바스크립트에서 Getter와 Setter는 객체의 프로퍼티에 접근하고 값을 설정하는 메서드입니다. 이를 통해 객체의 내부 데이터를 안전하게 관리하고, 외부 접근을 제어할 수 있습니다. ES2019에서 도입된 # 표기법을 사용하여 프라이빗 필드를 정의하고, 이를 Getter와 Setter로 제어하는 방법을 예제로 설명하겠습니다.

기본 사용법

1. 프라이빗 필드 선언 및 초기화

프라이빗 필드는 클래스 내부에서만 접근할 수 있으며, # 표기법을 사용하여 선언합니다.

class Person {
  #name; // 프라이빗 필드를 선언합니다.

  constructor(name) {
    this.#name = name; // 생성자에서 프라이빗 필드를 초기화합니다.
  }

---

2. Getter 정의

Getter는 get 키워드를 사용하여 정의하며, 프라이빗 필드의 값을 반환합니다.

  // Getter 메서드
  get name() {
    return this.#name; // 프라이빗 필드의 값을 반환합니다.
  }

---

3. Setter 정의

Setter는 set 키워드를 사용하여 정의하며, 프라이빗 필드의 값을 설정할 때 호출됩니다. Setter에서는 값을 검증하거나 추가적인 로직을 포함할 수 있습니다.

  // Setter 메서드
  set name(newName) {
    if (newName) { // newName이 빈 값이 아닌지 확인합니다.
      this.#name = newName; // 프라이빗 필드의 값을 새로운 값으로 설정합니다.
    } else {
      console.log('이름은 빈 값일 수 없습니다.'); // newName이 빈 값이면 경고 메시지를 출력합니다.
    }
  }
}

---

4. 객체 생성 및 Getter와 Setter 호출

객체를 생성한 후, Getter와 Setter를 사용하여 프라이빗 필드에 접근하고 값을 설정할 수 있습니다.

const person = new Person('Alice'); // 새로운 Person 객체를 생성하고 name을 'Alice'로 초기화합니다.
console.log(person.name); // Getter 호출: 'Alice'를 출력합니다.
person.name = 'Bob'; // Setter 호출: #name의 값을 'Bob'으로 변경합니다.
console.log(person.name); // Getter 호출: 'Bob'을 출력합니다.
person.name = ''; // Setter 호출: '이름은 빈 값일 수 없습니다.' 메시지를 출력합니다.
console.log(person.name); // Getter 호출: #name의 값이 여전히 'Bob'임을 확인할 수 있습니다.

---

03. Getter와 Setter의 실제 활용 예제💡

자바스크립트의 Getter와 Setter는 객체의 프로퍼티에 접근하고 설정하는 데 유용한 메서드입니다. 이 메서드들을 사용하면 프로퍼티 값을 읽거나 쓸 때 추가적인 로직을 적용할 수 있습니다. 실제 활용 예제를 통해 Getter와 Setter의 유용성을 살펴보겠습니다.

예제 1: 사용자 입력 검증

사용자 클래스에서 이메일 주소를 검증하는 Getter와 Setter

class User {
  #email; // 프라이빗 필드를 선언합니다.

  constructor(email) {
    this.#email = email;
  }

  // Getter 메서드
  get email() {
    return this.#email;
  }

  // Setter 메서드
  set email(newEmail) {
    if (this.validateEmail(newEmail)) {
      this.#email = newEmail;
    } else {
      console.log('Invalid email format');
    }
  }

  validateEmail(email) {
    return /\S+@\S+\.\S+/.test(email); // 이메일 형식을 검증하는 간단한 정규 표현식
  }
}

const user = new User('test@example.com');
console.log(user.email); // Getter 호출: 'test@example.com'
user.email = 'invalid-email'; // Setter 호출: 'Invalid email format'
console.log(user.email); // Getter 호출: 'test@example.com'
user.email = 'new@example.com'; // Setter 호출: 유효한 이메일 형식
console.log(user.email); // Getter 호출: 'new@example.com'

이 예제에서는 이메일 주소를 검증하는 로직이 Setter에 포함되어 있습니다. 잘못된 형식의 이메일 주소를 설정하려고 하면 경고 메시지가 출력되고, 기존 이메일 주소는 변경되지 않습니다.

---

예제 2: 제품 가격 관리

제품 클래스에서 가격을 검증하는 Getter와 Setter

class Product {
  #price; // 프라이빗 필드를 선언합니다.

  constructor(price) {
    this.#price = price;
  }

  // Getter 메서드
  get price() {
    return this.#price;
  }

  // Setter 메서드
  set price(newPrice) {
    if (newPrice > 0) {
      this.#price = newPrice;
    } else {
      console.log('Price must be a positive number');
    }
  }
}

const product = new Product(100);
console.log(product.price); // Getter 호출: 100
product.price = -50; // Setter 호출: 'Price must be a positive number'
console.log(product.price); // Getter 호출: 100
product.price = 150; // Setter 호출: 유효한 가격
console.log(product.price); // Getter 호출: 150

이 예제에서는 가격이 0보다 큰지 검증하는 로직이 Setter에 포함되어 있습니다. 유효하지 않은 가격을 설정하려고 하면 경고 메시지가 출력되고, 기존 가격은 변경되지 않습니다.

---

예제 3: 학생 점수 관리

학생 클래스에서 점수를 관리하는 Getter와 Setter

class Student {
  #score; // 프라이빗 필드를 선언합니다.

  constructor(score) {
    this.#score = score;
  }

  // Getter 메서드
  get score() {
    return this.#score;
  }

  // Setter 메서드
  set score(newScore) {
    if (newScore >= 0 && newScore <= 100) {
      this.#score = newScore;
    } else {
      console.log('Score must be between 0 and 100');
    }
  }
}

const student = new Student(85);
console.log(student.score); // Getter 호출: 85
student.score = 150; // Setter 호출: 'Score must be between 0 and 100'
console.log(student.score); // Getter 호출: 85
student.score = 95; // Setter 호출: 유효한 점수
console.log(student.score); // Getter 호출: 95

이 예제에서는 점수가 0과 100 사이인지 검증하는 로직이 Setter에 포함되어 있습니다. 유효하지 않은 점수를 설정하려고 하면 경고 메시지가 출력되고, 기존 점수는 변경되지 않습니다.

---

04. Static 키워드의 개념과 사용법🧩

자바스크립트의 static 키워드는 클래스의 인스턴스가 아닌 클래스 자체에 속하는 메서드와 프로퍼티를 정의할 때 사용됩니다. Static 메서드와 프로퍼티는 클래스의 특정 인스턴스가 아닌 클래스 자체에 묶여 있으므로, 클래스 이름을 통해 직접 호출할 수 있습니다.

Static 키워드의 개념

• Static 메서드와 프로퍼티는 클래스의 인스턴스가 아닌 클래스 자체에 속합니다.
• 클래스의 인스턴스를 생성하지 않고도 호출할 수 있습니다.
• Static 메서드와 프로퍼티는 일반적으로 유틸리티 함수나 상수 값을 정의할 때 유용합니다.

---

Static 메서드 정의

Static 메서드는 static 키워드를 사용하여 정의합니다.

class Calculator {
  // Static 메서드 정의
  static add(a, b) {
    return a + b;
  }

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

console.log(Calculator.add(5, 3)); // 8
console.log(Calculator.multiply(5, 3)); // 15

위 코드에서 add와 multiply 메서드는 Calculator 클래스의 인스턴스가 아닌 클래스 자체에 속합니다. 따라서 Calculator 클래스 이름을 사용하여 직접 호출할 수 있습니다.

---

Static 프로퍼티 정의

Static 프로퍼티도 static 키워드를 사용하여 정의합니다.

class Configuration {
  // Static 프로퍼티 정의
  static apiUrl = 'https://api.example.com';

  static getApiUrl() {
    return Configuration.apiUrl;
  }
}

console.log(Configuration.apiUrl); // 'https://api.example.com'
console.log(Configuration.getApiUrl()); // 'https://api.example.com'

위 코드에서 apiUrl은 Configuration 클래스의 static 프로퍼티로, 클래스 이름을 통해 직접 접근할 수 있습니다.

---

05. Static 메서드와 프로퍼티의 실제 활용 예제🚀

자바스크립트의 static 메서드와 프로퍼티는 클래스 자체에 속하며 인스턴스화된 객체가 아닌 클래스 자체에 직접적으로 접근할 수 있는 기능을 제공합니다. 이러한 static 메서드와 프로퍼티는 다음과 같은 실제적인 활용 예제들이 있습니다.

1. 유틸리티 함수로서의 활용

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

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

// 인스턴스화 없이 클래스 이름을 통해 호출 가능
console.log(MathUtil.multiply(5, 10)); // 50
console.log(MathUtil.add(3, 7)); // 10

위 예제에서 MathUtil 클래스는 수학 관련 유틸리티 함수를 제공합니다. multiply와 add 메서드는 인스턴스화된 객체가 아니라 클래스 자체에 속해 있으므로, MathUtil.multiply와 MathUtil.add를 통해 직접 호출할 수 있습니다.

---

2. 팩토리 메서드로서의 활용

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

  static createCar(make, model) {
    return new Car(make, model);
  }
}

let myCar = Car.createCar('Toyota', 'Corolla');
console.log(myCar); // Car { make: 'Toyota', model: 'Corolla' }

위 예제에서 Car 클래스는 createCar라는 static 메서드를 통해 인스턴스를 생성하는 팩토리 메서드를 제공합니다. 이는 객체 생성 시에 복잡한 로직이나 초기화 과정을 감추고 간단히 인스턴스를 생성할 수 있도록 돕습니다.

---

3. 데이터 관리와 연동을 위한 유틸리티 프로퍼티

class API {
  static baseUrl = 'https://api.example.com';

  static fetchData(endpoint) {
    return fetch(`${API.baseUrl}/${endpoint}`)
      .then(response => response.json())
      .catch(error => console.error('Error fetching data:', error));
  }
}

// 예제에서는 fetch API를 사용하지만, 실제 API 주소와 연동되지는 않습니다.
API.fetchData('users')
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 예제에서 API 클래스는 API와 통신할 때 사용할 기본 URL을 static 프로퍼티로 정의하고 있습니다. fetchData 메서드는 이 baseUrl을 기반으로 데이터를 가져오는 메서드입니다. 이러한 방식으로 static 프로퍼티는 클래스 전역에서 공유되며, 클래스에 관련된 여러 메서드에서 활용될 수 있습니다.

---

06. Getter, Setter, Static을 사용할 때 주의할 점⚠️

JavaScript에서 Getter, Setter, 그리고 Static을 사용할 때 몇 가지 주의할 점이 있습니다.

Getter와 Setter 사용 시

• 무한루프에 주의: Getter나 Setter 내에서 동일한 프로퍼티에 접근하게 되면 무한루프가 발생할 수 있습니다. 이는 프로퍼티 값을 읽거나 설정할 때마다 Getter나 Setter가 반복해서 호출되는 문제를 초래할 수 있습니다. 이를 방지하기 위해 Getter와 Setter 내에서 다른 프로퍼티를 사용하거나 직접 값을 저장하는 방법 등을 고려해야 합니다.
  
  
• 부수효과에 주의: Getter와 Setter는 보통 계산된 값을 반환하거나 다른 데이터를 변경할 수 있는 기능을 수행합니다. 이 때 다른 부수효과가 발생하지 않도록 주의해야 합니다. 예를 들어, Setter에서 다른 객체의 상태를 변경하거나 외부 리소스에 영향을 주는 작업을 수행하지 않는 것이 좋습니다.

---

Static 사용 시

• 인스턴스 프로퍼티에 접근 불가: Static 메서드나 프로퍼티는 클래스 자체에 속하므로 인스턴스화된 객체에서는 직접 접근할 수 없습니다. 따라서 Static 메서드 내에서는 this를 사용하여 인스턴스 프로퍼티나 메서드에 접근할 수 없습니다.
  
  
• 상속과 함께 사용 시 주의: 상속된 클래스에서 Static 메서드를 오버라이드할 수는 있지만, 일반적으로 인스턴스 메서드처럼 동작하지 않으며, 부모 클래스의 Static 메서드에 접근하려면 super를 사용해야 합니다. 이를 이해하고 적절히 사용해야 합니다.

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

  // Getter
  get area() {
    return this._width * this._height;
  }

  // Setter
  set dimensions({ width, height }) {
    if (width > 0 && height > 0) {
      this._width = width;
      this._height = height;
    } else {
      throw new Error('Width and height must be positive numbers');
    }
  }

  // Static method
  static isEqual(rect1, rect2) {
    return rect1._width === rect2._width && rect1._height === rect2._height;
  }
}

// 사용 예시
let rect1 = new Rectangle(10, 5);
let rect2 = new Rectangle(5, 10);

console.log(rect1.area); // 50

rect1.dimensions = { width: 20, height: 10 };
console.log(rect1.area); // 200

console.log(Rectangle.isEqual(rect1, rect2)); // false

이 예제에서는 Getter와 Setter를 사용하여 직사각형의 면적을 계산하고, Static 메서드를 사용하여 두 개의 직사각형이 같은지 비교하는 방법을 보여줍니다. 주의사항을 잘 이해하고 적절히 사용하면 JavaScript의 클래스에서 더욱 효율적이고 안전한 코드를 작성할 수 있습니다.