Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Function vs Object declaration</h2> <p>You can't use that particular syntax, the correct form is:</p> <pre><code>var myFuncs = { firstFn: function () {}, secondFn: function () {}, ... }; </code></pre> <p>The advantage to writing functions within an object has to do with namespacing and context. If you wrote:</p> <pre><code>var firstFn = function () {}; -or- function firstFn() {} </code></pre> <p>the function would be defined at <code>window.firstFn</code>. Adding the functions on <code>myFuncs</code> makes the functions accessible at <code>window.myFuncs.firstFn</code>. If you want your JavaScript to work with other scripts you wouldn't want to have your <code>foo</code> function conflict with someone elses <code>foo</code> function:</p> <pre><code>&lt;script src="a.js"&gt; function foo() {...} &lt;/script&gt; &lt;script src="b.js"&gt; function foo() {...} //this script would overwrite the foo function in a.js &lt;/script&gt; &lt;script src="c.js"&gt; var bar = { //this script would be accessed at bar.foo() foo: function () {..} } &lt;/script&gt; </code></pre> <p>The calling context (<code>this</code>) of the function will also be different:</p> <pre><code>function foo() { console.log(this); //window } var bar = { foo: function () { console.log(this); //bar object } } </code></pre> <hr> <h2>Closure Syntax</h2> <p>What you may be getting confused with is the syntax for declaring functions within a closure:</p> <pre><code>(function () { var foo = function () {...}; foo(); }()); </code></pre> <p>In this case the closure is used to prevent the function from polluting the global scope (<code>window.foo</code> will not be set). This allows multiple scripts to use the same function names without worrying about being overridden.</p> <hr> <h2>OOP Syntax</h2> <p>The object syntax is often used to define the prototype for a JavaScript "constructor". In JS all functions can be called as a constructor simply by using the <code>new</code> keyword when the function is called:</p> <pre><code>function foo() {...} var f = new foo(); //don't do it this way </code></pre> <p>For readability/maintainability/consistency you should always name your constructor using PascalCase:</p> <pre><code>function Foo() {...} //tells other developers this is a constructor function bar() {...} //tells other developers this is a function var f = new Foo(); var b = bar(); </code></pre> <p>Without getting too lost in the details of how prototype works, you can assign methods to be shared across every instantiated object of a function by assigning an object to the function's <code>prototype</code> property:</p> <pre><code>function Foo() {...} Foo.prototype = { //note the use of the object declaration for the functions bar: function () {...}, baz: function () {...}, ... }; var f = new Foo(); f.bar(); //calls the bar function that was defined in the prototype </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

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