Javascript is quite an interesting language.

It's easy to pick up. It's one of the choices of languages for many "Learn to Code" websites like CodeAcademy. It's also easy to develop on. A simple text editor is enough for day-to-day coding. Another good reason to pick up Javascript is that there is a huge community behind it. If you look at the StackOverflow survey, the past 3 years has shown that Javascript is one of the most popular language of choice. A huge backing like this gives you great benefits like tutorials, libraries and much more.

It's not all rosy. Javascript also has a ton of quirks and gotcha's. I've worked with it for sometime and since I don't use it primarily, I occasionally get caught in a few of these gotchas. Here are a few useful things to note when working with Javascript:

No, it's not your type

If you're familiar with Java, when you make a function parameter, you normally specify (and expect) a type. This isn't a case in Javascript. If I were to make a function called Full Name that combines the first name and the last name of a person, I would expect two Strings.

//Sample code in Java
private String getFullName(String firstName, String lastName){
    var fullName = firstName + lastName;
    return fullName;
}

//Sample code in Javscript
var getFullName = function(firstName, lastName) {
    var fullName = firstName + lastName;
    return fullName; 
}

It looks similar enough and you may think they would function alright. That is until it blows up in your face because in the sample Javascript code, firstName and lastName could be of any type. They could be Strings (great!), integers (WTF), objects or who knows.

You can introduce some safety by doing type cheks using typeof. You can read about that here.

Source: Quora Answer

Function vs Var Function

In Javascript, there are two ways to make a function.

function doSomething(){} vs var myFunction = function() {}

WTF, right? This post answers it quite well. The first way is called Function Declaration and the other, Function Expression. To summarize the post, with the first method the code is run before any code is run. With function expression, the code is only run when it reaches that line.

Update May 1, 2018
A reader sent me a note saying this section could be improved. I'm going to quote them verbatim because they explain it better. Always appreciate these corrections so I can learn more about stuff. Thanks to the person that sent this in!.

I'd like to suggest a small adjustment in 'Function vs Var Function'.

• You state that 'function doSomething(){}' is run before any code is run.
• And that 'var myFunction = function() {}' is run only when it reaches that line.

• I think you may have gotten the wording off. What occurs is related to hoisting. Variable and function declarations are hoisted and declared before code is executed.
• If 'myFunction' is called before the line where it is defined it will fail. The same does not happen with 'doSomething' as it is hoisted and declared before code is executed.
• This means 'var myFunction' and 'function doSomething' get declared before any code is run. Or more succinctly 'myFunction' is declared and remains undefined but 'doSomething' gets declared and defined, neither are run. 'myFunction' won't get defined until it reaches the point in the code where its assignment is made before the variable was hoisted.

3 Equals is better than 2

I still fall for this one if I'm not careful. There are a couple of ways to compare things in Javascript. You can compare using the standard == and you might think everything is fine and dandy. That is true until something like this happens.

var num = 1;
var strNum = "1";

if (num == strNum)
  //do something standard
else
  //probably an error

Seems alright until you debug your code and notice num == strNum returns true. WTF Javascript. If you use == what happens behind the scenes is that Javascript will try to convert the values into the same type before doing any comparison.

Instead, what you should use is === (3 equals). This first checks if they are the same type (returns false if they are not of the same type) then only does it proceed to do a compare.

Source: Quora Answer

Oops, I overwrote the value

Since you're probably using some text editor and not some IDE, there are times when you mistype things. It's pretty hard to see on basic text editors. With that though, you may get situations like this.

var x = 5;
if (x = 5)
  //do something

Oops, we missed an equal sign. It should fail, right? No. WTF. It will always return true because in your if statement you assigned 5 to x then checked if x is equal to 5 (which would always be true).

//declared elsewhere in the codebase     
var myValue = 5;     

//your code
var doSomething = function(indicator) {
    if (indicator === true) 
       myValue = 10;
    else
       //some other code
}

If you happen to use the same name as a variable declared globally, be careful as you might overwrite it. Use a different name or better declare a new variable inside your function.

//declared elsewhere in the codebase     
var person //is an object with Name, address, etc   

//your code
var doSomething = function() {
    person = "Joe Smith";
}

Another example is that you might overwrite a whole object.

Source: A post in Quora, that I can't find at this moment and w3schools page

One Plus One is Eleven

Another thing to be careful of is when adding. Instead of adding, you may trigger a concatenation as well.

var num = 1;
var num2 = "1";
var result = num + num2; //equals 11

var x = 12;
var y = 3;
var result = x + y; //equals 15

var x = 12;
var y = "3";
var result = x + y; //equals 123

That seems all easy enough to see if you can see the variables you're using and what's manipulating it. What if you were doing something inside a function where the input is some other piece of code you didn't write? It becomes tougher to see the initial problem.

Not Just Null

Java is to Javascript as dog is to hotdog.

In Java there is null but in Javascript there is null and undefined. Undefined means that a variable has not been declared. Null means there is no value, empty or non-existent.

Sources: StackOverflow post, Another stackoverflow post

Conclusion

There's a lot of quirky things that happen in Javascript that seems strange and make you go WTF. It's important to be aware of them so you know what to do when you see it. I've only shown some things of interest to me but there are a ton more. I encourage you to check out the links in the next section and read up on it.

A lot more resources:

• http://www.toptal.com/javascript/10-most-common-javascript-mistakes
• https://www.airpair.com/javascript/posts/eleven-mistakes-developers-javascript
• http://www.standardista.com/javascript/15-common-javascript-gotchas/
• http://tutorialzine.com/2014/04/10-mistakes-javascript-beginners-make/
• http://www.w3schools.com/js/js_mistakes.asp