JavaScript에서 동적 Getters/Setters를 구현할 수 있나요?

동적 getter 및 setter를 사용하면 JavaScript 객체가 미리 정의된 속성 이상의 속성 액세스 및 수정을 처리할 수 있습니다. 이전 JavaScript 기술에서는 알려진 속성에 대해 특정 getter 및 setter를 사용했지만 이 문서에서는 정의되지 않은 속성에 대해 포괄적인 getter 및 setter 구현 가능성을 살펴봅니다.

ES2015 프록시: 동적 솔루션

ES2015에서는 다른 객체의 중개자 역할을 하는 객체 생성을 가능하게 하는 JavaScript 프록시를 도입했습니다. 이 기능은 동적 getter 및 setter를 엽니다.

const original = {
    example: "value",
};
const proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
    },
});

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

이 예에서 프록시 객체는 원본 객체에 대한 속성 액세스를 가로챕니다. 문자열 속성에 액세스할 때 프록시는 이를 대문자로 변환하여 반환합니다. 알 수 없는 속성의 경우 정의되지 않은 대신 "누락"을 반환합니다.

이 구현은 브라우저가 ES2015(ES6)를 지원하는 경우 브라우저 간 호환됩니다. 이전 브라우저의 경우 폴리필이나 대체 기술을 사용하는 것이 좋습니다. 프록시는 동적 getter 및 setter를 위한 유연한 솔루션을 제공하여 원본 객체를 수정하지 않고도 효율적인 속성 처리 및 속성 검사를 가능하게 합니다.