5 Common JavaScript Development Mistakes To Avoid

[damianwolf]

JavaScript is a dynamic language of the web and it is extensively embraced by the developers across the globe. In fact the popularity of JavaScript contributed to its great community.

<>

Currently — new libraries, frameworks, and tools are frequently released to make JavaScript more powerful and very useful in the hands of competent developers whereas its established resources are constantly improved over time.

JavaScript is the number one language on the active repository called GitHub.

This same trend can also be seen on LiveEdu.tv, where 48,567 JavaScript related videos were created by the user base of enthusiastic learners and engineers who want to improve their career and skills.

Many developers take advantage of JavaScript in their front-end journey but, there are common JavaScript development mistakes made by most beginners and experienced JavaScript programmers. In this article — we will go through some of the common mistakes so you can avoid making them as well in your development process.


1. Memory Management

Memory management is crucial when it comes to development, and this is valid when working with JavaScript too. Many developers make the mistake of not thinking about memory management at all. This can lead them to several problematic instances since their application will use more memory than intended, and can also run the risk of crashing the entire system. Majority of these development were done without taking memory leaks into consideration.

JavaScript is garbage collected language hence it provides all the tools that are required to handle memory effectively.

“Roots” is used to handle garbage collections in JavaScript. Roots is a global variable that stores the references to different sections of the code. To attain some effectiveness with the roots variable, Sweep-and-Mark algorithm are used. You can read more about memory management in JavaScript by following a simple guide by Mozilla.


2. ==(comparison) and =(assignment)

Comparison and assignment operators are commonly confused by JavaScript developers. It can happen due to a typo even from an experienced developer or by a beginner who is yet to discover the difference between the two operator.

The assignment operator (“=”) is entirely different with the comparison operator(“==”). The assignment operator takes care of assigning a value to the variable whereas the comparison operator compares two values, and return 1 or 0. The real problem occurs because JavaScript lacks an error mechanism to detect this type of mistakes, so it wholly depends on the developer to manage this issue. Let’s see an example below;

var x = 23;
if (x == 23){ do something; }

The above code will execute without any error. In the first statement, variable x will be assigned a value of 23. The second statement checks if the value of “x” is equal to 23. If it is true, the code under the condition will execute. Now, let’s take a look at the following line of code.

var x = 12;
If (x = 2) { do something; }

Now as you can see in the above code, a typo has been made. The value of x is now assigned to 2 after it was initially assigned to 12 in the first statement. There would be no error messages for this type of mistakes as the statement if (x=2) evaluates to true or 1, it will lead to a cascade of changes in the behavior for the rest in the code. Not desirable at all!


3. ‘+’ symbol acts as concatenation and addition

Another common mistake among JavaScript development is not properly using the “+” operator. The behavior of “+” changes according to the context in which it is used. Let’s take a look at two different scenarios.

Scenario 1

var x = 23 + 8;

The above statement will return 31 and store it to the variable x. All fine.

Scenario 2

var x = 23 + “8”;

The above statement will also execute, but the end result that will be stored in x is 238. Strange? Actually, not!


‘+’ operator works with strings as well, and hence the result is 238 and not 31.

It’s better to avoid the mistake by being self-aware, or you can simply use the parseInt() function every time you want to do addition when a user input is involved.

var x = 23 + parseInt(“8”, 23);

4. Undefined vs Null

JavaScript works a little different when it comes to undefined and null. It handles variables and objects differently and assigns variable to “undefined”, and objects to “null” especially when they are initialized for the first time.

If you don’t take care of the default assignment, errors can easily creep into your program. To ensure that you neglect the issues, you need to check if the object is not null and the type of object not undefined. Also, undefined check should be done first as shown the code below.

if (typeof object! == “undefined” && object!== null){do something;}

The above line of code will work fine. However, the following line of code will throw an error.

if (object!== null && typeof object!==”undefined”){do something;}

5. Mistakes with block level scopes

The last mistake that we are going to discuss is how JavaScript developers fail to understand the block level scopes. Unlike other programming languages, block level scopes don't work similarly as they do in other programming languages. Let’s understand it with the help of an example.

for (var i=0; i< 5; i++) {
    do something;
}
console.log(i);
 

The above lines of code will return the value of i as 5. Surprised? Don’t be as this is how JavaScript works at the block level. It carries the last known value and the life of a variable is not limited to the scope of the for loop. The behavior is popularly known as variable hoisting.

So, how do you work with this kind of behavior? You can use let keyword to your advantage which is now been released with the ECMAScript 6. You can check more about it in the detailed JavaScript variable tutorial.


Final Thoughts

That’s it! If you note them and ensure that these mistakes don’t carry on to your JavaScript development, and can save a lot of time!

What type of common mistakes do you make when coding in JavaScript? Let us know by commenting below!

[damianwolf]

Hi guys, any comment here? Each time I log in there is a lot of people around, but nobody is commenting. Any comment or suggestion will be highly appreciated...

[YanCoutinho]

Great tips! JavaScript devs will love it ;)