Javascript: simplifying code, confused

Question

I have enough knowledge when it comes to HTML/CSS/PHP/MySQL, but Javascript is still a huge hurdle for me. For whatever reason my teacher wants us to simplify this silly bit of code, but how would one go about doing that?

function f(a, b, c) {
    return function() {
        return a[b](c);
    }
}
window.onload = f(document, "write", "hi!");

I've thought of

function f(a, b, c) {
    return a[b](c);
}
window.onload = f(document, "write", "hi!");

but it can't simply be this simple, right? A push in the right direction would be much obliged!

edit: Thanks guys. Rather than giving me a push you've gone out of your ways (an insane amount of people even, whoa) to create this for me. Luckily all he wanted to know was how I would go about doing this, and that's all the Javascript for this year. Much obliged!

Answer 1

I think he wants you to realize that calling f returns another function.

function f(a, b, c) {
    return function() {
        return a[b](c);
    }
}

This is a function that, when run, returns another function. So

window.onload = f(document, "write", "hi!");

ends up being something like

window.onload = function() { return a[b](c); }

where a, b, and c are bound to the values you passed in. So write something like that, but replace a, b, and c with the right values. It ends up being return document["write"]("hi") which can also be written return document.write("hi"). Plug that in:

window.onload = function() {
    return document.write("hi");
}

This is equivalent.

Answer 2

Maybe he's simply thinking of

window.onload = function() {
    document.write("hi");
};

(which is by the way a silly example, that waits for a page to load just to overwrite it with "hi".)

Answer 3

Your proposed solution doesn't work: document.write will run immediately when f is called, rather than in response to the load event. The original function f actually returns a new function; your example immediately calls a function and returns the result.

If you look at the MDN page on window.onload, you'll see that onload should be set to a function:

window.onload = function() {
  init();
  doSomethingElse();
};

It's obvious that the code should document.write a message, so put that code inside an onload function handler. You'll have shorter (but much less abstract) code that achieves the same effect.

Answer 4

This perhaps?

window.onload = document.write.bind(document, 'hi!');

Answer 5

Or just document["write"]("hi");

Another way would bedocument.write("hi");

Edit: Oops, forgot you needed to do this onload,

window.onload = function() {
    return document.write("hi");
}

Answer 6

I'm pretty sure your instructor wants to keep the function abstract, that is, without values embedded in it. That way you can pass ANY object, method, and value to it and it will work. Yours is very close. Others have drawn attention to some issues. This should work if you want the code to execute as the page loads:

function f(a, b, c) {
    a[b](c);
}
f(document, "write", "hi!");

You could keep the onload handler, but be aware that it will totally overwrite the existing document. Maybe the dude wants that. It sounds dumb, though. That would look like this:

function f(a, b, c) {
    a[b](c);
}
window.onload = function () {
    f(document, "write", "hi!");
};