Different ways of declaring a function within a variable

Question

I'm curious about the following two methods of declaring functions within a variable in Javascript. What's the difference between the two function declarations below? Both seem to work. Are there any drawbacks to using one over the other? They seem to be constructed slightly differently when looking at the debugger.

In addition, I'm fairly certain the first method is called 'object literal notation'. Is there a formal name for the second method?

var myVar = {
    testProperty: 'testProperty',

    // Object literal notation?
    testFunc: function()
    {
        console.log('testFunc called');
    },

    // What's this called? 'Named function declaration'?
    testFunc2()
    {
        console.log('testFunc2 called');
    }
}

// Both work...
myVar.testFunc();
myVar.testFunc2();

The title should probably be "declaring a function as a property in an object literal". — , Feb 15 '16 at 03:35
@torazaburo—except that there are no function declarations here. ;-) — RobG, Feb 15 '16 at 05:16

Oriol · Accepted Answer · 2016-02-16T17:54:24.707

There are multiple ways to define properties (PropertyDefinition) in an object initializer (ObjectLiteral):

A "simple" PropertyDefinition

PropertyName_[?Yield] : AssignmentExpression_{[In, ?Yield]}

For example:

var obj = {a: 1};
obj.a; // 1

Method definitions

This includes getters and setters, added by ECMAScript 5

get PropertyName_[?Yield] ( ) { FunctionBody }
set PropertyName_[?Yield] ( PropertySetParameterList ) { FunctionBody }

For example:

var obj = {n: 0, get a() { return ++obj.n; }};
obj.a; // 1
obj.a; // 2

And also methods and generator methods, added by ECMAScript 6

PropertyName_[?Yield] ( StrictFormalParameters ) { FunctionBody }
* PropertyName_[?Yield] ( StrictFormalParameters_[?Yield] ) { GeneratorBody }

For example:

var obj = {a(n) { return 2*n; }};
obj.a(1); // 2
obj.a(2); // 4

PropertyDefinition using computed property names, added by ECMAScript 6

[ AssignmentExpression_{[In, ?Yield]} ] : AssignmentExpression_{[In, ?Yield]}

For example:

var prop = "a",
    obj = {[prop]: 1};
obj.a; // 1

"Shorthand" PropertyDefinition, added by ES6

IdentifierReference

For example:

var a = 1,
    obj = {a};
obj.a; // 1

They have different syntax and provide different functionalities, but the result is always the creation of a property in the resulting object. In your case, a method definition is basically the same as a "simple" PropertyDefinition where the AssignmentExpression is a function expression. However, with the later you can specify a custom name to the function.

Also see

The MDN link in particular was very helpful. Thank you. – shaunb Feb 16 '16 at 15:40 — shaunb, Feb 16 '16 at 15:40

score 0 · Answer 2 · answered Feb 15 '16 at 03:06

0

if you declare a function inside an object, that function is called the method of the object, but there are still called function, you should probably use the first method rather than using the second one

answered Feb 15 '16 at 03:06

0.sh

2,659
16
37

Why? The second is perfectly valid syntax, and shorter. That's why it was introduced. – Feb 15 '16 at 03:34
"*if you declare a function inside an object*" I think you mean if you assign a function to an object property. How the function is created (declaration or expression) doesn't really matter. – RobG Feb 15 '16 at 05:18

Different ways of declaring a function within a variable

2 Answers2