Is it good practice to name a method of a objects property in JavaScript?

Question

I have heard having names for your anonymous functions helps with debugging.

JQuery:

$( "p" ).on( "click", function clickHndlr() {
    /* body...*/
});

Node:

var EventEmitter = require('events').EventEmitter,
    emitter = new events.EventEmitter();

    emitter.on('customEvent', function customEventHndlr (message, status) {
        /* body...*/
    });

Vanilla JS:

button.addEventListener('keypress', function buttonHndlr() {
    /* body...*/
});

But what about an object?

var starShipChecker = (function() {
   var publicAPI = { 
     checkForWarpDrive : function(starShip){
       if(!starShip.hasOwnProperty('warpDrive')) {
           starShip.warpDrive = undefined;
           console.log('Your star-ship, the ' + starShip.name + ', now has warp-drive!' + 
           '\n' + 'Use the addWarpDrive method to apply the maximum warp relevant to your ship Class...');
       } else {
           console.log('Your star-ship, the ' + starShip.name + ', has warp-drive already!' +
           '\n' + 'But use the addWarpDriveMaxLevel method to apply the maximum warp relevant to your ship Class...');
       }
     },
    addWarpDriveMaxLevel : function(){}
   };
   return publicAPI;

})();

Would you get the same benefit? Or is it different because they're methods?

checkForWarpDrive : function checkWarpDriveLikeYouWereScotty(starShip){  /* body...*/},
addWarpDriveMaxLevel : function addWarpDriveLikeYouWereScotty(){  /* body...*/}

Same thing. When looking at a stack trace, there's a good chance it will just say something like `anonymous function` if you don't give it a name. Whether you name all of your functions so you can see their names in the stack trace is up to you. Some people do, some people don't. — Mike Cluck, Oct 12 '16 at 21:15
Well, if an anonymous function has a name, it's not anonymous anymore, is it? — Feathercrown, Oct 12 '16 at 21:15
I would say that the benefit is gone since the methods aren't, at the end, anonymous. — Heman Gandhi, Oct 12 '16 at 21:16

score 4 · Accepted Answer · edited May 23 '17 at 12:33

4

Yes. Same benefits (and more) there.

However, engines/debuggers are getting increasingly more intelligent, and will implicitly name the function by the key of the object property they are part of. ES6 even requires that (check the .name property). But if you were using ES6, you'd probably be using a method definition anyway :-)

edited May 23 '17 at 12:33

Community

1
1

answered Oct 12 '16 at 21:17

Bergi

630,263
148
957
1,375

1

Just writing an answer saying the same thing. If you use the in browser debuggers then there shouldn't be an further information they can give you if it's named vs anonymous. Name them if you feel they need a name, otherwise you don't have to. – Mike Oct 12 '16 at 21:19
1

@Turk indeed - name them if they need a name. I'd say that in OP's case the various misspelt handlers are not actually that valuable. In the stack trace you'd already be able to see that an event called a function - it's _obviously_ a handler (or hndlr). Explaining that is not far off `i++ // inrease i by 1` - it's repeating information that is already known. Saying it's a "click" or "customEvent" handler doesn't clarify anything. – VLAZ Oct 12 '16 at 21:24
1

@vlaz that might be true for the native event (in the "vanilla" example), but it might not be so obvious for jQuery or Node's event emitters. A familiar name there helps to know where in the call stack your own code was called. – Bergi Oct 12 '16 at 21:27

Is it good practice to name a method of a objects property in JavaScript?

1 Answers1