javaScript why using function inside empty function

Question

in this code

function adjustStyle() {
    var width = 0;
    // get the width.. more cross-browser issues
    if (window.innerHeight) {
        width = window.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
    } else if (document.body) {
        width = document.body.clientWidth;
    }
    // now we should have it
    if (width < 600) {
        document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");
    } else {
        document.getElementById("myCSS").setAttribute("href", "_css/main.css");
    }
}

// now call it when the window is resized.
window.onresize = function () {
    adjustStyle();
};

why I have to use adjustStyle() inside empty function why I can not used like window.onresize = adjustStyle();

window.onresize = adjustStyle would absolutely work. Just make sure you don't put the parenthases after — TKoL
– TKoL, Commented Oct 30, 2017 at 9:55
instead of calling you just set the function definition window.onresize=adjustStyle — ricky
– ricky, Commented Oct 30, 2017 at 9:55
Initializing function to variable...Its one of those design patterns in javascript. — Abhishek
– Abhishek, Commented Oct 30, 2017 at 9:56
If you use an event listener, you can just pass the reference. — evolutionxbox
– evolutionxbox, Commented Oct 30, 2017 at 9:58

GGO · Accepted Answer · 2017-10-30 09:54:37Z

2

You could call :

window.onresize = adjustStyle;

Declaring adjustStyle like :

var adjustStyle = function() { [...] };

or

function adjustStyle() { [...] }

answered Oct 30, 2017 at 9:54

GGO

2,7484 gold badges22 silver badges43 bronze badges

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

Comments

Jamiec · Accepted Answer · 2017-10-30 09:56:50Z

1

why I have to use adjustStyle() inside empty function why I can not used like window.onresize = adjustStyle();

Because if you did that, onresize would be assigned the result of calling the function - which is undefined - and therefore nothing would happen. You could however do this:

window.onresize = adjustStyle; // note no parentheses

Which would set resize to the function itself.

answered Oct 30, 2017 at 9:56

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Comments

Lukas Liesis · Accepted Answer · 2017-10-30 09:56:21Z

0

because with a function you can call several handlers after resize.

e.g.:

window.onresize = function(){
  doOneThing();
  doAnotherThing();
}

answered Oct 30, 2017 at 9:56

Lukas Liesis

26.6k12 gold badges123 silver badges123 bronze badges

Comments

Milanzor · Accepted Answer · 2017-10-30 10:18:53Z

0

I felt like the other answers got it right, but didn't explain what JavaScript does when you do

window.onresize = adjustStyle();

On runtime, this will bind whatever the adjustStyle(); function RETURNS to the window.onresize event, not the function itself. It will run it once and bind the return value to the onresize event.

So if you catch the return value of adjustStyle(); into a variable, like so:

var adjust = adjustStyle();

and log the adjust variable, you'll see that the it logs undefined, because your function does not return anything.

If you would end your adjustStyle(); function with return 'hello'; for example. The above would log 'hello'. It is what the function returns.

So opposed to binding window.onresize to adjustStyles();, you can bind it to adjustStyles without the parenthesis. Like so

window.onresize = adjustStyles;

This binds the function reference to the onresize event, so not what it returns but what it references (a function you defined). You can skip your own function definition, like so, resulting in the same

window.onresize = function(){/..your code../};

This will bind the function directly to the onresize event, instead of having a references to it through the variable adjustStyles;

answered Oct 30, 2017 at 10:18

Milanzor

1,92014 silver badges22 bronze badges

3 Comments

Jamiec Over a year ago

I felt like the other answers got it right, but didn't explain what JavaScript does when you do - except that was my very first sentence.

Milanzor Over a year ago

@Jamiec, yes, you've explained what I explain in 1 sentence, but seeing as OP is clearly new to JavaScript, wouldn't it makes sense to explain what is interpreted step-by-step? You've given the answer for this particular problem, I feel explaining what happens step-by-step is far more productive for OP and future readers. Understanding the core > fixing a specific problem.

Shadi Abo Alnaser Over a year ago

Perfect answer, Thanks

Collectives™ on Stack Overflow

javaScript why using function inside empty function

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related