JavaScript and Proxy

Discussion in 'Javascript' started by pdiddles03, Feb 12, 2020.

  1. pdiddles03

    pdiddles03

    Joined:
    Feb 12, 2020
    Messages:
    6
    Likes Received:
    0
    I can't seem to find how to best use proxy in javascript to watch objects for changes. An example is how do i delete a proxy after i am done using it? is it as simple as using "delete"?
     
    pdiddles03, Feb 12, 2020
    #1
    1. Advertisements

  2. pdiddles03

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    103
    Likes Received:
    12
    I don't know what your talking about with the word PROXY. If you want JS to watch an object for changes I would use a listener
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);

    and remove it with
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
     
    sunfighter, Feb 13, 2020
    #2
    1. Advertisements

  3. pdiddles03

    pdiddles03

    Joined:
    Feb 12, 2020
    Messages:
    6
    Likes Received:
    0

    Proxy is used to listen to javascript objects for change. I'm not merely listening to elements for change.

    Code (Javascript):
    var object = {a:1,b,2};

    var proxy = new Proxy(object,{
         get:function(obj,prop){
         },
         set:function(obj, prop, value){
         }
    });
    This basically creates an object that executes the get and set function, so if i were to add another value inside the object using this i would say proxy['c']=3 and it would execute the "set" part of the proxy and return the object with the original values, property which is the Object key and the new value.

    Get will get executed when I retrieve a value from it.

    This is modern JavaScript.
     
    pdiddles03, Feb 13, 2020
    #3
  4. pdiddles03

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    103
    Likes Received:
    12
    pdiddles I am asking you for help now. Back in 2015 I studied everything new in ES6. I came away with the notion they were trying to become C and that there was a lot of BS in the new spec. "let", for example. "proxy" must have been labeled - worthless in my mind and until now have never seen it in any program.

    I have reread a lot of articles on what it does and how, but still have no reason where this could be used nor why it should be used. So that is my question to you. Enlighten me please. Give me some examples.
     
    sunfighter, Feb 15, 2020
    #4
  5. pdiddles03

    pdiddles03

    Joined:
    Feb 12, 2020
    Messages:
    6
    Likes Received:
    0
    A use case for proxy is something like this: Lets say a user is logged in and their information is stored in a JSON object, you then from that point create a proxy like described above. They go to the account page and change their first name. Because of the change, it triggers the proxy set method, and you from that point can make an ajax call to the server that the information was updated. It's more to make your code look prettier. ES6 was mostly just syntactic sugar to have more readable code .

    If you have used angularjs 1.x at any point, you may have used their $scope.$watch method which allows you to watch objects for changes, It is similar to proxy except proxy does not need a bloated framework to achieve it.

    Let was about variable scoping. the "window" object holds all of the variables inside of it, so when you create a function or any variable or object, it gets put into the window object. Using let does not do that, that is why it's good for scoping.

    Consider this code:
    Code (Javascript):
    for(var i = 0; i < 5; i++){

    }
    console.log(i)
    The log would then spit out 5 even though it is outside of the for loop, using this code:

    Code (Javascript):
    for(let i = 0; i < 5; i++){

    }
    console.log(i)
    would output undefined.
     
    pdiddles03, Feb 15, 2020
    #5
  6. pdiddles03

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    103
    Likes Received:
    12
    OK, understood. Not my cup of tea.
     
    sunfighter, Feb 16, 2020
    #6
  7. pdiddles03

    pdiddles03

    Joined:
    Feb 12, 2020
    Messages:
    6
    Likes Received:
    0
    JavaScript isn't your cup of tea? Then why are you here? Or do you mean modern isn't, I. Which case you might want to find a different career
     
    pdiddles03, Feb 16, 2020
    #7
  8. pdiddles03

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    103
    Likes Received:
    12
    I mean things like proxy isn't my cuppa. Can think of other ways of doing this with JS. Nice thing about the language is you have a choice on how you do things. ES6 gave us some nice things and some that are not so nice; nor are they upgrades.
     
    sunfighter, Feb 16, 2020
    #8
    pdiddles03 likes this.
  9. pdiddles03

    pdiddles03

    Joined:
    Feb 12, 2020
    Messages:
    6
    Likes Received:
    0
    The updates they gave us are all logical and offer us a way that makes more sense. Yes we could program classes before, but now we have actual class syntax. Promises are fantastic. I will concede on the name "Proxy". The old deprecated way "object.observe" made a lot more sense. It's like taking the method "object.keys" and replacing it with "keeymakergenerator". Doesn't make a lot of sense why this was done.
     
    pdiddles03, Feb 17, 2020
    #9
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.