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:
// it should be 'Id' not 'ID' getElementById('neveropen') != getElementByID('neveropen'); // 'neveropen' again does not equal 'GeeksForGeeks' getElementById('neveropen') != getElementById('GeeksForGeeks'); |
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:
// 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); |
Javascript is loosely typed, except in switch statements. JavaScript is NOT loosely typed when it comes to case comparisons.
Example:
var myVar = 5; if(myVar == '5'){ // returns true since Javascript is loosely typed alert('Welcome to neveropen'); } switch(myVar){ case '5': // this alert will not show since the data types don't match alert('Welcome to neveropen'); } |
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:
// the following is incorrect: function myFunction() { var myObject = { objProperty: "neveropen welcomes you", objMethod: function() { alert(objProperty); } }; myObject.objMethod(); } myFunction(); // the following is correct: function myFunction() { var myObject = { objProperty: "neveropen welcomes you", objMethod: function() { alert(this.objProperty); } }; myObject.objMethod(); } myFunction(); |
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:
// 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 |
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:
// the result in x is 30 var x = 5 + 25; // the result in x is '525' var x = 5 + '25'; |
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:
// Output will be 6 for(var i = 0; i < 5; i++){ setTimeout(function(){ console.log(i+1); }, 100*i); } |
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.
