Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The difference is that <code>functionOne</code> is a function expression and so only defined when that line is reached, whereas <code>functionTwo</code> is a function declaration and is defined as soon as its surrounding function or script is executed (due to <a href="http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.html" rel="noreferrer">hoisting</a>). </p> <p>For example, a function expression:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// TypeError: functionOne is not a function functionOne(); var functionOne = function() { console.log("Hello!"); };</code></pre> </div> </div> </p> <p>And, a function declaration: </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Outputs: "Hello!" functionTwo(); function functionTwo() { console.log("Hello!"); }</code></pre> </div> </div> </p> <p>This also means you can't conditionally define functions using function declarations:</p> <pre><code>if (test) { // Error or misbehavior function functionThree() { doSomething(); } } </code></pre> <p>The above actually defines <code>functionThree</code> irrespective of <code>test</code>'s value &mdash; unless <code>use strict</code> is in effect, in which case it simply raises an error.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload