What is the structure of scripts? jQuery, HTML

Question

Whilst debugging, I noticed that my script wasn't working properly. I had it structured as so:

<script>
  $(document).ready(function() {
    var myFunc = function() {...};
    // and then some code that used myFunc()
  }
</script>

But when I moved the function outside of $(document).ready() and right before the closing script tag, and if I did a function declaration instead of a variable declaration for myFunc(), that the script worked:

<script>
  $(document).ready(function() {
    // and then some code that used myFunc()
  }
  function myFunc() {...};
</script>

Is there an order or particular structure that scripts are supposed to have?

what is your question exactly? your second example is simply running the `myFunc` code before the document has loaded, so it will have completely different behaviour. — Pabs123, Feb 21 '16 at 18:14
@Pabs123 I guess function will not work on its own , except it is called :) — Vivek Solanki, Feb 21 '16 at 18:15
Possible duplicate of [var functionName = function() {} vs function functionName() {}](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) — chiliNUT, Feb 21 '16 at 18:18

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

This is because the function myFunc() syntax declares a function that can be used anywhere in the code, even before it is defined. Using var myFunc = function means you can only use the function after it has been declared. For more info, see this post.

edited May 23 '17 at 10:28

Community

1
1

answered Feb 21 '16 at 18:17

kairocks2002

426
1
3
15

score 1 · Accepted Answer · answered Feb 21 '16 at 18:19

It's hard to tell what is actually wrong with myFunc without seeing the code, but it's likely that whatever you are attempting to do inside of it does not work as you expect once the document has fully loaded. The reason your second example works is because of function hoisting. You are calling the function before it is declared, but since it is hoisted it will still work. This example has the code inside myFunc run before the document is ready, which apparently is what causes it to work.

I would suggest further debugging your first example to determine why waiting until the document has loaded is causing an issue. perhaps there is some other JS that is faulty and breaking the rest of your code.

To answer your question, there is nothing wrong with your original structure per say, but there may be something wrong with the assumptions you are making about the state of your environment at the point of execution. The two examples simply define the function in different contexts and scopes.

score 0 · Answer 3 · answered Feb 21 '16 at 18:17

There is a HUGE difference in context and scope between the two examples. Which one to use would be dictated by the part of your code that we can't see...

Here is a good 1000 foot view explaination - http://ryanmorr.com/understanding-scope-and-context-in-javascript/

score 0 · Answer 4 · answered Feb 21 '16 at 18:20

0

If your code relies on the page loading completely (more specifically the DOM) then your myFunc code needs to live within the JQuery document ready function in your example.

answered Feb 21 '16 at 18:20

Zinc

3,551
4
28
39

What is the structure of scripts? jQuery, HTML

4 Answers4