How to write Meteor template helpers correctly

Question

I'm not sure I understand the difference between (quotes around function name):

Template.year.helpers({
  'QueryHeader': function() {
    return Session.get('keyQueryHeader') + ' Attendees';
  }
});

and:

Template.year.helpers({
  QueryHeader: function() {
    return Session.get('keyQueryHeader') + ' Attendees';
  }
});

My IDE mentions something about a primitive value returned from constructor will be lost if when called with "new" if I don't use the quotes around the function name. If I use the quotes, it doesn't give me the warning. Both ways of writing the helper seem to do what they should. Should I use quotes around the name?

score 1 · Answer 1 · answered May 28 '16 at 01:37

When using quotes you can have names what contain special characters, spaces, etc:

var a = {
  'hello world': 'works!'
}

While this will throw Uncaught SyntaxError: Unexpected identifier

var a = {
  hello world': 'breaks'
}

See What characters are valid for JavaScript variable names?

The reason your IDE mention constructors is because there is a convention about writing constructors with uppercase first letter:

var myFunc = function() {};
var MyCons = function() {};

var myCons = new MyCons();

Season · Accepted Answer · 2016-05-28T03:09:10.210

The interested helper QueryHeader returns Session.get('keyQueryHeader') + ' Attendees', which is a primitive value of most likely type string. It's absolutely fine to return a string from a function. However, the function starts with a capital letter 'Q' and your IDE treats the function as a class constructor when it is not surrounded by quotes. In this case, the returned value from the constructor is the created instance regardless of what primitive value is specifically returned. For this your IDE gives the warning primitive value returned from constructor will be lost.

Simply put, I believe the following snippets match the behavior of your IDE.

// This gives the warning.
var s = {
    S: function() { return 'some string'; }
};

// These don't.
var s = {
    'S': function() { return 'some string'; }
};

var s = {
    S: function() { return {}; }
};

var s = {
    'S': function() { return {}; }
};

I see. So if I called the constructor with 'new', the string value is lost. If it returns an array or object (non-primitive value), the value isn't lost? — flimflam57, May 28 '16 at 13:38

How to write Meteor template helpers correctly

2 Answers2