Dan Blair - Addicted To Technology

JavaScript Quirks

 

JavaScript is one of THOSE languages.. The ones where you’re both cool for using it and cool for not using it. I actually like it, although I am looking more into TypeScript lately. I do personally believe that everythign will move closer and closer to being all JavaScript all the time.

I’ve been working with JavaScript for a while and have been using it for different kinds of applications like mobile with Cordova and with frameworks like AngularJS. JavaScript is one of those languages which hurts your head sometimes. It has a lot of quirks, lets mess around with them.

The Truth

Obviously you have boolean expressions like every other language ever. true and false makes a lot of sense, it either is or it isn’t. Well other things are also truthy and falsy too. All of this nonsense is false.

undefined  
0  
obj.undefinedProperty  

Empty strings are also false. You can take all of these things and evaluate them. These will work even if they don’t immediately make sense out of context.

var obj = {  
    hat: 'Red'
}
if (obj.hat)  
    console.log(obj.hat);

This makes a lot of sense because the object has a hat and it is Red! Now since that was true, this must be false right?

var obj = {  
    hat: 'Red'
}

if (newobj.pants)  
    console.log(newobj.pants);

This is actually an error. Just because you can evaluate true for a variable being present doesn’t mean you can evaluate false for it’s absense. That would make way too much sense.

The way to check if a variable is undefined or not is to use the typeofoperator.

if(typeof myvar !== 'undefined') { // do whatever }```  

This makes perfect sense right?

wait-what-1

Equality

Ok so maybe truthy and falsyness isn’t super weird? Things can be true as much as you want but equality has to make sense. It is obvious that 1 = 1 so what could go wrong with this?

There are a few different ways to evaluate variables in JavaScript. You can use == + != which will check the value but not the type and === + !==(Apparently this is not triple equals) to make sure they are exactly the god damn same.

Based on this you get some obvious changes.

1 == 1 // -> true  
1 == ‘1' // -> true  
1 == 2 // -> false  

This makes some sense because 1 is not equal to 2, and 1 is actually ‘1’ even though one is a string and the other is an int, with == thats OK!… but look at this.

'' == false  

This is equal. So the boolean false is equal to an empty string. But it gets weirder.

null == undefined  

Null is not equal to undefined. These are 2 totally different things. Null is the absense of a value, undefined is literally that. So here, take this.

[] == false

This is true.. even though [] is not falsy.. WHAT?. Triple equals fixes some stuff.

// True
1 === 1  
1 === parseInt('1')

// False
1 === '1'  
[] === false
null === undefined  

As long as the type and value are identical it will be true, otherwise it is false. Triple equals is probably what you wanted every time you put ==.

equality

This

One of the most confusing parts of JavaScript is this. It can mean a couple different things. In any functions this refers to the owner of the function, so the function itself.

var book = {  
     title: 'The Call of Cthulhu',
     getTitle: function() {
          return 'Title: ' + this.title;
    }
}

book.getTitle();  

That makes perfect sense BUT this is also a reference to the element which triggered an event.

document.getElementById('boredcode').addEventListener('click',  
    function() {
          this.innerHTML = "I'm Bored!;
      });

So you can see where it starts to get confusing. The same keyword has 2 totally different meanings in 2 totally different contexts.

Conclusion

There are a lot more quirks. There is a really good article by Jim Cowart which goes into a lot more detail than I do, I just wanted to express some frustration with the quirks of JavaScript.

http://developer.telerik.com/featured/seven-javascript-quirks-i-wish-id-known-about/

Let me know what you think, what is your favorite JavaScript quirk.