Access a global variable in a browser environment:
myglobal = "hello"; // antipattern console.log(myglobal); // "hello" console.log(window.myglobal); // "hello" console.log(window["myglobal"]); // "hello" console.log(this.myglobal); // "hello"
-
The problem with Globals
-
Naming collisions
-
Code not written by developers
? A third-party JavaScript library
? Scripts from an advertising partner
? Code from a third-party user tracking and analytics script
? Different kinds of widgets, badges, and buttons
-
Implied globals
meaning that any variable you don‘t declare becomes a property of the global object.
Solution - Use var to declare variable inside the function.
function sum(x, y) { var result = x + y; return result; } // antipattern, do not use function foo() { var a = b = 0; // a is local but b becomes global // ... } // The right way function foo() { var a, b; // ... a = b = 0; // both local }
-
-
portability
Code to run in different environments (hosts), it‘s dangerous to use globals because you can accidentally overwrite a host object that doesn‘t exist in your original environment (so you thought the name was safe to use) but which does in some of the others.
-
-
Side Effects when Forgetting var
Difference between implied globals and explicitly defined ones—the difference is in the ability to undefine these variables using the delete operator
? Globals created with var(those created in the program outside of any function) cannot be deleted.
? Implied globals created without var(regardless if created inside functions) can be deleted.
// define three globals var global_var = 1; global_novar = 2; // antipattern (function () { global_fromfunc = 3; // antipattern }()); // attempt to delete delete global_var; // false delete global_novar; // true delete global_fromfunc; // true // test the deletion typeof global_var; // "number" typeof global_novar; // "undefined" typeof global_fromfunc; // "undefined"
-
Access to the Global Object
Access the global object without hard-coding the identifier window, you can do the following from any level of nested function scope:
var global = (function () { return this; }());
-
Single var Pattern
? Provides a single place to look for all the local variables needed by the function
? Prevents logical errors when a variable is used before it‘s defined (see "Hoisting: A Problem with Scattered vars" )
? Helps you remember to declare variables and therefore minimize globals
? Is less code (to type and to transfer over the wire)
function func() { var a = 1, b = 2, sum = a + b, myobject = {}, i, j; // function body... }
Note: all uninitialized and declared variables are initialized with the value undefined
function updateElement() { var el = document.getElementById("result"), style = el.style; // do something with el and style... }
-
Hoisting: A problem with Scattered vars
JavaScript enables you to have multiple var statements anywhere in a function, and they all act as if the variables were declared at the top of the function.
// antipattern myname = "global"; // global variable function func() { // same as -> var myname = undefined; alert(myname); // "undefined" var myname = "local"; alert(myname); // "local" } func();