Loading Please Wait...

Logo Lynxsia IT Solutions

JavaScript Common Mistakes

JS Common Mistakes

This chapter points out some common JavaScript mistakes.

Accidentally Using the Assignment Operator

JavaScript programs may generate unexpected results if a programmer accidentally uses an assignment operator (=), instead of a comparison operator (==) or (===) in an if statement.

In regular comparison (==), data type does not matter. But in strict comparison (===), data type does matter.

					 
        
          let a = 0;
          if (a == 10) // returns false (as expected)
          if (a = 10)  // returns true (expected false)
          if (a = 0)   // returns false (expected true)

          let a = 10;
          let b = "10";
          if (a == b) // returns true (expected false)
          if (a === b)  // returns false (as expected)
        
      

It is a common mistake to forget that switch statements use strict comparison.

					 
        
          let a = 10;
          switch(a) {
            case 10: alert("Hello"); // show alert
          }

          switch(a) {
            case "10": alert("Hello"); // does not show alert
          }
        
      
Confusing Addition & Concatenation

Addition is about adding numbers. 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.

					 
        
          let a = 10;
          let b = 5;
          let c = a + b;  // Now c is 15

          let a = 10;
          let b = "5";
          let c = a + b;  // Now c is "105"
        
      
Misunderstanding Floats

All numbers in JavaScript are stored as 64-bits Floating point numbers (Floats).

All programming languages, including JavaScript, have difficulties with precise floating point values.

					 
        
          let a = 0.1;
          let b = 0.2;
          let c = a + b;  // the result in c will not be 0.3

          // Solution is
          let z = (x * 10 + y * 10) / 10;  // z will be 0.3
        
      
Breaking a JavaScript String

JavaScript will allow you to break a statement into two lines. But, breaking a statement in the middle of a string will not work.

You must use a "backslash" if you must break a statement in a string.

					 
        
          // Correct
          let x =
          "Hello World!";

          // Incorrect
          let x = "Hello
          World!";

          // Correct
          let x = "Hello \
          World!";
        
      
Misplacing Semicolon

Because of a misplaced semicolon, this code block will execute regardless of the value of x.

					 
        
          if (x == 19);
          {
            // code block 
          }
        
      
Breaking a Return Statement

It is a default JavaScript behavior to close a statement automatically at the end of a line.

					 
        
          // Correct
          function myFunction(a) {
            let power = 10 
            return a * power
          }

          // Correct
          function myFunction(a) {
            let power = 10 ;
            return a * power;
          }
        
      

JavaScript will also allow you to break a statement into two lines.

					 
        
          // Correct
          function myFunction(a) {
            let
            power = 10; 
            return a * power;
          }
        
      

But, what will happen if you break the return statement in two lines like this.

					 
        
          // Inorrect
          function myFunction(a) {
            let
            power = 10; 
            return
            a * power;
          }
        
      

The function will return undefined! Why? Because JavaScript thought you meant.

					 
        
          function myFunction(a) {
            let
            power = 10; 
            return;
            a * power;
          }
        
      
Accessing Arrays with Named Indexes

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays use numbered indexes.

					 
        
          const person = [];
          person[0] = "John";
          person[1] = "Doe";
          person.length; // person.length will return 2
          person[0];     // person[0] will return "John"
        
      

In JavaScript, objects use named indexes. If you use a named index, when accessing an array, JavaScript will redefine the array to a standard object.

After the automatic redefinition, array methods and properties will produce undefined or incorrect results.

					 
        
          const person = [];
          person["firstName"] = "John";
          person["lastName"] = "Doe";
          person.length; // person.length will return 0
          person[0];     // person[0] will return undefined
        
      
Ending Definitions with a Comma

Trailing commas in object and array definition are legal in ECMAScript 5.

					 
        
          person = {firstName:"John", lastName:"Doe", age:46,}
          points = [40, 100, 1, 5, 25, 10,];
        
      
Undefined is Not Null

JavaScript objects, variables, properties, and methods can be undefined.

In addition, empty JavaScript objects can have the value null.

This can make it a little bit difficult to test if an object is empty.

You can test if an object exists by testing if the type is undefined.

					 
        
          if (typeof myObj === "undefined") 
        
      

But you cannot test if an object is null, because this will throw an error if the object is undefined.

					 
        
          if (myObj === null) 
        
      

To solve this problem, you must test if an object is not null, and not undefined. But this can still throw an error.

					 
        
          if (myObj !== null && typeof myObj !== "undefined") 
        
      

Because of this, you must test for not undefined before you can test for not null.

					 
        
          if (typeof myObj !== "undefined" && myObj !== null) 
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved