세터
세터 (Setter)
개요
자바스크립트(JavaScript에서 세터(setter) 는 객체의 특정 속성에 값을 할당할 때, 그 값을 직접 저장하는 대신 사용자 정의 로직을 실행하도록 해주는 특수한 메서드입니다. 세터는 주로 객체의 속성에 값을 설정할 때 유효성 검사, 데이터 변환, 내부 상태 갱신 등의 작업을 수행하기 위해 사용됩니다. 세터는 게터(getter) 와 함께 접근자 프로퍼티(accessor property) 로 분류되며, ECMAScript 5(ES5)부터 공식적으로 지원됩니다.
세터는 단순한 속성 할당을 넘어서는 제어력을 제공함으로써 객체 지향 프로그래밍의 캡슐화 원칙을 더 잘 지킬 수 있도록 도와줍니다.
세터의 기본 구조
자바스크립트에서 세터는 다음과 같은 두 가지 주요 방식으로 정의할 수 있습니다:
1. 객체 리터럴에서의 세터 정의
const person = {
firstName: '홍',
lastName: '길동',
set fullName(value) {
if (typeof value !== 'string' || value.trim() === '') {
throw new Error('이름은 비어있을 수 없습니다.');
}
const parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};
person.fullName = '김 철수'; // 세터 호출
console.log(person.firstName); // '김'
console.log(person.lastName); // '철수'
위 예제에서 fullName은 실제 데이터를 저장하지 않고, 값이 할당될 때마다 set 키워드로 정의된 함수가 실행됩니다.
2. Object.defineProperty()를 사용한 세터 정의
const car = {
_speed: 0 // 내부 상태를 나타내는 프로퍼티 (컨벤션상 _ 접두사 사용)
};
Object.defineProperty(car, 'speed', {
set(value) {
if (value < 0) {
console.warn('속도는 음수가 될 수 없습니다.');
this._speed = 0;
} else if (value > 200) {
console.warn('속도 제한 초과!');
this._speed = 200;
} else {
this._speed = value;
}
},
get() {
return this._speed;
}
});
car.speed = 250; // 세터 호출 → 경고 발생, 200으로 제한
console.log(car.speed); // 200
이 방식은 기존 객체에 동적으로 접근자 프로퍼티를 추가하거나, 더 세밀한 제어가 필요할 때 유용합니다.
세터의 주요 용도
1. 유효성 검사 (Validation)
세터는 값이 설정되기 전에 그 유효성을 검사하는 데 탁월합니다. 예를 들어, 나이가 음수가 되지 않도록 방지하거나, 이메일 형식을 검사할 수 있습니다.
const user = {
_email: '',
set email(value) {
if (!value.includes('@')) {
throw new Error('유효한 이메일 형식이 아닙니다.');
}
this._email = value;
}
};
2. 데이터 변환
입력된 값을 원하는 형식으로 자동 변환할 수 있습니다. 예: 문자열을 숫자로, 소문자를 대문자로 변환.
const settings = {
_theme: 'light',
set theme(value) {
this._theme = value.toLowerCase();
}
};
settings.theme = 'DARK';
console.log(settings._theme); // 'dark'
3. 내부 상태 동기화
한 속성의 변경이 다른 속성이나 내부 상태에 영향을 미쳐야 할 때 사용됩니다.
const rectangle = {
_width: 0,
_height: 0,
set dimensions([w, h]) {
this._width = w;
this._height = h;
this.area = w * h; // 자동으로 면적 갱신
}
};
rectangle.dimensions = [10, 5];
console.log(rectangle.area); // 50
클래스에서의 세터
ES6 클래스에서도 세터를 사용할 수 있으며, 클래스 내부에서 set 키워드를 통해 정의합니다.
class Temperature {
constructor(celsius = 0) {
this._celsius = celsius;
}
set celsius(value) {
if (value < -273.15) {
throw new Error('절대영도 이하로 설정할 수 없습니다.');
}
this._celsius = value;
}
get fahrenheit() {
return (this._celsius * 9/5) + 32;
}
}
const temp = new Temperature();
temp.celsius = 25;
console.log(temp.fahrenheit); // 77
주의사항 및 제한
- 세터만 정의하면 값을 읽을 수 없습니다. 반드시
get과 함께 사용하거나, 내부 저장소(_variable)를 별도로 두어야 합니다. - 세터는 함수처럼 호출하지 않습니다. 점 표기법과 할당 연산자(
=)로 사용됩니다. - 성능 고려: 세터는 일반 프로퍼티 접근보다 약간 느릴 수 있으므로, 매우 빈번한 접근이 필요한 경우 주의가 필요합니다.
관련 개념
| 개념 | 설명 |
|---|---|
| 게터 (Getter) | 속성을 읽을 때 실행되는 함수. 세터와 쌍을 이룹니다. |
| 접근자 프로퍼티 (Accessor Property) | 게터와 세터를 가진 속성으로, 직접 값을 저장하지 않습니다. |
| 데이터 프로퍼티 (Data Property) | 일반적인 값 저장 속성 (value, writable 등). |
| 캡슐화 (Encapsulation) | 객체의 내부 상태를 외부에서 직접 접근하지 못하게 하고, 세터/게터를 통해 제어하는 설계 원칙. |
참고 자료
- MDN Web Docs - getter
- MDN Web Docs - setter
- ECMAScript 5 Specification - Object.defineProperty
- Douglas Crockford, JavaScript: The Good Parts (세터/게터 활용 패턴 소개)
세터는 자바스크립트에서 객체의 안정성과 유지보수성을 높이는 중요한 도구이며, 현대 자바스크립트 개발에서 널리 사용되고 있습니다.
이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.
주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.