Skip to main content

Naming Booleans

Naming conventions are one of those little things that can become a big thing when you multiply the scale of the project and/or people involved.

I was just looking through some code yesterday, and I saw a variable with a fairly typical boolean name that followed the format isObjectState

This felt awkward to me, and I took a moment to consider why this is.

In Logic, a boolean is a statement that is either true or false. However, this variable name is written as a yes or no question. It is an easy misconception to equate true with yes and false with no, but though they are similar, they are not exactly the same, and, especially as programmers, we should not treat them as such.

When we expand our variables into full sentences, the awkwardness becomes more apparent. Especially when we insert them into control structures.

Let’s rename our variable to: is this menu item active?

So our control blocks will read:

if is this menu item active?, then highlight it.

while is this menu item active? do something.

Clunky, right?

My preference is to write booleans as a statement. Not only is this more lexically correct, it is more fluid. So our sentence becomes this menu item is active., which I would convert to a variable name such as menuItemIsActive or, simply isActive if it’s an object property. So now our control statements would look like this:

if menuitem.isActive then, highlight it.

while menuItemIsActive do something.

I know it’s just a minor detail, but it makes the code more readable, and is an easy convention to follow. Especially considering there’s zero additional effort required.

What about Hungarian Notation?

There’s a great (if somewhat old) blog post about using Hungarian notation and, in general, (making wrong code look wrong)[http://www.joelonsoftware.com/articles/Wrong.html].

I think Hungarian notation gets a bad wrap, particularly, as the article mentions, because it’s easy to do incorrectly. I know I’m guilty of it. But if used correctly and consistently, I think it is very helpful.

In this case, most of us would prepend a ‘b’ to indicate that the variable is boolean. But as the article mentions, the goal is not to indicate the type of the variable, so much as it is to indicate its compatibility and how it should be used in the code.

I think, in the case of booleans, we don’t need more than the statement. However, if your convention is to prepend a ‘b’, or even if you are keying off of ‘is’ as a prefix, that’s your call. What works best for you, and your team (meaning everyone and anyone who might touch that code), is ultimately what you should be doing.

Comments

Popular posts from this blog

Element.focus() in IE9 running Jasmine tests with Karma

I recently udpated our Jasmine unit tests to run in Karma ; expanding our browser coverage, adding code coverage reports , and using fixtures for testing DOM manipulation . One of my tests kept failing in IE9, but only when I ran from the console. If I attempted to debug in the browser, everything passed. It turns out that IE9 (at least) needed a few ms to catch it's breath before correctly focusing on the starting element. To do this, I just added a 100ms delay before each test ran (Using Jasmine 2.3). beforeEach(function(done){ loadFixtures('myfixture.html'); // Setting focus in IE requires a delay to work correctly! setTimeout(function(){ done(); }, 100); });

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line

Fanning Cards with CSS

I was thinking of fanning out some cards to demonstrate options for one of our sites, and I wanted to do it in CSS, so I came up with this (Plan for fall-back in non-supporting browsers is just a button that shows the options). The plan is to show all options in full when the stack is clicked on, but right now it just fans out on hover. This isn't anything terribly ground-breaking or difficult, but it is a nice, fun effect so I thought I'd share. Edit: I updated the link and code here to point to an updated version of the code that uses the css3 :target selector to spread out the cards when a link is clicked, and collapse them when it's closed. (See the full page example for better effect) See the Pen Fanning Cards by Thomas Pietrosanti ( @Rykus0 ) on CodePen . I used SASS to do handle some of the incremental and procedural parts, but did not leverage Compass, since I am not using it. Really, all I'm doing is absolutely positioning div s on top of ea