Where does property when added to function object

Question

function foo()
{
       var a=5;
 }

Since above function is JavaScript object so we can add properties to it like foo.p=6 .But while doing console.log(foo) i am not able to see the p property of object but is accessible through foo.p and foo['p'].

Also i am not able to access foo.a if we consider foo as JavaScript object.

Answer 1

Try console.dir(foo); instead, which lists the properties of the object. concole.log simply outputs some representation of the value, the browser thinks would be useful.

foo.a can't work. a is a local variable, not a property, and only exist while foo is executed.

Answer 2

When logging an object, the browser will choose how to render it in the console. This may be as primitive as calling .toString() on it, or as complex as giving you the ability to navigate its properties.

Furthermore, the console is not a standard. Browsers may implement it however they like, although for convenience they will keep to a common style. Ultimately, however, this means they will be different.

Internet Explorer:

Google Chrome:

Notice how I had to use console.dir() to force Chrome to give me a navigable view of the object, rather than its simple .toString() representation.

Answer 3

"a" is a local variable, this not accessible from outside the function.

you'd like something like this:

var myClass = function(){
this.foo = 'bar';
}

var myInstance = myClass();
myInstance.foo // 'bar'

or as a plain object:

var myObj = {
foo: 'bar'
}

myObj.foo // 'bar'
myObj.foo = 123;
myObj.foo // 123

Answer 4

There are few ways of achieving that. One is using objects in Javascript and another one with the called "Module Pattern". For using objects, you can do:

function MyObject() {
  this.foo = "myObj";
}
var mo = new MyObject();
console.log(mo.foo); //Will print "myObj".

Module pattern works as below:

var MP = (function(){}(
  var foo = "MP";
  return {
    foo : foo
  }

));
console.log(MP.foo); // Will print "MP"