Question

I was wondering whether there is any performance / advantage of writing javascript in this format ?

var myFuncs = {
  var firstFun = function() {
    // do something
  },

  var secondFunc = function() {
    // do something
  },

  var thirdFunc = function() {
    // do something
  }
}

So they can be called like

myFuncs.firstFun();

I’m trying to understand how this is more advantageous [other than code readability] ?

Answer 1

Function vs Object declaration

You can’t use that particular syntax, the correct form is:

var myFuncs = {
  firstFn: function () {},
  secondFn: function () {},
  ...
};

The advantage to writing functions within an object has to do with namespacing and context. If you wrote:

var firstFn = function () {};
-or-
function firstFn() {}

the function would be defined at window.firstFn. Adding the functions on myFuncs makes the functions accessible at window.myFuncs.firstFn. If you want your JavaScript to work with other scripts you wouldn’t want to have your foo function conflict with someone elses foo function:

<script src="a.js">
function foo() {...}
</script>

<script src="b.js">
function foo() {...} //this script would overwrite the foo function in a.js
</script>

<script src="c.js">
var bar = { //this script would be accessed at bar.foo()
  foo: function () {..}
}
</script>

The calling context (this) of the function will also be different:

function foo() {
  console.log(this); //window
}
var bar = {
  foo: function () {
    console.log(this); //bar object
  }
}

---

Closure Syntax

What you may be getting confused with is the syntax for declaring functions within a closure:

(function () {
  var foo = function () {...};
  foo();
}());

In this case the closure is used to prevent the function from polluting the global scope (window.foo will not be set). This allows multiple scripts to use the same function names without worrying about being overridden.

---

OOP Syntax

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 new keyword when the function is called:

function foo() {...}
var f = new foo(); //don't do it this way

For readability/maintainability/consistency you should always name your constructor using PascalCase:

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();

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 prototype property:

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