• 1
  • 2
Home > Tips

JavaScript Traps You Should Mention

JavaScript is quite flexible to use by being a dynamic and weakly typed language. At the same time, however, it sets some hidden traps which can easily get you involved. So we should pay much attention on these JavaScript Traps.

 

 JavaScript Traps 1 - Global Variables

JavaScript manages the scopes by functions. Variables declared within a function are defined only within the body of the function, not useful outside of it. On the other hand, a global variable can be used directly whether it declared outside any function or not.

It is to say a global variable can declare Variables without using var, so it gives us a clear idea that var should be used as many as possible when variables are declared if you want to avoid implicit functions which could produce global variables.

However, you think everything is ok if youve used var? Look at this trap:

 

 <br />
function foo() {
<br />
    var a = b = 0;
<br />
    // body
<br />
}

 

 function foo() {
    var a = b = 0;
    // body
}

 

Maybe you are expecting to get two Local variables, but b is a global variable through and through. Why? Because the assignment operation is from right to left.

So this is equivalent to:

 

 <br />
function foo() {
<br />
    var a = (b = 0);
<br />
    // body
<br />
}

 

 function foo() {
    var a = (b = 0);
    // body
}

 

So b is a global variable.
Solution: Handle the variable declared one by one, not batch them.

 

 JavaScript Traps 2 - variable declaration

Firstly lets see this trap:

 

<br />
myName = global;
<br />

<br />
function foo() {
<br />
    alert(myName);
<br />
    var myName = local;
<br />
    alert(myName);
<br />
}
<br />

<br />
foo();

 

myName = global;
function foo() {
    alert(myName);
    var myName = local;
    alert(myName);
}
foo();

 

At first glance, it seems like the results what we expected is global and local, but in fact they are undefined and local. Why? Because in the same scope (or in the same function), variables declared will be extracted to the top of the scope and parsed first.

So the execution behavior of the part codes above should be like that:

 

 <br />
function foo() {
<br />
    var myName;
<br />
    alert(myName); // undefined
<br />
    myName = local;
<br />
    alert(myName); // local
<br />
}

 

 function foo() {
    var myName;
    alert(myName); // undefined
    myName = local;
    alert(myName); // local
}

 

You can use this example below to test if you really understand what is pre-parse:

 

<br />
if (!(a in window)) {
<br />
    var a = 1;
<br />
}
<br />

<br />
alert(a);

 

 if (!(a in window)) {
    var a = 1;
}
alert(a);

 

Variable a declared is extracted to the top of the code and is not assigned yet. In if statements, condition a in window is present ( a has been declared as a global variable), so computed result of the judgment staements is false and it will come out if statement, thats why the value of a is undefined:

 

<br />
var a; // undefined
<br />
console.log(a in window); // true
<br />

<br />
if (!(a in window)) {
<br />
    var a = 1; // not performed
<br />
}
<br />

<br />
alert(a); // undefined

 

 var a; // undefined
console.log(a in window); // true
if (!(a in window)) {
    var a = 1; // not performed
}
alert(a); // undefined

 

Solution: The best way is put varialbes declared to the top of the scope manually. As for the variables cant be assigned currently, we can declare them first and then assign them.

 

 JavaScript Traps 3 - function declaration

 

Function declaration is also put to the top of the scope, which is prior to any Expression and statement parsed and evaluated.

 

<br />
alert(typeof foo); // function
<br />

<br />
function foo() {
<br />
    // body
<br />
}

 

alert(typeof foo); // function
function foo() {
    // body
}

In contrast:
<br />
alert(typeof foo); // undefined
<br />

<br />
var foo = function () {
<br />
    // body
<br />
};

 

 alert(typeof foo); // undefined
var foo = function () {
    // body
};

 

After getting this point, will you get involved in this trap below?

 

<br />
function test() {
<br />
    alert(1);
<br />
}
<br />

<br />
test();
<br />

<br />
function test() {
<br />
    alert(2);
<br />
}
<br />

<br />
test();

 

 function test() {
    alert(1);
}
test();
function test() {
    alert(2);
}
test();

 

After running the codes above, we can see both of these popup windows are displayed 2, but why arent 1 and 2?
Its quite simple, the declaration of test is prior to the parsing of test() and the latter covers the former, so both of the results are 2
Solution: Most of the time, I recommend you to let function expressions replace function declaration, especially in some blocks.

 

Contact Us for Help

 

If you have problems when using our software, we want to hear from you. Send us an email that describes the problem you're having and include a screenshot if possible. [Support Email Address: support@slicemaker.com]

We promise to you we will solve whatever problem youre having within 24 hours.

 

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0