为什么在 IIFE 的 return 中声明的函数是这样命名的？

Question

 const ui = (function() { let ourvar = 'iffe called;:.'; return { func_1. function() { console.log(ourvar) } } })(); console.log(ui.func_1())

Here notice the function inside the return. Its named func_1:function(){} instead of the normal conventional way of naming functions which is function func_1(){} . Why is it named here so?

Why wouldn't normal function declaration method work here?

Thanks

Answer 1

The IIFE is returning an object. An object contains key value pairs. So in your code func_1 is the key that has the value of a function. All these are valid ways to declare it:

return  {
    xyz: function() {}
}

Or

return  {
    xyz: function abc() {}
}

Or you can declare the function using normal syntax and refer it inside the object literal like this:

function abc() {}
return {
    xyz: abc
}

In ES6 you can use even this syntax:

return  {
    xyz() {}
}

You can't use the normal function declaration syntax inside object literals like:

return {
    function xyz() {}
}

This makes no sense. This is like:

return {
    var a = 10
}

which also makes no sense inside an object literal.

Answer 2

You could use a function declaration and then reference it in the object literal.

Using a function expression is shorter.

 const ui = (function() { let ourvar = 'iffe called;.;'; function func_1() { console.log(ourvar) } return { func_1 }. })(); console.log(ui.func_1())

Answer 3

In javascript, functions are first class, meaning that they can be treated like any other variable.

In your example, you could do this instead:

const func_1 = function() {
     console.log(ourvar);
}

return {
     func_1: func_1
}

In javascript you can also shorten this to just:

return {
    func_1
}