Assigning an anonymous function to a variable in javascript

Question

I'm running this javasrcipt code on google chrome browser as an html script tag.

<script type="text/javascript">
    var bar=function() {
        var name='tanzeel';
        console.log('inside a function');
    }
    console.log('My name is ' +bar.name);
</script>

I'm coming from java and cpp background. My knowledge about oop says that function in js are instantiated as an object and here variable bar is pointing to that object. So I can access all the properties of that object. Then why console.log('My name is ' +bar.name) is printing My name is bar instead of the string My name is tanzeel. Please correct me where i am wrong and what else do i need to know. Thanks.

bar.name is accessing the name of the function. If you want a constructor, you need to use new bar() as well as assigning this.name, since var name is a function-scoped variable. — Andrew Li
– Andrew Li, Commented Jul 13, 2019 at 16:57
In ES6 you can use class keyword very similar to java classes. And try to avoid var instead use let or const — Hosar
– Hosar, Commented Jul 13, 2019 at 17:02
"Please correct me where i am wrong" you're mixing/confusing object properties with local variables. The only quirk here is that, in JS, functions have properties and methods too. like name like length (the number of arguments defined) call() and bind(), ... And that you can store functions/methods in variables and pass them around like any other value. — Thomas
– Thomas, Commented Jul 13, 2019 at 17:07

smac89 · Accepted Answer · 2019-07-13 17:01:48Z

3

Your variable may be "pointing" (dat cpp lingo ;)) to an object, but you can't just treat that object any how you want. The object is a function in this case, so you cannot treat the function's body as having fields in the sense of a regular class.

The output you get is the name of the function.

To have this work, you must instantiate the object using new keyword. You also have to assign properties to the class in order to access them.

var bar=function() {
    this.name='tanzeel';
    //console.log('inside a function');
}
var b = new bar()
console.log(b.name);

edited Jul 13, 2019 at 17:01

answered Jul 13, 2019 at 16:59

smac89

43.8k15 gold badges150 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanzeel Over a year ago

Oh. Which in my case is bar. Now I got it.

Quentin · Accepted Answer · 2019-07-13 17:03:33Z

There are two separate issues here.

First, functions are objects and can have properties. Variables defined in the scope of a function are completely different to properties of the function object. They exist only while the function is running (although c.f. closures) and are referred to directly and not in relation to the function.

Second, functions can have names. Typically this comes from an explicit name in the function expression:

var bar = function foo () { };

… but since a change in JS a few years ago, anonymous function expressions get a name from the variable that they are assigned to.

var bar = function () { };

The fact that you have a variable named name inside the function is unrelated to the function having a property called name.

antonku · Accepted Answer · 2019-07-13 17:07:18Z

1

When you assign string tanzeel to variable name, you don't change name property of the bar function. Instead you just create name variable in the lexical environment of bar function.

bar.name in console.log statement evaluates to bar because the function infers it from it's syntactic position

edited Jul 13, 2019 at 17:07

answered Jul 13, 2019 at 17:02

antonku

7,7252 gold badges18 silver badges22 bronze badges

Comments

Rohit Kashyap · Accepted Answer · 2019-07-13 17:08:45Z

1

The expected behaviour is understandable. This is because functions are treated as objects in javascript. Each object has a set of properties. Similarly, functions have a property name in their prototype chain which evaluates to the name of the function. Read more here: https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Function/name Also, check out the console in the image below. You can see a name property there inside the constructor.

answered Jul 13, 2019 at 17:08

Rohit Kashyap

1,5922 gold badges11 silver badges16 bronze badges

Collectives™ on Stack Overflow

Assigning an anonymous function to a variable in javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related