Best practice or advice in naming variables

[Buntafujiwaaa 4 Likes (Newbie)]

Hi Everyone, this is not a animation related question, just wish to get some advices or suggestions to name tweens animation.

How do you guys modularise your code or name your variables in terms of code readability.

For example,

var $object = $('.object');

This allows me to have a quick glance and know this is a jQuery or DOM element.

 

Currently im using something like this, so I can tell it's a animation type

var _obj = TweenMax.from($object, 0.6, { autoAlpha: 0, ease: Power1.easeOut });

But I really wish to use the underscore _ as a private method/function identifier. Do you guys prefix your animation var names?

Feel free to drop me any suggestion or advice
 

[PointC 8,599 Likes (Superhero)]

Hi Buntafujiwaaa 

 

I always use the $ character for jQuery elements, but rarely use an underscore. That's just me though. I think the best advice is be consistent. If you look through CodePen at some of the best coders work, you'll see how they do it. Here's a couple of our own masters:

 

GreenSock

http://codepen.io/GreenSock/

 

Blake Bowen

http://codepen.io/osublake/

 

Others may jump in with additional advice, practices and preferences.

 

Happy tweening.

[GreenSock 8,117 Likes (Superhero)]

I generally use an underscore for something that's "private" in terms of scope, though not local variables inside of a function. Just a stylistic choice, not "right" or "wrong". I'd be curious to hear other people's opinions as well. I don't do anything special to indicate that a variable is an animation (tween/timeline). I almost always name my timelines "tl" locally inside functions, and "master" for a master TimelineLite/Max if/when I'm nesting things. 

[OSUblake 9,990 Likes (Superhero)]

I always try to go for code readability. Computers have no trouble reading your code. Humans, not so much. So I try to be as descriptive as possible with naming.

 

My naming convention is nouns for objects, with pluralization for anything that might be a collection.

var box = $("#box");
var boxes = $(".box");
var numbers = [1,2,3,4];

And verbs for functions...

createBox();
getColor();
setColor("red");

I used to do the $ sign for jQuery/elements, but have started to move away from that since other libraries like Angular also use the $ sign, and that can cause confusion.

 

I avoid using underscores unless the intent is to signify that something is private, and you should not access it from outside the object. I also use lodash.js/underscore.js a lot, which uses underscores, so it helps to reduce confusion by limiting my underscore naming to only properties/methods on an object.

var foo = {
  _x: 0, // private
  get x() { return this._x; }, // public
};

.