자바스크립트에서 객체에 새로운 속성을 정의하거나 기존 속성을 수정하고 싶다면 Object.defineProperty() 메서드를 활용할 수 있습니다. 이 메서드는 속성의 값뿐만 아니라 읽기 전용 여부, 열거 가능 여부 등 세부 동작까지 정밀하게 제어할 수 있다는 점이 큰 장점입니다.
기본 문법
Object.defineProperty(obj, prop, descriptor)
각 매개변수는 다음과 같은 의미를 가집니다.
- obj – 속성을 정의할 대상 객체입니다.
- prop – 새로 정의하거나 수정할 속성의 이름입니다.
- descriptor – 해당 속성의 동작 방식을 지정하는 설명자(descriptor) 객체입니다.
속성 설명자(descriptor)의 주요 옵션
descriptor 객체에는 다음과 같은 옵션을 사용할 수 있습니다.
- value – 속성에 할당될 값을 지정합니다.
- writable –
true이면 속성 값을 변경할 수 있고,false이면 읽기 전용이 됩니다. - enumerable –
true이면 for...in 루프나 Object.keys()에서 해당 속성이 노출됩니다. - configurable –
true이면 속성을 삭제하거나 설명자를 다시 변경할 수 있습니다.
예제 코드
아래 예제는 Object.defineProperty()를 사용해 읽기 전용 속성을 만드는 방법을 보여줍니다. writable: false로 설정했기 때문에 이후 값을 변경하려고 해도 원래 값인 20이 그대로 유지됩니다.
<!DOCTYPE html>
<html>
<body>
<script>
const obj = {};
Object.defineProperty(obj, 'prop', {
value: 20,
writable: false
});
obj.prop = 10;
document.write(obj.prop);
</script>
</body>
</html>실행 결과
20
일반적인 방법으로 obj.prop = 10;처럼 값을 재할당했음에도 불구하고 출력 결과는 20입니다. 이는 writable: false 옵션 때문에 속성이 읽기 전용으로 잠겼기 때문입니다. 참고로 엄격 모드(strict mode)에서는 이러한 재할당 시도가 TypeError 오류를 발생시킵니다.
정리
Object.defineProperty()는 단순히 속성을 추가하는 것을 넘어, 속성의 변경 가능성·열거 가능성·설정 가능성을 세밀하게 통제해야 하는 상황에서 매우 유용합니다. 라이브러리 개발이나 불변(immutable) 데이터 구조를 설계할 때 적극적으로 활용해 보세요.