Difference between funct1: function versus funct1 function ()

Question

I often see code like the following in JavaScript:

func1: function() {
      return array1.pop();
    }

What is the difference between the above and something like this:

function func1 (){
         return array1.pop();
}

Are the above two the same thing with different way of writing? The first one looks like a switch statement to me. Sorry if this question is too simple but JavaScript books seldom uses the first syntax if this is just the matter of syntax issue; the main reason for me to ask this question in StackOverflow.

The first one will *also* be an error if it's outside of an object literal, did you mean an `=` instead of a `:` there? Or are you leaving off the surrounding context, which matters? — Dave Newton, Aug 13 '13 at 12:33

score 2 · Accepted Answer · answered Aug 13 '13 at 12:34

The first one is creating a property on an object literal. The property name is func1 and the property value is an anonymous function. For example:

var someObject = {
    someProp: function () { 
        alert('foo'); 
    }
};

someObject.someProp(); // alerts "foo"

For the second one you probably meant function func1 ..., which is a plain old function declaration. For example:

function someFunction() {
    alert('foo');
}

someFunction(); // alerts "foo"

Most people use object literals as a way of grouping logical functionality together, similar to namespaces in other languages. By defining functions as properties of other variables, you keep the number of variables in the global namespace down and the code more organized.

Based on your answer, In first case of your answer, I can write something like this to represent the same thing right....someObject.someProp=function(){alert('foo');} which should mean the same thing. Am I following this correctly? — Jack_of_All_Trades, Aug 13 '13 at 12:44
@Jack_of_All_Trades yes, that will append the property to the object and you would call it in the same way. — jbabey, Aug 13 '13 at 12:51

score 1 · Answer 2 · answered Aug 13 '13 at 12:37

The second form is that of a “normal” function declaration: the function is available within the scope in which you’ve declared it. The first form is used inside an object literal:

var myObject = {
    func: function() {
        return array1.pop();
    },
    name: 'John Smith'
};

The function can be called as myObject.func() whenever myObject is accessible. Aside from this difference in scoping, the two definitions of the function are equivalent.

score 1 · Answer 3 · answered Aug 13 '13 at 13:01

There is also a very important difference referred to as "function hoisting" (vague in terms of ECMA, but is a common term to describe the behavior).. This is directly related to the "second way" in original question namely -

function func1 (){
         return array1.pop();
}

There are two ways we may use functions (again wrt to second way):

As a function expression -

var a = function() {

}
As a function declaration

function a() {

}

As you know, all variables, no matter where in the function body they are declared, get hoisted to the top of the function behind the scenes. The same applies for functions because they are just objects assigned to variables. The only “gotcha” is that when using a function declaration, the definition of the function also gets hoisted, not only its declaration.

Difference between funct1: function versus funct1 function ()

3 Answers3