An interview question for web front-end interview

I had an interview question at today"s interview. It was something like this. I feel very roundabout. I hope you can take a look at it for me. Thank you.
the question is whether the 1 will be output three times below, and if not, can it be modified to implement it?

function newFun(a){
        return function(a){
            console.log(a)
        }
    }
function fun(a) {
    console.log(a)
    newFun((a)=>{
        console.log(a)
    })
}
fun(1)
Mar.04,2021

of course not. Human flesh will know it in one step. Skip the declaration and enter from fun (1) . Please follow the serial number

.
function newFun(a) {  // 2-1: newFun
    return function(a) {  // 3: a
        console.log(a);
    }
    // 4-0: newFun
}

function fun(a) {  // 0-1: fun1
    console.log(a);  // 1: a1
    newFun(a => {  // 2-0: newFun
        console.log(a);
    });
    // 4-1: newFun
    // 5-0: fun
}

fun(1);  // 0-0: fun1
// 5-1: fun

you can see that 1 is printed only once from beginning to end, and only the first console.log (a) in the function fun is executed, as the other two console.log (a) are in two functions as arguments and return values, respectively, but are not called. To make these two console.log (a) be executed, simply call the function to which they belong

function newFun(a) {  // 3-1: newFun
    return function(a) {  // 4: a
        console.log(a);
    }
    // 5-0: newFun
}

function fun(a) {  // 0-1: fun1
    console.log(a);  // 1: a1
    let brandNewFun = a => console.log(a);
    brandNewFun(a);  // 2: brandNewFuna1
    newFun(brandNewFun)(a);  // 3-0: newFunbrandNewFun
    // 5-1: newFuna11
    // 6-0: fun
}

fun(1);  // 0-0: fun1
// 6-1: fun

can be changed to this (a little perverted):

 function newFun(a){
            return function(a){
                console.log("3->"+a)
            }
        }
    function fun(a) {
        console.log("1->"+a)
        newFun(((a)=>{
            console.log("2->"+a)
        })(a))(a)
    }
fun(1);

run results

1->1
2->1
3->1

certainly will not output three 1s. First, the arrow function does not execute the parameter, and secondly, the a value after execution in the arrow function also needs to be returned, otherwise undefined, can look at where a comes from:

.
function newFun(a){
        console.log(`C: ${a}`);
        return function(j){
            console.log(`D: ${j}`);
        }
    }
    function fun(a) {
        console.log(`A: ${a}`);
        newFun(((i)=>{
            console.log(`B: ${i}`);
            return i;
        })(a))(a)
    }
    fun(1)

steps for major changes are:

    function newFun(a){
        return (a => {console.log(a + ">>>3")})(a);
    }

    function fun(a) {
        console.log(a + ">>>1");    //1
        newFun( (a => {console.log(a + ">>>2");return a})(a));
    }
    fun(1);

may be more roundabout. You can take a good look at the explanation on the first floor

.
 //Thunk
function newFun(...args){
        return function(fn){
            console.log(...args)
            return    fn.call(this,...args)
        }
    }
function fun(a) {
    console.log(a)
    newFun(a)((a)=>{
        console.log(a)
    })
}
fun(1)

function fun(a) {
    console.log(a)
    return function(a) {
        console.log(a)
    }
}
fun(1)

seems to have finally executed a console.log.


function newFun (a) {

    console.log(a)
    return function(a){
        console.log(a)
    }
}

function fun (a) {

console.log(a)
newFun(a)(a)

}
fun (1)


the original code does not output 1 3 times.

the following is an analysis of the execution process, which is manually diff to make it easy to see what changes have been made to the original code.

function newFun(a) {
+   a() // 3: aa2newFun
    return function(a) { // 5: 
        console.log(a) // 7: 1anewFunaa6
    }
}
function fun(a) {
    console.log(a) // 1: 1

-   newFun((a)=>{
-       console.log(a)
-   })
+   newFun(()=>{ // 2: newFunnewFun
+       console.log(a) // 4: 1
+   })(a) // 6: newFun5aa1
}

fun(1) // 0: fun

the following code can be copied directly for those who want to interrupt to learn about the execution process.

function newFun(a) {
    a() // 3: aa2newFun
    return function(a) { // 5: 
        console.log(a) // 7: 1anewFunaa6
    }
}
function fun(a) {
    console.log(a) // 1: 1

    newFun(()=>{ // 2: newFunnewFun
        console.log(a) // 4: 1
    })(a) // 6: newFun5aa1
}

fun(1) // 0: fun
Menu