Programmatically change/edit JavaScript function using JavaScript

Question

The website uses onLoad to load a JavaScript file (.js). I want to change one of the functions inside that js file using JavaScript.

The function is called "Hello13" and is among many other functions (hello5, hello6, etc..)

The Hello13 function looks something like this:

function hello13(x, y, z) {
    if (x == null) {
        //something, something.
    }
    if (y == null) {
        //something else, something else.
    }
    if (z == null) {
        //something diffrent, something diffrent.
    }
}

So as you can see, when the function is called it is given some values (x, y, z).

I want to "hard code" the z to be my own value (inside the js file).

So it would be something like this after i have Programmatically changed it:

function hello13(x, y, z) {
    z = MyValueOverride.
.....

How can i add my own "z" value inside the js file, After the site has loaded, using JavaScript?

jfriend00 · Accepted Answer · 2013-01-27 00:51:59Z

4

If it's a globally defined function in some javascript that is loaded via an inline script tag (either locally defined or in an external JS file), you can just redefine it with your own version of that function. Whichever definition comes last will be the active one.

So, it sounds like what you want to do is to provide your own definition right after the external JS file containing the target function. That way your definition will replace the original one. If you want to retain the original one, you can assign it to another variable name before replacing it.

// save original function reference (if desired)
var originHello13 = hello13;

// now define the new function which will replace the previous definition
function hello13(x, y, z) {
    z = MyValueOveride...
}

If the external javascript file is dynamically loaded, then things are a little more complicated because you will need to figure out how to know when the dynamically loaded external JS file has been loaded so you can then define your override. You'd have to show us more about how the external JS file is loaded for us to offer specifics on how to do that.

answered Jan 27, 2013 at 0:51

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

2 Comments

undefined Over a year ago

The js is loaded like this: <script type="text/javascript" src="/p/jsFile.js"/> in the HTML header

jfriend00 Over a year ago

@AleksanderAzizi - No problem then. Just place your new definition after that <script> tag.

user578895 · Accepted Answer · 2013-01-27 00:53:08Z

4

Redefine it. If you want to use the logic in the original function, store the reference to the original function and then redefine it and call the original from the new one:

var originalHello13 = hello13;
hello13 = function( x, y, z ){
    z = MyValueOverride.
    return originalHello13( x, y, z );
}

answered Jan 27, 2013 at 0:53

user578895

Comments

Joseph Silber · Accepted Answer · 2013-01-27 02:25:23Z

0

Create a closure that redefines the function, then call the old function whenever your new function is called:

hello13 = (function () {
    // Keep a reference to the old function
    var _hello13 = hello13;

    // return a new function, which will be stored in hello13
    return function (x, y, z) {
        z = MyValueOverride;
        return _hello13(x, y, z);
    };
}());

Here's the fiddle: http://jsfiddle.net/hKavH/

edited Jan 27, 2013 at 2:25

answered Jan 27, 2013 at 0:52

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

5 Comments

user578895 Over a year ago

You're not calling the function, and even if you do the _hello13 var gets instantiated to undefined (the value of hello13 when your code runs)

Joseph Silber Over a year ago

@cwolves - How do you figure? I added a fiddle to my answer.

user578895 Over a year ago

Your fiddle is different because they're in the same context so the var hello13 gets hoisted above the function declaration. In the "real-world" example of them being different scripts, your code is effectively: var hello13 = undefined, thus deleting the original function, then hello13 = (function.... Once var _hello13 runs, the original function is gone. Drop the var before var hello13 and it should be fine. It's not needed anyway because you're trying to redeclare the global function

Joseph Silber Over a year ago

@cwolves - Isn't this Plunkr indicative of how the OP might use this?

user578895 Over a year ago

huh. That's weird, I didn't think that would work. I'm a little confused right now. Maybe because it's in the same scope the var is ignored since it's already defined? If so, I'm not sure all browsers would do the same thing here? If it's in a different scope, the code definitely won't work, so I wouldn't consider this "safe" in any case.

Collectives™ on Stack Overflow

Programmatically change/edit JavaScript function using JavaScript

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related