0

I am just getting more into javascript and wandering what is the difference between 

var myfunc = function(){
  publicfunctions = {}
  publicfunctions.function1 = function(){do smthing and return}
  return publicfunctions 
}

and

var myfunc = function(){
  this.function1 = function(){do smthing and return}
}

It seems to me that both doing the same thing

Also can someone explain what is difference between

var func = (function myfunc(){ .. do smthing and return .. })();

and

var func = function myfunc(){ .. do smthing and return .. }
var newfunc = new myfunc()

Thanks

Liam
  • 27,717
  • 28
  • 128
  • 190
user3195616
  • 195
  • 2
  • 13
  • One is an IIFE, the other is storing the function and calling it separately. The difference is essentially nonexistent. The IIFE doesn't take up an identifier but that's usually irrelevant. – VLAZ Apr 30 '20 at 07:35
  • 1
    ALthough, to be perfectly honest, I'm trying to guess. The examples aren't very clear. Are you talking about IIFEs or did I misunderstand? – VLAZ Apr 30 '20 at 07:36
  • Also: `var newfunc = new myfunc()` this wouldn't work. There is no identifier `myfunc`. Can you provide clear and concise [mcve] because this one has errors and is not actually clear what you mean. – VLAZ Apr 30 '20 at 07:37
  • You should read up on javascript patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/ – Liam Apr 30 '20 at 07:38
  • the second need a binding of this, usually done with `new` as instance or with `bind`. it is not usable like the first, out-of-the-box. – Nina Scholz Apr 30 '20 at 07:39
  • 1
    I'd also suggest you read [What is a 'Closure'?](https://stackoverflow.com/questions/36636/what-is-a-closure/7464475). These all contain closures of some description, what you're actually asking about is patterns – Liam Apr 30 '20 at 07:40
  • 2
    @Liam `functional-programming`? I don't see the relevance of this tag here. There are functions, sure but not FP, as far as I can see. – VLAZ Apr 30 '20 at 07:42
  • it is more `OOP`. – Nina Scholz Apr 30 '20 at 07:44

1 Answers1

0

Let's go step by step.

  1. example:
    a) you define a function that returns an object (careful with variable declaration - you should declare it with var keyword in order to scope it to your function. That objects has a single property that points to a function. Never the less, your first function is assigned to a variable myfunc

    Now, if you try to call myfunc(), you'll get an object with single property function1. Nothing special here.

    b) you define a function again and assign it to myfunc variable, only this time it contains this keyword which assumes you're trying to utilize this function as a constructor. In this example, merely calling myfunc produce no output since you haven't returned anything from a function. However, calling a function with preceding keyword new will result in object creation. 

var myObj = new myfunc(); 
// `this` keyword now refers to myObj which means myObj can call `function1`
  1. example:
    a) On the righthand side is something that is called IIFE (or Immediately Invoked Function Expression). Basically means, a function expression that is created and executed, well, immediately. So func should receive whatever that function returns.

    b) Yet again, facing a constructor, only this time you actually assumed myfunc is a constructor when you added new keyword before myfunc execution. Creates an object to whic newfunc now points to and has authority over.

Note: In constructor functions (the ones that you call with new keyword), this is implicitly returned and no need for explicit return. Now, if you want to test it and return something else instead, I'll leave it up to you to explore and see what you'll end up with. :)

Since it's a broader topic in itself, I recommend this excellent book by Nicholas Zakas. It really answers a lot of JS questions.

Kox
  • 834
  • 7
  • 12