본문 바로가기
프론트엔드/javascript

getter setter

by 느바 2025. 2. 2.
반응형

getter setter

getter와 setter는 클래스에서 객체의 속성 값을 안전하게 가져오거나 설정할 수 있도록 도와주는 메서드입니다. 이를 통해 데이터의 무결성을 유지하고, 속성에 대한 추가적인 로직(예: 검증, 변환 등)을 적용할 수 있습니다.


getter와 setter의 기본 개념

  • getter: 클래스 속성 값을 가져올 때 사용하는 메서드입니다.
  • setter: 클래스 속성 값을 설정할 때 사용하는 메서드입니다.

JavaScript에서 get과 set 키워드를 사용하여 정의합니다.


기본 예제

class Person {
    constructor(name, age) {
        this._name = name; // 언더스코어(_)를 붙여 직접 접근을 방지
        this._age = age;
    }

    // getter: 이름을 가져옴
    get name() {
        return this._name;
    }

    // setter: 이름을 설정 (공백 허용 안 함)
    set name(newName) {
        if (newName.trim() === "") {
            console.error("이름은 빈 문자열일 수 없습니다.");
            return;
        }
        this._name = newName;
    }

    // getter: 나이를 가져옴
    get age() {
        return this._age;
    }

    // setter: 나이를 설정 (음수 허용 안 함)
    set age(newAge) {
        if (newAge < 0) {
            console.error("나이는 0 이상이어야 합니다.");
            return;
        }
        this._age = newAge;
    }
}

// 객체 생성
const person = new Person("Alice", 25);

console.log(person.name); // Alice
person.name = "Bob"; // setter 호출
console.log(person.name); // Bob

person.age = -5; // 오류 발생: 나이는 0 이상이어야 합니다.
console.log(person.age); // 25 (변경되지 않음)

코드 설명

  1. _name과 _age 속성을 constructor에서 초기화합니다.
    • 언더스코어(_)를 붙여 외부에서 직접 접근하는 것을 방지합니다.
  2. get name()과 get age() 메서드는 속성 값을 반환합니다.
  3. set name(newName)과 set age(newAge)는 값 설정 시 유효성을 검사합니다.
    • 이름이 빈 문자열이면 오류 메시지를 출력하고 설정을 막습니다.
    • 나이가 음수이면 오류 메시지를 출력하고 변경을 막습니다.

응용 예제: 비밀번호 암호화

아래는 getter를 이용해 비밀번호를 숨기고, setter를 이용해 암호화하는 예제입니다.

class User {
    constructor(username, password) {
        this.username = username;
        this._password = password;
    }

    get password() {
        return "비밀번호는 보안상 표시할 수 없습니다.";
    }

    set password(newPassword) {
        if (newPassword.length < 6) {
            console.error("비밀번호는 최소 6자 이상이어야 합니다.");
            return;
        }
        this._password = `hashed_${newPassword}`; // 간단한 해시 처리 예시
    }
}

const user = new User("john_doe", "secret123");

console.log(user.password); // "비밀번호는 보안상 표시할 수 없습니다."
user.password = "123"; // 오류 발생: 비밀번호는 최소 6자 이상이어야 합니다.
user.password = "newpassword"; // 비밀번호 변경
console.log(user._password); // "hashed_newpassword"

정리

  • getter는 속성을 안전하게 읽을 수 있도록 도와줍니다.
  • setter는 속성 값을 설정할 때 유효성 검사 등을 수행할 수 있습니다.
  • 직접 속성에 접근하는 것보다 getter와 setter를 사용하면 데이터 보호와 유지보수가 쉬워집니다.

https://developer.mozilla.org/ko/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript#getters%EC%99%80_setters

 

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

OOJS에 대한 개념을 설명했으니, 이 글에서는 부모 클래스에서 자식 클래스를 상속하는 방법을 알아봅니다. 덤으로 OOJS를 구현하는데 몇 가지 참고사항도 있습니다.

developer.mozilla.org

 

반응형

'프론트엔드 > javascript' 카테고리의 다른 글

try catch  (1) 2025.02.02
requestpointerlock API  (1) 2025.01.31
Web Crypto API  (1) 2025.01.19
requestAnimationFrame vs setInterval  (0) 2025.01.12
Node.js vs Express.js  (0) 2025.01.05