Four Critical Web Design Rules

JavaScript is a client-side scripting language that almost every web application uses. JavaScript does the tasks that server-side scripting can’t, like in-browser interactivity. For instance, if a user clicks a button and a popup appears, it’s faster and puts less stress on the web server to use JavaScript, which runs in the browser. Although JavaScript is similar to other scripting languages, it’s easy to fall into coding traps and create inefficient “spaghetti” code that’s buggy and disorganized.
Here are a few pitfalls for front-end developers to avoid when writing client-side web scripts in JavaScript.

1) Using the ‘if’ Statement Comparison Operator Incorrectly

Even experienced JavaScript programmers make this mistake as a typo in their statements and it can create a major logic bug in your code.
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.
Take this statement for example:

var x = 5;
if (x == 5)

The above statement does exactly what you’d expect: it evaluates if x is equal to 5. Since the result is indeed true, any statements within the ‘if’ clause are executed.
What happens if the developer makes a typo? Consider the following statement:

var x = 0;
if (x = 5)

Now the ‘if’ statement has a typo. Instead of using the comparison operator, the developer accidentally used the assignment operator. In some languages, this would throw an error, but not in JavaScript. If you’re not careful, you expect the result to evaluate to false, but instead, it evaluates to true.
Here’s another common typo:

var x = 5;
if (x = 1)

In Boolean notation, 1 is true and 0 is false. You would again think the result of this statement is false, but since 1 is equal to true, the result is true.
This type of logic error can be caught with testing, but always ensure that you’re using the comparison operator with your ‘if’ statements.

2) Remember the ‘+’ Symbol Is Addition and Concatenation

Not every language uses the plus symbol for both string concatenation and addition, but JavaScript does. This means that you must be careful how you use the plus sign when writing your statements.
Take a look at the following code:

var x = 10 + 5;

In the above code, the result of x is what you would expect: the x variable is equal to 15. With JavaScript, you use a mix of strings and numbers due to user input. Take a look at the following code:

var x = 10 + “5”;

The above code evaluates to “105,” because 5 is a string and the plus sign translates to a concatenation symbol when you work with strings. This often happens when you take form submission values as input and forget that user input can be evaluated as a string.
To avoid this issue, you need to convert the string value to an integer.

var x = 10 + parseInt("5", 10);

Now the string value is parsed to the integer value 5, and addition is used instead of concatenation.

3) Using Named Object Indexes as Arrays

In JavaScript, arrays use numeric integer indexes. You can also use objects similarly to arrays, but objects use named indexes. If you attempt to use a named index in an array, your code will return the wrong result.
Take a look at the following array:

var color = [];
color[0] = "blue";
color[1] = "purple";
color[2] = “orange”;
var x = color.length;
var y = color [0];


In the above code, an array named “color” is created. We assign colors to the first three indexes, then evaluate the length and assign the first color to the variable y. The variable x evaluates to 3 and the variable y contains the value “blue.” This is typical behavior for an array.
Now, let’s create an object named car:

var car = [];
car ["color"] = "red";
car ["make"] = "chevy";
car ["model"] = “corvette”;
var x = car.length;
var y = car [0];

The above code defines an object. You know it’s an object rather than an array because of the named indexes. The car has three named indexes that define it. The issue is with the x and y variables. Unlike the array, these values are undefined and don’t evaluate to valid results. The length property evaluates to 0 and y is assigned “undefined.”
When you work with these two data types, make sure you know which one you’re working with before you use certain calculations and properties.

4) Confusing Undefined and Null

In other languages, you can set null to variables. JavaScript uses undefined and null, but it defaults variables to undefined and objects to null. These values are assigned when an incorrect calculation is made or you assign a null reference to an object. For an object to be null, it must be defined, so you must be careful when you compare objects.
The following code will give you an error if the object is undefined:

if (object !== null && typeof object !== "undefined")
Always check if the object is undefined first, then identify if it’s null.
if (typeof object !== "undefined" && object!== null)

5) JavaScript Doesn’t Do Block-Level Scope

In many languages, you can define a variable just for your loop structure. You loop through a variable and it’s destroyed once the loop exists.
Take a look at the following code:

for (var j = 0; j < 11; j++) {
j = j + 1;
}
console.log ( j );

In the code above, most experienced developers would think that “j” would be null. In other languages, the j variable can be used in the “for” loop, but it’s destroyed after the loop is finished.
This is not true for JavaScript. In JavaScript, the output for the j variable would be 10. This can cause serious bugs in your code, and it’s common for new JavaScript developers to miss this language quirk that doesn’t exist in other scripts.

Read more at http://www.business2community.com/brandviews/upwork/5-common-javascript-programming-mistakes-tips-avoid-01711426#3MFvv3vdCgdPcX6G.97