JS Example Tutorial: Beware of JavaScript code traps

The following code, do you know what the error is:

var g_bar = "Bar";
function foo (container, config) {
var container = container  document,
name = Config.name  "John Doe",
Islive = Config.islive  true;
var G_bar = G_bar  "";
if (G_foo) {/
* your code
*
/}
foo (document, {islive:false});

Please think carefully before you read down.

--To help you think about the brush screen start--

--To help you think about the end of the brush screen--

1. islive = config.islive true, when the passed-in value is likely to be 0, undefined, null, FALSE, "", and Nan these six falsy values, it is not appropriate to set the default value. A more insurance approach is to:

islive = "islive" in config? Config.isLive:true;

If you are a standalone variable, you can use:

Somevar = typeof Somevar!== "undefined"? Somevar:defaultvalue;

Note: In most cases, the use is sufficient, for example:

container = Container  document
name = Config.name  "John Doe"

Everything weighs.

2. var g_bar = G_bar "", the intention is to take the value of the global variable G_bar to the internal variable G_bar, the default is an empty string. However, the actual situation is equivalent to:

var G_bar;
G_bar = G_bar  "";

Obviously, the g_bar on the left side of the number is also an internal variable and is undefined, so var G_bar = G_bar "" is actually var G_bar = "" And does not satisfy the original intent of the code.

Thinking: The var container in code = Container document is there any problem? Why?

3. if (G_foo) {/* * code * * *, this section will error when executing. We all know that in JS, variables are not defined and can be used. But it must be clear that undefined variables are simply writable but unreadable. Like what:

G_foo = 2; Equivalent Window.g_foo = 2
var t = G_foo2;//unequal value is var t = Window.g_foo2, error

The specific reason can see the JavaScript operation mechanism shallowly:

Undefined variable means that in the ScriptObject variable table can not find, JS engine will be along the ScriptObject upvalue to look up, if not found, for write operation i = 1; Finally, it is equivalent to window.i = 1; A new property is added to the Window object. For read operations, a run-time error can occur if the trace is not found on the scriptobject of the global execution environment.

So the rigorous wording is:

if (Window.g_foo) {/
* your code */
}

Do not underestimate these nuances, sometimes it will make people crazy. But these nuances can easily be overlooked or misused. For example YUI 2.8R4, there is a genetic a long time bug:

var nothing = [];
// ....
Later:function (when, O, FN, data, periodic) {When
= when  0;
o = o  {};
var m = fn, d = data, F, R;
// ...
if (d &&! L.isarray (d)) {
d = [data];
}
f = function () {
m.apply (O, D nothing  );
};
// ...
}

When your calling code resembles Lang.later (delay[0], O, "show", index), if the index misfortune is base-0, then take 0 o'clock, M.apply (O, D nothing) will give you a "surprise". A more appropriate approach is similar to the one in YUI3:

// ...
if (! L.isarray (d)) {
d = [data];
}?
f = function () {
m.apply (o, D);
};
//...

For and && usage, a lot of JS books (both Chinese and foreign), are used to emphasize the flexibility of JS, including Douglas's "JavaScript The Good Parts" is also misleading.

Finally, I think that Ncz wrote today's writing maintainable Code, another example (and the theme of this article is not obvious, but it does have a relationship, to give you thinking):

var isboy = true;
Isboy = typeof isgirl!== "undefined"!isgirl:true;

Or a cool code:

var isboy = true;
(typeof isgirl!== "undefined") && (Isboy =  !isgirl);

However, the above two types of writing, whether from the length of the code or performance, are not as straightforward as the wording:

var isboy = true;
if (typeof isgirl!== "undefined") Isboy =  !isgirl;

Simple simplicity, is often the best.