JavaScript Proxies and Reflect

// Syntax: new Proxy(target, handler)
const target = {
  message: 'Hello, World!'
};

const handler = {
  get: function(target, prop, receiver) {
    console.log(`Getting property: ${prop}`);
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);

// Using the proxy
console.log(proxy.message); 
// Logs: "Getting property: message"
// Then logs: "Hello, World!"

// User object with validation
function createUser(name, age) {
  const user = {
    name,
    age
  };
  
  return new Proxy(user, {
    set(target, prop, value) {
      if (prop === 'name' && (typeof value !== 'string' || value.length < 2)) {
        throw new Error('Name must be a string with at least 2 characters');
      }
      
      if (prop === 'age' && (typeof value !== 'number' || value < 0 || value > 120)) {
        throw new Error('Age must be a number between 0 and 120');
      }
      
      target[prop] = value;
      return true; // Indicate success
    }
  });
}

const user = createUser('Alice', 30);
user.name = 'Bob'; // Works fine
// user.name = ''; // Error: Name must be a string with at least 2 characters
// user.age = -5; // Error: Age must be a number between 0 and 120

// Logging proxy that tracks all property access and modifications
function createLoggingProxy(target, name = 'Object') {
  return new Proxy(target, {
    get(target, prop, receiver) {
      const value = target[prop];
      console.log(`${name}.${prop} accessed, returned: ${value}`);
      return value;
    },
    
    set(target, prop, value, receiver) {
      console.log(`${name}.${prop} changed from ${target[prop]} to ${value}`);
      target[prop] = value;
      return true;
    }
  });
}

const user = createLoggingProxy({ name: 'Alice', role: 'Admin' }, 'user');
console.log(user.name); // Logs: "user.name accessed, returned: Alice" then "Alice"
user.role = 'User'; // Logs: "user.role changed from Admin to User"

// Object with default values for missing properties
function withDefaults(target, defaults) {
  return new Proxy(target, {
    get(target, prop, receiver) {
      if (prop in target) {
        return target[prop];
      }
      
      if (prop in defaults) {
        return defaults[prop];
      }
      
      return undefined;
    }
  });
}

const settings = withDefaults({
  theme: 'dark'
}, {
  theme: 'light',
  fontSize: 16,
  showSidebar: true
});

console.log(settings.theme); // "dark" (from target)
console.log(settings.fontSize); // 16 (from defaults)
console.log(settings.unknownProp); // undefined

// Array with support for negative indices
function createArrayWithNegativeIndices(array) {
  return new Proxy(array, {
    get(target, prop, receiver) {
      // Handle numeric indices
      if (typeof prop === 'string' && /^-\d+$/.test(prop)) {
        // Convert negative index string to number and calculate positive index
        const index = target.length + parseInt(prop, 10);
        return target[index];
      }
      
      return Reflect.get(target, prop, receiver);
    }
  });
}

const arr = createArrayWithNegativeIndices([1, 2, 3, 4, 5]);
console.log(arr[1]); // 2
console.log(arr[-1]); // 5 (last element)
console.log(arr[-2]); // 4 (second-to-last element)

// Object with hidden properties that don't show up in enumeration
function createObjectWithHiddenProps(visible, hidden) {
  return new Proxy(visible, {
    get(target, prop, receiver) {
      // Check visible properties first
      if (prop in target) {
        return target[prop];
      }
      
      // Then check hidden properties
      if (prop in hidden) {
        return hidden[prop];
      }
      
      return undefined;
    },
    
    has(target, prop) {
      // Only report visible properties with 'in' operator
      return prop in target;
    },
    
    ownKeys(target) {
      // Only enumerate visible properties
      return Reflect.ownKeys(target);
    },
    
    getOwnPropertyDescriptor(target, prop) {
      // Only return descriptors for visible properties
      return Reflect.getOwnPropertyDescriptor(target, prop);
    }
  });
}

const obj = createObjectWithHiddenProps(
  { visible: 'I can be seen' },
  { secret: 'I am hidden' }
);

console.log(obj.visible); // "I can be seen"
console.log(obj.secret); // "I am hidden"
console.log('secret' in obj); // false
console.log(Object.keys(obj)); // ["visible"]

const obj = { x: 1, y: 2 };

// Traditional way to access properties
console.log(obj.x); // 1

// Using Reflect
console.log(Reflect.get(obj, 'x')); // 1

// Traditional way to set properties
obj.y = 3;

// Using Reflect
Reflect.set(obj, 'y', 4);
console.log(obj.y); // 4

const target = {
  name: 'Target',
  greet() {
    return `Hello, my name is ${this.name}`;
  }
};

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    // Forward the operation to the target, preserving 'this' binding
    return Reflect.get(target, prop, receiver);
  }
};

const proxy = new Proxy(target, handler);

// The 'this' in target.greet() will correctly refer to the proxy
console.log(proxy.greet()); // "Getting greet" then "Hello, my name is Target"

// Create a chainable API with proxies
function createChainableAPI(baseObject) {
  return new Proxy(baseObject, {
    get(target, prop, receiver) {
      // Get the actual property
      const value = Reflect.get(target, prop, receiver);
      
      // If it's a method, wrap it to return the proxy
      if (typeof value === 'function') {
        return function(...args) {
          const result = value.apply(this, args);
          // If the method returns 'this', return the proxy instead
          return result === target ? receiver : result;
        };
      }
      
      return value;
    }
  });
}

// Example: Chainable calculator
const calculator = createChainableAPI({
  value: 0,
  add(n) {
    this.value += n;
    return this;
  },
  subtract(n) {
    this.value -= n;
    return this;
  },
  multiply(n) {
    this.value *= n;
    return this;
  },
  divide(n) {
    this.value /= n;
    return this;
  },
  result() {
    return this.value;
  }
});

// Chain methods
const result = calculator
  .add(5)
  .multiply(2)
  .subtract(3)
  .divide(2)
  .result();
  
console.log(result); // ((5 * 2) - 3) / 2 = 3.5

// Create a revocable proxy
const target = { message: 'Hello' };
const { proxy, revoke } = Proxy.revocable(target, {
  get(target, prop, receiver) {
    console.log(`Accessing ${prop}`);
    return Reflect.get(target, prop, receiver);
  }
});

// Use the proxy
console.log(proxy.message); // "Accessing message" then "Hello"

// Revoke access - the proxy becomes unusable
revoke();

// Any further attempt to use the proxy will throw a TypeError
// console.log(proxy.message); // TypeError: Cannot perform 'get' on a proxy that has been revoked

// Object with computed properties that don't actually exist
function createObjectWithVirtualProps(realData) {
  return new Proxy(realData, {
    get(target, prop, receiver) {
      // Handle special virtual properties
      if (prop === 'fullName') {
        return `${target.firstName} ${target.lastName}`;
      }
      
      if (prop === 'age') {
        const birthYear = new Date(target.birthDate).getFullYear();
        const currentYear = new Date().getFullYear();
        return currentYear - birthYear;
      }
      
      // Default behavior for real properties
      return Reflect.get(target, prop, receiver);
    }
  });
}

const person = createObjectWithVirtualProps({
  firstName: 'John',
  lastName: 'Doe',
  birthDate: '1990-05-15'
});

console.log(person.firstName); // "John" (real property)
console.log(person.fullName); // "John Doe" (virtual property)
console.log(person.age); // Current year - 1990 (virtual property)