2023/10/19 - 10:11

1.) What will be console output upon clicking the button?
...
<body>
    <div id="Box">
        <button id="mybutton"></button>
    </div>
</body>
var parent = document.getElementById("Box");
parent.addEventListener("click", function() {
    console.log("box clicked");
});

var child = document.getElementById("mybutton", function() {
    console.log("button clicked")
})


D) Button is clicked → Box is clicked
Because event bubbling is the default behaviour for DOM elements, and no other behaviour was specified

2.) What will be the output of this code?
var promise = func1();
promise
    .then(function(result1){
        console.log(result1);
        return func2();
    })
    .then(function(result2){
        console.log(result2);
        return result2%10;
    })
    .then(function(result3){
        console.log(result3);
    });

function func1(){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve("Hello");
        }, 1000);
    });
}

function func2(){
    return new Promise(function(resolve,reject){
        setTimeout(function() resolve(50);},1000);
    })
}

Answer: Hello → 50 → 0. line 1 invokes func1, which gets resolveds t0 “hello” after a timeout. It goes into the then block and prints hello. Then it invokes func2 which resolves to 50 after a timeout. Execution then goes into the following then block with 50. console prints 50, then execution passes into the next then block with result2%10. That value is printed to console (0).

function exam(arg){
    return new Promise(resolve,reject){
        if(arg>50){
            resolve('Pass');
        }else{
            reject('Fail');
        }
    }
}
let promise = exam(60);
promise.then(function(result){
    console.log(result)
    return exam(20)
})
.catch(function(error){
    console.log(error)
    
    return 'Error'
})
.then(function(result){
    console.log(result)
    return exam(80)
})
.catch(function(error){
    console.log(error)
})


Answer: Pass Fail Error
when exam(60) is first called, it resolves to ‘pass’. This resolution gets passed to the first then block, which prints the result. then exam is invoked again with 20, which rejects to ‘fail’. since it failed, the catch block will be executed. the catch block will print the value returned, which is ‘fail’, then it will return the string ‘error’. the next then block receives the ‘error’ as a parameter, and prints it. then it invokes exam(80), but there is no console.log that prints the result of that.


function func1(num){
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve(num);
        },1000);
    });
}

async function multiply(num){
    const x = func1(10);
    const y = func1(3);
    return num * await x * await y;
}

multiply(10).then(function(result){
    console.log(result);
});

Answer: 300.

function func1(num){
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve(num);
        },2000);
    });
}

async function multiply1(num){
    const x = await func1(10);
    const y = await func1(3);
    return num * x * y;
}
multiply1(5).then(function(result){
    console.log(result);
});
async function multiply2(num){
    const x = func1(10);
    const y = func1(3);
    return num * await x * await y;
}
multiply2(2).then(function(result){
    console.log(result);
});

Which one will execute first?
If both await calls are in the same line, they will both start at the same time and the wait time will only be 2 seconds total, rather than 2 seconds for one followed by 2 for the other, as is seen in multiply1. Strategically combining your awaits is a good strategy for efficiency.
So multiply2 will execute first since the awaits are combined into a single line

Index