JAN's History
자바스크립트의 Getter와 Setter 본문
자바스크립트에서 객체(Object)를 다루다 보면 데이터를 더 효율적으로 제어하고 관리하기 위해 getter와 setter를 사용하는 경우가 있습니다. 지금부터 이 개념들이 왜 등장했는지, 그리고 어떻게 활용하는지 예시와 함께 알아보겠습니다!
🏷 1. Getter와 Setter란?
- Getter: 객체의 프로퍼티(속성)를 가져오는 역할을 합니다. 이때, 데이터를 단순히 반환할 뿐만 아니라 가공하거나 숨기고 싶은 정보에 접근하도록 할 때 사용됩니다.
- Setter: 객체의 프로퍼티를 설정하는 역할을 합니다. 값을 검증하거나 일부 조건에 따라 프로퍼티를 변경하고 싶을 때 사용됩니다.
간단히 말해, getter와 setter는 객체의 속성을 더 유연하고 안전하게 다룰 수 있도록 도와줍니다.
🎯 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"
📌 설명
- Getter: get typeAndSize 메서드는 type과 size를 가공해 문자열로 반환합니다. 이렇게 하면 객체의 데이터를 간단히 가져올 때 데이터를 가공하여 반환할 수 있습니다.
- 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를 사용하면 속성을 읽기 전용으로 만들 수 있습니다. 즉, 외부에서 변경하지 못하도록 보호할 수 있습니다.
📌 결론
Getter와 Setter는 객체의 속성을 더 안전하고 효율적으로 다룰 수 있도록 도와줍니다. 특히 프라이빗 속성과 결합하여 객체의 내부 데이터를 보호하고 안전하게 조작할 수 있습니다.
⭐ 중요: Getter와 Setter 사용 시 주의점
- Getter와 Setter는 데이터에 접근하거나 수정할 때 특별한 로직이 필요할 경우에만 사용해야 합니다.
- 남용하면 코드가 복잡해질 수 있으므로 필요한 경우에만 활용하세요.
- 프라이빗 속성을 사용할 때는 브라우저 호환성(특히 IE)도 고려해야 합니다. (참고로 필자는 그래서 사용하지 않음)
이제 여러분도 getter와 setter를 활용해 객체를 더 효율적이고 안전하게 관리해보세요! 😊
'Javascript' 카테고리의 다른 글
상속과 super 키워드 그리고 오버라이딩까지 쉽게 알아보기 🐶 (0) | 2024.10.16 |
---|---|
🐶 JavaScript static 키워드: 개념과 실전 활용법! (2) | 2024.10.12 |
클래스(Class) 기본기 다지기! (0) | 2024.10.05 |
실무에서 꼭 알아둬야할 try-catch문에 대해서 알아보자! (1) | 2024.10.03 |
Copy by Value와 Copy by Reference (0) | 2024.10.01 |