object name same a function name?

Question

If We have

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

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

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.

Answer 2

Your function randomname() is redefining the randomname identifier, thus losing your reference to the object you constructed earlier. It may look more clear like this:

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

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

randomname();

It is like doing:

var a = 5;
var a = [20, 30];

console.log(a);  // returns [20, 30]

Answer 3

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

is roughly the same as this:

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

It's not 100% identical, since with the first syntax you can refer to functions "in the future", but this is basically how it works. There is only once namespace for functions and variables, since functions get assigned to variables.

Answer 4

I know this is an old post, but I found an example of how it works.

In fact, I believe sequelize.js does it with the following code:

var STRING = function(length, binary) {
  if (this instanceof STRING) {
    this._binary = !!binary
    if (typeof length === 'number') {
      this._length = length
    } else {
      this._length = 255
    }
  } else {
    return new STRING(length, binary)
  }
}

STRING.prototype = {
  get BINARY() {
    this._binary = true
    return this
  },
  get type() {
    return this.toString()
  },
  toString: function() {
    return 'VARCHAR(' + this._length + ')' + ((this._binary) ? ' BINARY' : '')
  }
}

Object.defineProperty(STRING, 'BINARY', {
  get: function() {
    return new STRING(undefined, true)
  }
})

You can see it in their docs for data types: http://sequelizejs.com/docs/latest/models#block-2-line-0. Notice Sequelize.STRING and Sequelize.STRING(1234)

Answer 5

forgive my pedant reply. your question is a bit confusing, or is this a tricky question. In the second line you wrote

var randomname.attribute....

if thats your point, then it is an illegal statement and will definitely throw an exception. But if your point is about the fourth line where you reused the same name.

note that you wrote

function randomname(){...}

instead of

var randomname  = function(){...}

I dont know why, but because you used a future function, you wont be able to override preexisting names. therefore randomname will still be a hash instead of a function, thus throwing an exception.

My question is, so what will happen to randomname function? How can we call it? Is it a wasted resource? As a general rule I always use

var randomname = function{..}

template so I am always assured that name conflicts wont happen so I never encounter this.

Answer 6

function also is actually an object(first class object) in JavaScript.

So you can do something like this.

var human = function(){
  alert("Hi");
};

// which is perfectly normal 

//but then

human.name="Anubhav";

And then you can do following:

human();//works
alert(human.name);//works