JavaScript Common Mistakes

In previous chapter we have seen best practices to use in JavaScript code. Now we will see common mistakes made by JavaScript programmers.

This chapter summarize some common mistakes that JavaScript programmers often do by accidentally.

Accidentally Using the Assignment Operator

JavaScript programmers often use equal(=), sign in place of comparison operator in an if statement.

Example

Below if statement returns false as condition evaluates to false.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
var age=10;
document.getElementById("demo").innerHTML = Boolean(age == 18);
</script>

</body>
</html>

Download the code Run the code

Below if statement returns true as it assigns value to variable.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
var age=10;
document.getElementById("demo").innerHTML = Boolean(age = 18);
</script>

</body>
</html>

Download the code Run the code

Next if statement shown below always returns false.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
var counter=0;
document.getElementById("demo").innerHTML = Boolean(counter = 0);
</script>

</body>
</html>

Download the code Run the code

Loos Comparison

Comparison using == operator ignore data type of variables. This if statement returns true:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
var counter=0;
document.getElementById("demo").innerHTML = Boolean(counter = 0);
</script>

</body>
</html>

Download the code Run the code

Comparison using === operator data type is consider for equality. This if statement returns false:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
var age = 10;
var currentAge = "10";

document.getElementById("demo").innerHTML = Boolean(age === currentAge);
</script>

</body>
</html>

Download the code Run the code

Switch statement always uses === operator for comparison

This switch case statement evaluates.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>

var age=10;
switch(age) {
    case 10: alert('Your age is '+age);
}

</script>

</body>
</html>

Download the code Run the code

This switch case statement never match.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>

var age=10;
switch(age) {
    case "10": alert('Your age is '+age);
}

</script>

</body>
</html>

Download the code Run the code

Confusion in Addition and Concatenation

Addition means adding two numbers.

Concatenation means adding two strings.

Both operations uses same (+) operator. Because of this adding a number with string number will produce different result.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>

var age = 10;
var ageAfterTen = 10 + "10";   //result is 1010

document.getElementById('demo').innerHTML = ageAfterTen;

</script>

</body>
</html>

Download the code Run the code

Misunderstanding Floats

Numbers in JavaScript store as a 64 bit floating point number. So like other languages, JavaScript also has difficulty in with actual floating point values.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>

var a = 1.1;
var b = 2.2;
// addition
var c = a + b; // result is not 0.3

document.getElementById('demo').innerHTML = c;

</script>

</body>
</html>

Download the code Run the code

Break Statement in multiple lines

It is better to break statement in multiple lines.

document.getElementById('testele').innerHTML = 
'This is a test sentence';

Breaking a statement in the middle of string will not work and produce JavaScript error.

document.getElementById('testele').innerHTML = 'This is a 
test sentence';

Misplacing a semicolon

Misplacing a semicolon(;) at the end of if statement will result in unexpected results.

JavaScript allows to break statement in to multiple lines.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .