javascript - object name same a function name?

Question

If We have

var randomname = {};
randomname.attribute = 'something';

function randomname(){
  alert(randomname.attribute);
}
randomname();

Will javascript throw any errors?

---

Update
So, We know that we cannot have a object have the same name as a function.

Why is this?

Should javascript not be able to tell what you are after by the way you call it?

Answer 1

It should give you a TypeError exception -for trying to invoke an object-, the behavior observed in the Firebug's console is not right...

FunctionDeclaration's are hoisted to the top of their enclosing scope, your code is actually executing in this order:

// FunctionDeclaration is hoisted
function randomname(){
  alert(randomname.attribute);
}

// the var has no observable effect, because
// the randonmane identifier is already defined
randomname = {};
randomname.attribute = 'something';

randomname(); // TypeError, randomname is not callable.

When entering to an execution context, the Variable Instantiation process (aka Declaration Binding Instantiation in ES5) defines the properties on the Activation Object (AO, this is a non-reachable object that holds identifiers of variables, functions declarations and function arguments in the local scope) in the following order:

1. FormalParameterList identifiers (for Function Code)
2. FunctionDeclaration identifiers
3. VariableDeclaration identifiers

A VariableDeclaration will not overwrite an identifier has been already defined in the AO (e.g. by one of the first two steps), but the assignment will do it at run time.

For example:

(function (foo) {
  var foo; // doesn't affect the existing `foo` identifier
  return typeof foo;
  function foo () {}
})('string'); // yields "function"

But if an assignment is made, the value of the identifier will be replaced, for example:

(function (foo) {
  var foo = {};
  return typeof foo;
  function foo () {}
})('string'); // yields "object"!!

In the above example, when the function is invoked, -but before the code execution- the foo identifier is set up on the Activation Object (aka Variable Object).

First it gets assigned the value of the formal parameter, the value 'string', then all FunctionDeclaration's on the Function Body are examined, a function named foo is found, then the foo identifier will point to that function.

After that, all Variable Declarations are examined, we have one with the identifier foo, but its value is respected in this time -remember that the function hasn't been executed-.

At this point, the function is ready to be executed, its lexical and variable environment is setup.

The first thing that will be executed in the function, is the assignment foo = {};, which replaces the reference to the function that we had before.

Why it behaves differently on other browsers and Firefox?

Because:

1. The Firebug's console wraps your code before evaluating it.
2. The Mozilla implementations define a Function Statement

Since Firebug evaluates code by wrapping inside a with statement, this causes the FunctionDeclaration to be evaluated in statement context -a Mozilla's Function Statement-.

To show the behavior of the Function statement on Mozilla implementations, consider the following example:

if (true) {
  function foo () { return 'true!';}
} else {
  function foo () { return 'false??!';}
}

foo();

In Mozilla you will get 'true!', while in other implementations you will get 'false??!' - even on IE-.

That's because the function definition was made at run-time, in Statement context (in side the true branch of the if), while in other implementations, the function declarations are evaluated at parse time.

The above example should actually produce a SyntaxError exception on any implementation, but that doesn't happen on any of them...

A FunctionDeclaration should be allowed only, in global code or directly in the FunctionBody of a function.

A lot of people use interchangeably the terms Function Declaration and Function Statement but that's totally wrong, ECMAScript doesn't define a Function Statement, is a non-standard feature.

The specification has a brief note on this issue:

NOTE: Several widely used implementations of ECMAScript are known to support the use of FunctionDeclaration as a Statement. However there are significant and irreconcilable variations among the implementations in the semantics applied to such FunctionDeclarations. Because of these irreconcilable difference, the use of a FunctionDeclaration as a Statement results in code that is not reliably portable among implementations. It is recommended that ECMAScript implementations either disallow this usage of FunctionDeclaration or issue a warning when such a usage is encountered. Future editions of ECMAScript may define alternative portable means for declaring functions in a Statement context.

Try to run your code in the global execution context -in a simple <script> element- and you will see it crash also on Firefox:

<script type="text/javascript"> 
  var randomname = {};
  randomname.attribute = 'something';

  function randomname(){
    alert(randomname.attribute);
  }
  randomname();
</script>

You can find the above example here, make sure to open the Firebug's console and you'll see the same error you get on other browsers.