Good Javascript Variable names do make easy reading


(Mark Hunte) #1

This is a simple tip.

( The title points out Javascript Variable names but the below really applies to most things you name i.e Element ID names )

If you want others to look at your projects and help with Javascript or indeed you are helping with some Javascript.

Use Variable names that explain what the Variable is being used for.

This will help anyone who is interested in helping or learning from your javascript to be able to read the code and follow the intent.

It will also help you when you come back to follow your own code at a later stage.

Examples:

Harder to follow

var fsi = 0;
var lsi = window.sceneNamesForJumping.length - 1;
var cn = hypeDocument.currentSceneName();
var rn = cn;

var rsi = Math.floor(Math.random() * (lsi - fsi + 1) + fsi);

Easier to follow

 var firstSceneIndex = 0;
    var lastSceneIndex = window.sceneNamesForJumping.length - 1;
    var currentSceneName = hypeDocument.currentSceneName();
    var randomSceneName = currentSceneName;
  
  var randomSceneIndex = Math.floor(Math.random() * (lastSceneIndex - firstSceneIndex + 1) + firstSceneIndex)

;


Harder to follow

var c = document.getElementById('circle');
	var cr = c.getBoundingClientRect();
	var sq = document.getElementById('square');
	var sqr = sq.getBoundingClientRect();
	
	
	
		var crx = cr.left + (cr.width / 2);
		var cyc = cr.top + (cr.height / 2);
		var sqx = sqr.left + (sqr.width / 2);
		var sqy = sqr.top + (sqr.height / 2);
		var cd = (crx - sqx) * (crx - sqx) + (cyc - sqy) * (cyc - sqy);
		var thisD = Math.round(cd );

Easier to follow

  var circle = document.getElementById('circle');
	var circleRect = circle.getBoundingClientRect();
	var square = document.getElementById('square');
	var squareRect = square.getBoundingClientRect();
	

		var currentCircleXCenter = circleRect.left + (circleRect.width / 2);
		var currentCircleYCenter = circleRect.top + (circleRect.height / 2);
		var squareXCenter = squareRect.left + (squareRect.width / 2);
		var squareYCenter = squareRect.top + (squareRect.height / 2);
		var currentDistance = (currentCircleXCenter - squareXCenter) * (currentCircleXCenter - squareXCenter) + (currentCircleYCenter - squareYCenter) * (currentCircleYCenter - squareYCenter);
		var thisDistance = Math.round(currentDistance );

These are just short snippets of code. The longer the code the more harder it is going to follow what sqy is when it occurs mixed in to code 20 lines down or shows up in another function as a global variable.

Notice in the easier to read Variable names that some Variable names use more than one word and the first word starts uncapped and the next word is Capped.

This is camel humped syntax. And is used to aid readability of variable names.

dropPostName

is easier to read then.

droppostname

Any way I hope you get the idea and I know it is easy to try and just write something out in short as possible variable names. ( I slip myself) But trust me this will help us all in the end to help us all.