JavaScript | Common Mistakes

JavaScript is an easy language to get started with, but to achieve mastery takes a lot of effort, time and patience. Beginners often make a few well-known mistakes that come back and bite them. In this article, we’ll cover some of the most common learning mistakes people make and find out how to overcome them. Many of these tips will be applicable outside of JavaScript or even web development.

Case Sensitivity



Variables and function names are case sensitive. And, remember that native javascript function and CSS properties in javascript are camelCase.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// it should be 'Id' not 'ID'
getElementById('geeksforgeeks') != getElementByID('geeksforgeeks'); 
  
// 'geeksforgeeks' again does not equal 'GeeksForGeeks'
getElementById('geeksforgeeks') != getElementById('GeeksForGeeks');

chevron_right


Using ‘IF’ Statement Comparison Operator Incorrectly

We’re talking about the “==” operator and the “=” operator. The first one does a comparison and the second assigns a value to a variable. The error created depends on the language. Some languages will throw an error, but JavaScript will actually evaluate the statement and return true or false.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// This if statement returns false (as expected) because x is not equal to 5:
var x = 0;
if (x == 5);
  
// This if statement returns true (not expected) and Assigns 5 to x:
var x = 0;
if (x = 5);

chevron_right


Javascript is loosely typed, except in switch statements. JavaScript is NOT loosely typed when it comes to case comparisons.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

var myVar = 5;
if(myVar == '5'){ 
  // returns true since Javascript is loosely typed
  alert('Welcome to GeeksforGeeks'); 
}
  
switch(myVar){
  case '5':
  // this alert will not show since the data types don't match
  alert('Welcome to GeeksforGeeks'); 
}

chevron_right


Forgetting to use ‘this’

Another common mistake is forgetting to use ‘this‘. Functions defined on a JavaScript object accessing properties on that JavaScript object and failing to use the ‘this’ reference identifier.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// the following is incorrect:
  
function myFunction() {
  var myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(objProperty);
        }
     };
  myObject.objMethod();
myFunction();
  
// the following is correct:
  
function myFunction() {
  var myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(this.objProperty);
        }
     };
  myObject.objMethod();
myFunction();

chevron_right


Undefined != null

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, null is an assignment value. It can be assigned to a variable as a representation of no value.
Example:


filter_none

edit
close

play_arrow

link
brightness_4
code

// undefined
let TestVar;
console.log(TestVar); // shows undefined
console.log(typeof TestVar); // shows undefined
  
// null
let TestVar = null;
console.log(TestVar); // shows null
console.log(typeof TestVar); // shows object
  
// it is clear that undefined and null are two distinct types:
// undefined is a type itself (undefined) while null is an object.
  
null === undefined // false
null == undefined // true
null === null // true

chevron_right


Confusing addition and concatenation

An addition is about adding numbers and concatenation is about adding strings. In JavaScript, both operations use the same ‘+’ operator. Because of this, adding a number as a number will produce a different result from adding a number as a string and a lot of beginners have confusion about this.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// the result in x is 30
var x = 5 + 25;  
  
// the result in x is '525'
var x = 5 + '25';  

chevron_right


Not understanding how scopes work:

A difficult concept for beginners to understand is JavaScript’s scoping rules and closures. Functions retain visibility to variables in their parent scopes. But because we are delaying the execution with a setTimeout, when the time comes for the functions to actually run, the loop has already finished and the I variable is incremented to 6.

The self-executing function in the comment works, because it copies the I variable by value and keeps a private copy for each timeout function.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// Output will be 6
for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i+1);
    }, 100*i);
}

chevron_right


Conclusion

The better you understand why and how JavaScript works and doesn’t work, the more solid your code will be and the more you’ll be able to effectively harness to the true power of the language and improve. Conversely, lack of proper understanding of JavaScript paradigms and concepts is indeed where many JavaScript problems lie.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.

About immukul

Executive Software Developer at Cavisson Systems