How to change an object before function call? Is this really possible?

Question

I have a very strange js problem. I have a Vue component (but I don't think Vue is important here). It has a data attribute called current_query. In the method that responds to the event, I want to modify the property. Use Lodash here. There is a very strange behavior. Assume this.current_query is initially equal to { test: 500 }. Assume that the 'field' parameter is 'test'. By "unsetting" it from current_query, I will actually clear current_query itself. very good. The problem is, only when using unset, if I log the current_query before calling unset, I get an empty object. How can this be?

on_applied_option_click(field){
    console.log(this.current_query); // gives { test: 500 } (OK)
  }, // Click to end

  on_applied_option_click(field){
    console.log(this.current_query); // Only when using _.unset will an empty object be given (??)
    _.unset(this.current_query, field);
    console.log(this.current_query); // Will also give an empty object (OK)
  }, // Click to end

I found that if I use _.omit, everything works fine:

on_applied_option_click(field){
    console.log(this.current_query); // gives { test: 500 } (OK)
    this.current_query = _.omit(this.current_query, field);
    console.log(this.current_query); // Give an empty object, which is OK at this time
  }, // Click to end

Why? The only thing I can say is that _.unset changes the object while _.omit creates new objects. However, I don't think it's possible for _.unset to change the object before calling it (???). Never seen anything like this. Does anyone have a good explanation for this strange behavior?

Answer 1

Don't use console.log(this.current_query), try using console.log(JSON.stringify(this.current_query)). This reliably records the state of this.current_query at the time of recording, rather than a possible later state.

This should solve the confusion problem.