CODEWITHSUNDEEP
javascript
Ashenvale
Ashenvale

Reputation: 111

Different JavaScript function format

I've been wondering what is the difference between:

  1. function getBasicRow() {}
  2. getBasicRow : function() {}

I've seen the 2nd function used by vtiger CRM and hifive (http://www.htmlhifive.com/)

Upvotes: 1

Views: 142

Answers (2)

DarkHorse
DarkHorse

Reputation: 2770

An elobrative explanation that I found here and would like to share it.

The different ways in which a function can be defined in javascript are:

function A(){};             // function declaration
var B = function(){};       // function expression
var C = (function(){});     // function expression with grouping operators
var D = function foo(){};   // named function expression
var E = (function(){        // immediately-invoked function expression (IIFE) that returns a function
  return function(){}
})();
var F = new Function();     // Function constructor
var G = new function(){};   // special case: object constructor

What exactly is hoisting?

The interesting thing about these is that they are “hoisted” to the top of their scope, which means this code:

A();
function A(){
  console.log('foo');
};

Gets executed as this code:

function A(){
  console.log('foo');
};
A();

Which practically means that, yes, you can call the functions before they’re written in your code. It won’t matter, because the entire function gets hoisted to the top of its containing scope.

Variable declaration hoisting

Variable declarations are hoisted to the top of their scope, somewhat similarly to function hoisting except the contents of the variable are not hoisted as well. This happens with all variables, and it means it’s now happening with our functions, now that we’re assigning them to variables.

This code:

var A = function(){};
var B = function(){};
var C = function(){};

Will be executed as this:

var A, B, C;  // variable declarations are hoisted
A = function(){};
B = function(){};
C = function(){};

Therefore the order of setting and calling this type of function is important:

// this works
var B = function(){};
B();

// this doesn't work
B2();  // TypeError (B2 is undefined)
var B2 = function(){};

The second example gives us an error because only the variable B2’s declaration is hoisted, but not its definition, thus the “undefined” error.

Courtesy: DavidBCalhoun

Upvotes: 1

TGH
TGH

Reputation: 39248

The second one assigns the function to a property on some object literal, so the scope of the function is determined by the property.

The first one creates a named function without assigning it to a variable. The function will be hoisted to the closest function scope.

Upvotes: 3

Related Questions