JavaScript variable is undefined even after assigning an object property method

Question

In the following code when I execute trace function and the variable "original" gets assigned to o[m] which is undefined initially but once I define o[m] as a nested function inside trace and trace function returns I expect that value of "original" variable should be newly defined nested function but to my surprise it is still undefined. I can't understand why?

   var o = {};            
   function trace(o, m) {
   var original = o[m]; 
   o[m] = function () { 
    alert(new Date(), "Exiting:", m);
    var result = original.apply(this, arguments); 
    alert(new Date(), "Exiting:", m); 
    alert(result); 
 };
}

 trace(o, "m");
 o.m("My JavaScript");

Paul S. · Accepted Answer · 2015-07-04 00:54:07Z

4

Identifiers don't update when you change the source you used to set them.

var o = {prop: function () {return 'old ref';}};
var foo = o.prop; // foo() === "old ref"
o.prop = function () {return 'new ref';};
foo(); // "old ref"

However, it may also be worth noticing

var e = o; // o as before
o.prop = function () {return 'even newer ref';};
e.prop(); // "even newer ref"
e === o; // true

When the identifier references an Object it's referencing the same object and not a copy, so changes made to it effect them all. This is because you're accessing the Object with the identifier rather than the property of that Object, i.e. e === o

If you were to then do o = fizz, o now points to a different thing to e so e !== o

var fizz = {buzz: "I'm something new!"};
o = fizz;
e.buzz; // undefined, e points at {prop: function () {...}}, not fizz
o.prop(); // TypeError, o points at fizz, not e
o.buzz; // "I'm something new!"
e === o; // false
fizz === o; // true

Lastly, by looking over what you were attempting to do you may need to consider "was there anything before?". This is why your code is throwing an Error currently.

function change(obj, prop, echo) {
    var prev_method = obj[prop];
    obj[prop] = function () {
        if (prev_method) // only if we had something before
            prev_method.apply(this, arguments); // try to invoke it
        console.log(echo);
    };
}

var o = {};
change(o, 'spell', 'H');
change(o, 'spell', 'e');
change(o, 'spell', 'l');
change(o, 'spell', 'l');
change(o, 'spell', 'o');

o['spell'](); // returns undefined, logs H, e, l, l, o

edited Jul 4, 2015 at 0:54

answered Jul 4, 2015 at 0:31

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2913184 Over a year ago

Got you sir , I would remember it as a rule of thumb that in JS identifiers don't update.

user2913184 Over a year ago

Can you please elaborate o = fizz a little bit more in terms of some code ?Thanks for all the help

Paul S. Over a year ago

@user2913184 if you did e = o (after o = fizz) or e = fizz you would then have all 3 pointing to the same thing. It's just you have to update each identifier manually. Also, e.prop() should never throw an error in the code I've written. o.prop() throws an error in the section about fizz.

Collectives™ on Stack Overflow

JavaScript variable is undefined even after assigning an object property method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related