Let's talk about equality

Equality has been a major topic of discussion over the last few weeks. Whenever this topic comes up, I am always suprised how limited many people’s knowledge about true equality is. Relax everyone, I am talking about equality operators in JavaScript, and not the topic of national discussion recently.

Thinking back to some interviews I have been a part of recently, it became extremely obvious how little most Front End Web Developers know about the JavaScript equaltiy operators. You got that right, I said “operators” because there are two operators that test for equality between two objects, == and ===.

##==

This equality operator, called “double equals” for obvious reasons is the one that you run across frequently in many languages other than JavaScript, and it the only equality operator those other languages utilize. In JavaScript, this equality operator has a two step process that it takes to determine whether the values are equal. It first will check to see if the values are of the same data type. If they are both the same data type, it will do a simple comparison to see if the values are the same, returning true if they are, and false if they are not the same. However, if the values are not of the same data type, the JavaScript engine will attempt to convert the values into matching data types. If it is unable to do so, it returns false. If it is able to convert the values into matching data types, it will then check to see whether the values are equal, returning true if they are and false if they are not.

##===

This equality operator, called “triple equals” for obvious reasons is the one that you mainly will run across in JavaScript. Whereas the double equals tries to take the values and convert them into matching data types before comparing the values, the triple equals requires that the values be of the same data type as well as have the same value. This is important because it allows developers to perform basic sanity checks on the data that is being used for comparisons. "1" == 1 would result in true, whereas "1" === 1 would result in false. While this is a simple scenario that may not make much different either way, there are situations where this could have unintended consequences. For example, does "100" == true return true or false? If you are used to C++ or other related languages, you might expect it to return true since in those languages, any positive integer can represent true, and any negative integer can represent false, however, in JavaScript, it would return false.

There are many other scenarios where you may get unintended results with the == equality operator, so the general rule is that you should always use the === equality operator and use explicit conversions in your code to make sure that the values are of the same data type. This eliminates the strange variations in browsers and how they interpret their ability to convert data types and values for the == operator.

Tags:

Related Posts

May 14, 2014
2 minutes

Responsive Images with Picturefill 2.0

Responsive Web Design seems to be the way that the majority of websites will be developed in the near future. For a while, everyone was creating a separate website that catered to mobile devices in addition to the main website that desktop browsers were able to access. Web Developers and UX Designers quickly discovered that this was a less than ideal approach as it required maintaining two separate websites, and the mobile website tended to remove data that was visible on the desktop version of the site.

#responsive-web-design #javascript #performance
Read More
May 21, 2014
One minute

Window.Open Causes Browser Compatibilty Issues

One of the things that always annoys me as a web developer is when native browser functions that are accesible from JavaScript do not share the same function signature. One perfect example of this is the window.open function. When you are using non-Microsoft browsers such as Firefox and Chrome, you are able to make a call something like this window.open(url, 'window name', 'dimensions or other settings');. The window name parameter is important because it allows you to open multiple links in the same external window/tab. However, when using Internet Explorer, especially Internet Explorer 8 and older, you can only use window.open(url);. If you try to use the first type of function call, you get a very ambiguous error message in the browser that doesn’t tend to show exactly where the error occurred.

#internet-explorer #javascript #chrome
Read More
Apr 1, 2014
One minute

Hover Effects in JavaScript?

One of the things that can be annoying when looking at someone else’s code is when a more complex technology is used to solve a problem that can be handled more simply with another method.

An example of this is when you utilize JavaScript to implement a hover effect on some elements. I know of one scenario when you would need JavaScript to trigger a hover effect, and that would be when you want to trigger the hover effect with a touch event. However, in this case, the elements that would be affected by this hover effect are hidden on any mobile device, so the touch events would be unneeded for this hover effect.

#javascript #css
Read More