Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Declaring variables without var keyword

At w3schools there is written:

If you declare a variable, without using "var", the variable always becomes GLOBAL.

Is it useful to declare global variable inside the function? I can imagine to declare some global variables in some event handler, but what is it good for? Better usage of RAM?

like image 856
xralf Avatar asked Jul 31 '11 09:07

xralf


People also ask

Is it necessary to use keyword while declaring variables?

In order to overcome the drawbacks caused by declaring the variables using the var keyword, we use the let keyword to declare the variables. The variables declared using the let keyword have block scope that is the scope of these variables is limited to the blocks in which they are declared.

What happens if we declare a variable * without * the VAR let keyword?

If you declare a variable, without using "var", the variable always becomes GLOBAL.

Is it necessary to use var keyword while declaring variable in JavaScript?

In the old, pre-ES6 era of JavaScript, developers used to declare variables using the keyword var or without any keywords. But times have changed! With ES6 (EcmaScript 2015), the beginning of the modern era in JavaScript, the language got two new keywords to help us declare variables. These are let and const .

What happens if you assign a variable without any keyword in JavaScript?

It will throw Reference error : x is not defined, when we assign a value to a variable without declaring it.


1 Answers

No, there's no RAM benefit or anything like that.

What w3schools is talking about is something I call The Horror of Implicit Globals. Consider this function:

function foo() {     var variable1, variable2;      variable1 = 5;     varaible2 = 6;     return variable1 + variable2; } 

Seems simple enough, but it returns NaN, not 11, because of the typo on the varaible2 = 6; line. And it creates a global variable with the typo'd name:

function foo() {     var variable1, variable2;      variable1 = 5;     varaible2 = 6;     return variable1 + variable2; } console.log(foo());     // NaN console.log(varaible2); // 6?!?!?!

This is because the function assigns to varaible2 (note the typo), but varaible2 isn't declared anywhere. Through the mechanics of the scope chain in JavaScript, this ends up being an implicit assignment to a (new) property on the global object (which you can access as window on browsers).

That's just a "feature" of loose-mode JavaScript, assigning to a completely undeclared identifier isn't an error; instead, it creates a propertly on the global object, and properties on the global object are global variables. (Up through ES5, all globals were properties of the global object. As of ES2015, though, a new kind of global was added that isn't a property of the global object. Global-scope let, const, and class create the new kind of global.)

My example is a typo, but of course, you could do it on purpose if you wanted. It's a clearly-defined part of the language, after all. So:

myNewGlobal = 42; 

...anywhere that myNewGlobal isn't declared will create the new global.

But I would strongly recommend never doing it in purpose: It makes the code hard to read and maintain, and that code will be incompatible with JavaScript modules when they become more common and widespread. If you really need to create a global variable from within a function at runtime (already a red flag, but there are valid reasons for it), do it explicitly by assigning to a property on window (or whatever refers to the global object in your environment; it's window on browsers):

window.myNewGlobal = 42; 

In fact, I'd suggest using ES5's strict mode. Strict mode makes assigning to an undeclared identifier an error rather than silently creating a global. If we'd been using strict mode, the problem with foo above would have been much easier to diagnose:

"use strict"; // Turns on strict mode for this compilation unit  function foo() {     var variable1, variable2;      variable1 = 5;     varaible2 = 6;                 // <=== ReferenceError     return variable1 + variable2; } console.log(foo());

Somewhat tangential, but in general I'd recommend avoiding globals wherever possible. The global namespace is already very, very cluttered on browsers. The browser creates a global for every element in the DOM with an id, for most elements with a name, and has several predefined globals of its own (like title) which can easily conflict with your code.

Instead, just define yourself a nice scoping function and put your symbols in it:

(function() {     var your, symbols, here, if_they_need, to_be_shared, amongst_functions;      function doSomething() {     }      function doSomethingElse() {     } })(); 

And if you do that, you might want to enable strict mode:

(function() {     "use strict";     var your, symbols, here, if_they_need, to_be_shared, amongst_functions;      function doSomething() {     }      function doSomethingElse() {     } })(); 

...which, as mentioned, has the advantage of turning assignments to undeclared identifiers into errors (along with various other helpful things).

Note that in a JavaScript module (added in ES2015, but only now beginning to find their way into the wild), strict mode is enabled by default. (This is also the case with class definitions, also new in ES2015.)

like image 187
T.J. Crowder Avatar answered Sep 29 '22 18:09

T.J. Crowder