0

I've recently been looking into what the new operator does when, particularly when used for creating a function. I've been playing around/testing what is returned from different function instantiation. Could you guys clear up a few questions I have regarding function instantiation:

I understand that you can create a function by doing either using the function keyword:

new function() { *statements*}

or by calling the function constructor:

new Function(*arg1, functionBodyString*);

I understand that using the new operator calls upon the function (constructor) to create a function (a function object). But I can also see that the function keyword is used as if it's creating an actual function in the same sense as other languages.

  1. Is the function keyword just syntax sugar for creating functions allowing you to declare the function body after the function creation, rather than passing in a set of statements as a string like you would with the Function contructor?
  2. When creating a function, does the Function() constructor call upon it's function body during its construction? I would assume so because creating a function this way has its inner functions available to it.
  3. What is the difference between function() and new function()? I've read there's no difference on here but the difference is that using the new operator makes all of its inner functions available (hence question 2) but not using it requires you to call upon that function for it's inner properties to instantiate. What's going on there?

Thanks! :)

P.S

To clear up question 2:

When I do

new function(){ this.myFunction = function(){ ... }}

the function 'myFunction' is available. But when I do

function(){ this.myFunction = function(){ ... }}

the function 'myFunction' is not available. Why is this? Is it because the new function/constructor executes the functions body? What is the new operator doing here to support this?

Brummy
  • 183
  • 1
  • 11
  • 2
    [`new` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) creates instances of objects, it doesn't create functions. – Teemu Jun 15 '16 at 18:31
  • 1
    @Teemu In JS, [every function is an object.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) – 4castle Jun 15 '16 at 18:33
  • 2
    @4castle sure, but the type of `function(){}` is "function" whereas the type of `new function(){}` is "object". If you call the constructor `new Function("console.log(1);")` you also get a function type. – le_m Jun 15 '16 at 18:37
  • @4castle Technically yes (callable object) but just try to call a "function" created like in the first snippet in the OP, that'll fail. – Teemu Jun 15 '16 at 18:42
  • I just learned that doing `new function() {}` is another way to do an [IIFE](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) (it's also possible to do `!function() {}()`) – 4castle Jun 15 '16 at 18:42
  • 2
    ...which builds an object, too, so better don't use it in place of "traditional" IIFEs :) – le_m Jun 15 '16 at 18:43
  • @4castle: no, [it's not](http://stackoverflow.com/q/10406552/1048572). – Bergi Jun 15 '16 at 18:47

2 Answers2

3

Is the function keyword just syntax sugar for creating functions allowing you to declare the function body after the function creation, rather than passing in a set of statements as a string like you would with the Function contructor?

No, it's not. The function keyword allows for closures, the Function cosntructor does not.

When creating a function, does the Function() constructor call upon it's function body during its construction? I would assume so because creating a function this way has its inner functions available to it.

I'm not sure what you mean by "call upon" here. It parses it, yes, it does not evaluate it, no.

Is it because the new function/constructor executes the functions body?

In new Function(…), there only is a function object created but nothing is executed. In new (function(){ … }) the new operator is executing the function, as if you did

var constructor = function() { … };
new constructor; // parenthesis are optional

What is the difference between function() and new function()? I've read there's no difference on here but the difference is that using the new operator makes all of its inner functions available (hence question 2) but not using it requires you to call upon that function for it's inner properties to instantiate. What's going on there?

function(…) {…} is a function expression or declaration.

new function(){ … } is an antipattern and should never ever be used.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1
  1. Using the keyword is actually the preferred way of instantiating a function, because it has lots of built-in optimizations. But i guess when it comes down to it, it is just syntatic sugar.

  2. When you use new the function gets called with a new object as its this context. With new your example doesn't call the function at all, so nothing gets done.

  3. They are very different. function(){} creates a function. new function(){} creates an object.

Think of new Date(). There exists function Date(){}, which is a constructor. It sets properties and methods on a new object.

It is probably worth reading up on how the new operator works.

Scimonster
  • 32,893
  • 9
  • 77
  • 89
  • Thank you for that. Also, using new Function () it returns a function type, rather than an Object. I thought it would return an object? Cheers :) – Brummy Jun 16 '16 at 22:05
  • 1
    Well, functions are objects so it returns a function object. – Scimonster Jun 16 '16 at 22:12