What is the scope of a function in Javascript/ECMAScript?

Question

Today I had a discussion with a colleague about nested functions in Javascript:

function a() {
   function b() {
      alert('boo')
   }
   var c = 'Bound to local call object.'
   d = 'Bound to global object.'
}

In this example, trials point out that b is not reachable outside the body of a, much like c is. However, d is - after executing a(). Looking for the exact definition of this behaviour in the ECMAScript v.3 standard , I didn't find the exact wording I was looking for; what Sec.13 p.71 does not say, is which object the function object created by the function declaration statement is to be bound to. Am I missing something?

Answer 1

This is static scoping. Statements within a function are scoped within that function.

Javascript has a quirky behavior, however, which is that without the var keyword, you've implied a global variable. That's what you're seeing in your test. Your "d" variable is available because it is an implied global, despite being written within the body of a function.

Also, to answer the second part of your question: A function exists in whatever scope it is declared, just like a variable.

Sidenote: You probably don't want global variables, especially not implied ones. It's recommended that you always use the var keyword, to prevent confusion and to keep everything clean.

Sidenote: The ECMA Standard isn't probably the most helpful place to find answers about Javascript, although it certainly isn't a bad resource. Remember that javascript in your browser is just an implementation of that standard, so the standards document will be giving you the rules that were (mostly) followed by the implementors when the javascript engine was being built. It can't offer specific information about the implementations you care about, namely the major browsers. There are a couple of books in particular which will give you very direct information about how the javascript implementations in the major browsers behave. To illustrate the difference, I'll include excerpts below from both the ECMAScript specification, and a book on Javascript. I think you'll agree that the book gives a more direct answer.

Here's from the ECMAScript Language Specification:

10.2 Entering An Execution Context

Every function and constructor call enters a new execution context, even if a function is calling itself recursively. Every return exits an execution context. A thrown exception, if not caught, may also exit one or more execution contexts.

When control enters an execution context, the scope chain is created and initialised, variable instantiation is performed, and the this value is determined.

The initialisation of the scope chain, variable instantiation, and the determination of the this value depend on the type of code being entered.

Here's from O'Reilly's Javascript: The Definitive Guide (5th Edition):

8.8.1 Lexical Scoping

Functions in JavaScript are lexically rather than dynamically scoped. This means that they run in the scope in which they are defined, not the scope from which they are executed. When a function is defined, the current scope chain is saved and becomes part of the internal state of the function. ...

Highly recommended for covering these kinds of questions is Douglas Crockford's book:

JavaScript, The Good Parts http://oreilly.com/catalog/covers/9780596517748_cat.gif

Javascript, The Good Parts, also from O'Reilly.

Answer 2

As I understand it, these are equivalent as far as scoping is concerned:

function a() { ... }

and

var a = function() { ... }

Answer 3

It seems important to note that while d is being created as a "global", it is in reality being created as a property of the window object. This means that you could inadvertently be overwriting something that already exists on the window object or your variable might actually fail to be created at all. So:

function a() {
    d = 'Hello World';
}
alert(window.d); // shows 'Hello World'

But you cannot do:

function a() {
    document = 'something';
}

because you cannot overwrite the window.document object.

For all practical purposes you can imaging that all of your code is running in a giant with(window) block.

Answer 4

Javascript has two scopes. Global, and functional. If you declare a variable inside a function using the "var" keyword, it will be local to that function, and any inner functions. If you declare a variable outside of a function, it has global scope.

Finally, if you omit the var keyword when first declaring a variable, javascript assumes you wanted a global variable, no matter where you declare it.

So, you're calling function a, and function a is declaring a global variable d.

Answer 5

...

function a() {
   function b() {
      alert('boo')
   }
   var c = 'Bound to local call object.'
   d = 'Bound to global object.'
}

without being preceded by var, d is global. Do this to made d private:

function a() {
   function b() {
      alert('boo')
   }
   var c = 'Bound to local call object.'
   var d = 'Bound to local object.'
}