Introduction To Proxy In Javascript With Set And Get Traps

INTRODUCTION

Proxy in JavaScript is like a "middleman" between you and the object . Imagine you have a box (the object) with some items (properties) inside it. Normally, you can open the box, take items out, or put new items in — that's reading and writing properties.

But what if you had a security guard (the Proxy) standing between you and the box?

• When you try to take something out (read a property), the guard can check what you're doing — maybe they let you, maybe they change the item before giving it to you.

• When you try to put something in (write a property), the guard can stop you, allow it, or do something extra (like logging what you did).

The Proxy can:

• Intercept actions (like getting, setting, or deleting properties).

• Handle things its own way (like adding rules or changing values).

• Or just pass the request along to the object as usual.

Proxy

A Proxy object wraps another object and intercepts operations, like reading/writing properties and others, optionally handling them on its own, or transparently allowing the object to handle them.

The syntax:

let proxy = new Proxy(target, handler)

• target – is an object to wrap, can be anything, including functions.

• handler – proxy configuration: an object with “traps”, methods that intercept operations. – e.g. get trap for reading a property of target, set trap for writing a property into target, and so on.

For operations on proxy, if there’s a corresponding trap in handler, then it runs, and the proxy has a chance to handle it, otherwise the operation is performed on target.

As a starting example, let’s create a proxy without any traps:

let target = {};
let proxy = new Proxy(target,{});

proxy.test = 5 ; //-> test will be added to proxyed object and it will also add it to the main target object

console.log(proxy.test) // 5
console.log(target.test) //5

As there are no traps, all operations on proxy are forwarded to target.

1. A writing operation proxy.test= sets the value on target.

2. A reading operation proxy.test returns the value from target.

3. Iteration over proxy returns values from target.

Let's Understand this with an example :

Proxy is a special “exotic object”. It doesn’t have own properties. With an empty handler it transparently forwards operations to target.

DEFAULT VALUE WITH GET TRAP

To intercept reading, the handler should have a method get(target, property).

It triggers when a property is read, with following arguments:

• target – is the target object, the one passed as the first argument to new Proxy,

• property – property name.

Getting the values with get trap :

let numbers = [0,1,2];

numbers = new Proxy(numbers,{
get(target,prop){
    if(prop in target){
        return target[prop]
    }else{
        return 0
    }
}
});

console.log(numbers[2]); //output will be 2 since in 2 index we have 2
console.log(numbers[43]); //0 nothing in index 43 & the default value return we have 0.

Negative indexing in an array :

let numbers = [0, 1, 2, 3];

numbers = new Proxy(numbers, {
  get(target, prop) {
        //if Prop is a string then convert it to a number
        prop = Number(prop);  
        //getting the negative indexing

        if (prop < 0) {
          return target[target.length + prop];
        } else {
          return target[target];  
        }
 },

});



console.log(numbers[-1]); //output will be 3
console.log(numbers[-2]); //output will be 2
console.log(numbers[1]); //output will be 1

DEFAULT VALUE WITH SET TRAP

The set trap triggers when a property is written.

set(target, property, value):

• target – is the target object, the one passed as the first argument to new Proxy,

• property – property name,

• value – property value,

The set trap should return true if setting is successful, and false otherwise (triggers TypeError).

setting any value with set trap :

let numbrs = []

numbers = new Proxy(numbers,{
    set(target,prop,value){
        //making the prop into number
        prop = Number(prop)
        // validation to check if value is a number
        if(typeof value === "number"){
            target[prop] = value;
            return true
        }else{
            return false;
        }
    }
})

writing in a Negative index:

let numbers = [0, 1, 2, 3];

numbers = new Proxy(numbers, {
  set(target, prop, value) {
    //converting prop to a number
    prop = Number(prop);
    //checking if value is a number or not
    if (typeof value !== "number") {
      return false;
    }
    if (prop < 0) {
      target[target.length + prop] = value;
      return true;
    } else {
      target[prop] = value;
    }
    return false;
  },
});

numbers[-1] = 5;

console.log(numbers); // output will be [0,1,2,5]

CONCLUSION

In conclusion, JavaScript proxies provide a powerful way to customize the behavior of objects by intercepting fundamental operations. The get and set traps are particularly useful for adding extra logic when properties are accessed or modified.

• The get trap allows you to control what happens when a property is read. This can be used for logging access, adding validation, or even generating dynamic responses.

• The set trap lets you intercept property assignments. It’s great for enforcing rules, like ensuring certain values are always valid, triggering side effects, or tracking changes.

By using proxies with get and set, you can create reactive data models, implement default values, or secure objects against unintended changes. While proxies add flexibility and control, it’s important to use them thoughtfully to avoid unnecessary complexity or unexpected behavior.

Ultimately, proxies empower developers to redefine how objects behave under the hood — making JavaScript more dynamic and adaptable.

Thank you for taking the time to read my article! I hope it gave you a clear understanding of how proxies work in JavaScript, especially the get and set traps. If you have any questions or thoughts, feel free to share them — I'd love to hear your feedback. Happy coding! 🚀