JavaScript에서 동적 Getter 및 Setter 구현: 가이드

기존 JavaScript에서 getter 및 setter는 특정 속성 이름에 대해 정의됩니다. 그러나 ES2015에 도입된 프록시를 사용하여 보다 유연한 동적 getter 및 setter를 생성할 수 있습니다.

프록시가 포함된 동적 getter 및 setter

동적 getter 및 setter를 사용하면 명시적인 정의 없이 속성 액세스 및 수정이 가능합니다. 프록시를 사용하여 이를 구현하는 방법은 다음과 같습니다.

"use strict";
if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            // Modify the value here before returning
            return rv;
        }
        // Define default behavior for unknown properties
        return "missing";
      }
});

사용 예

위의 프록시를 사용하면 속성 액세스 및 수정을 동적으로 수행할 수 있습니다.

console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"

브라우저 간 호환성

프록시는 Chrome, Firefox, Safari와 같은 최신 브라우저에서 지원됩니다. 그러나 프록시를 지원하지 않는 이전 브라우저의 경우 프록시 없이 동적 getter/setter 구문을 사용하여 해결 방법을 구현할 수 있습니다.