JAN's History

자바스크립트의 Getter와 Setter 본문

Javascript

자바스크립트의 Getter와 Setter

JANNNNNN 2024. 10. 9. 21:04

자바스크립트에서 객체(Object)를 다루다 보면 데이터를 더 효율적으로 제어하고 관리하기 위해 gettersetter를 사용하는 경우가 있습니다. 지금부터 이 개념들이 왜 등장했는지, 그리고 어떻게 활용하는지 예시와 함께 알아보겠습니다!


🏷 1. Getter와 Setter란?

  • Getter: 객체의 프로퍼티(속성)를 가져오는 역할을 합니다. 이때, 데이터를 단순히 반환할 뿐만 아니라 가공하거나 숨기고 싶은 정보에 접근하도록 할 때 사용됩니다.
  • Setter: 객체의 프로퍼티를 설정하는 역할을 합니다. 값을 검증하거나 일부 조건에 따라 프로퍼티를 변경하고 싶을 때 사용됩니다.

간단히 말해, gettersetter는 객체의 속성을 더 유연하고 안전하게 다룰 수 있도록 도와줍니다.

🎯 2. 왜 Getter와 Setter가 필요한가?

객체는 여러 속성을 가질 수 있지만, 모든 속성이 외부에서 자유롭게 수정되도록 하는 것은 때로 위험할 수 있습니다. 예를 들어, 강아지의 나이와 같은 속성은 숫자여야 하는데 실수로 문자열이나 다른 값이 할당되면 문제가 생길 수 있겠죠? 여기서 getter와 setter를 사용해 이러한 위험을 줄일 수 있습니다.


📝 예시 코드: Getter와 Setter

1) 기본 예시

class Dog {
  constructor(type, size) {
    this.type = type;
    this.size = size;
  }

  // Getter
  get typeAndSize() {
    return `${this.type}-${this.size}`;
  }

  // Setter
  set setType(type) {
    this.type = type;
  }
}

const pome = new Dog('포메라니안', 'small');
console.log(pome.typeAndSize); // "포메라니안-small"

pome.setType = '말티즈'; 
console.log(pome.typeAndSize); // "말티즈-small"

📌 설명

  1. Getter: get typeAndSize 메서드는 type과 size를 가공해 문자열로 반환합니다. 이렇게 하면 객체의 데이터를 간단히 가져올 때 데이터를 가공하여 반환할 수 있습니다.
  2. Setter: set setType 메서드는 객체의 type 속성을 새로운 값으로 변경할 때 사용됩니다.

⭐ 중요: Getter와 Setter의 특징

  • Getter는 함수를 호출할 때 괄호(())를 사용하지 않습니다. 일반 속성처럼 사용합니다. (함수가 아니기 때문)
  • Setter는 객체의 속성을 설정할 때 호출되며, 보통 객체를 더 안전하게 관리하기 위해 사용합니다.
  • Setter는 정의된 값을 수정할 수 있기 때문에 가급적 사용하지 않는 것이 좋습니다.

🎯 3. 프라이빗 속성과 Getter/Setter 활용

자바스크립트에서는 객체의 특정 속성을 프라이빗(Private)하게 만들어 외부에서 직접 접근하지 못하게 하는 방법이 있습니다. 이때, getter를 사용해 외부에서 이 값을 안전하게 가져올 수 있습니다. 반대로, setter를 통해 값을 검증하고 설정할 수 있습니다.

📝 예시 코드: 프라이빗 속성과 Getter/Setter

class Dog2 {
  #type; // 프라이빗 값 생성
  size;
  
  constructor(type, size) {
    this.#type = type;
    this.size = size;
  }

  // Getter
  get type() {
    return this.#type; // 프라이빗 값은 getter로만 접근 가능
  }

  // Setter
  set type(type) {
    this.#type = type;
  }
}

const retriever = new Dog2('골든리트리버', 'Big');
console.log(retriever.type); // "골든리트리버"

retriever.type = '보더콜리';
console.log(retriever.type); // "보더콜리"

📌 설명

  • #type과 같이 #을 사용하면 해당 속성은 프라이빗 속성이 되어 외부에서 직접 접근할 수 없습니다.
  • Getter를 통해서만 프라이빗 속성에 접근이 가능합니다.
  • Setter를 사용해 값을 설정할 수 있지만, 이는 주로 데이터 검증이나 특별한 작업이 필요할 때 사용됩니다.

⭐ 중요: 프라이빗 속성과 Getter/Setter의 특징

  • 프라이빗 속성은 외부에서 직접 변경할 수 없으므로 데이터 보호에 도움이 됩니다.
  • Getter와 Setter를 통해 안전하게 속성에 접근하고 수정할 수 있습니다.
  • 단, 프라이빗 속성(#type)은 IE(인터넷 익스플로러)에서는 지원되지 않습니다.

🎯 4. Getter와 Setter를 왜 알아야 할까요?

  • 데이터 가공: 객체의 속성을 가져올 때 바로 가공해서 사용하고 싶을 때 유용합니다. 예를 들어, 속성들을 조합해 새로운 문자열을 만들 수 있습니다.
  • 데이터 보호: 객체의 속성을 외부에서 함부로 수정할 수 없도록 보호합니다. 예를 들어, 사용자의 비밀번호를 직접 변경하는 것이 아닌 setter를 통해 검증 후 변경할 수 있습니다.
  • 읽기 전용 속성: Getter를 사용하면 속성을 읽기 전용으로 만들 수 있습니다. 즉, 외부에서 변경하지 못하도록 보호할 수 있습니다.

📌 결론

GetterSetter는 객체의 속성을 더 안전하고 효율적으로 다룰 수 있도록 도와줍니다. 특히 프라이빗 속성과 결합하여 객체의 내부 데이터를 보호하고 안전하게 조작할 수 있습니다.


⭐ 중요: Getter와 Setter 사용 시 주의점

  • Getter와 Setter는 데이터에 접근하거나 수정할 때 특별한 로직이 필요할 경우에만 사용해야 합니다.
  • 남용하면 코드가 복잡해질 수 있으므로 필요한 경우에만 활용하세요.
  • 프라이빗 속성을 사용할 때는 브라우저 호환성(특히 IE)도 고려해야 합니다. (참고로 필자는 그래서 사용하지 않음)

이제 여러분도 gettersetter를 활용해 객체를 더 효율적이고 안전하게 관리해보세요! 😊