반응형
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 (변경되지 않음)
코드 설명
- _name과 _age 속성을 constructor에서 초기화합니다.
- 언더스코어(_)를 붙여 외부에서 직접 접근하는 것을 방지합니다.
- get name()과 get age() 메서드는 속성 값을 반환합니다.
- 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를 사용하면 데이터 보호와 유지보수가 쉬워집니다.
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 |