Check Point 4 - Function Binding, callback

socrative function/call,bind,등

1번문제

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(function() {
  alice.sayHi();
}, 1000);

Correct Answer:
Alice says hi, after 1 second

function이라는 함수 안에 method가 실행이 되어서 this는 alice가 됨.
여기서 sayHi가 Arrow function이 되면 window says hi가 됨.

2번문제- 틀림

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi, 1000);

Correct Answer:
Window says hi, after 1 second

여기서 method가 직접 실행이 되니까 this는 window가 됨.

3번문제

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi.bind(alice), 1000);

Correct Answer:
Alice says hi, after 1 second

bind는 this를 지정해줄 수 있다.
cf. call은 직접 실행이 됨.

4번문제 - 틀림

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi(), 1000);

Correct Answer:
Alice says hi, immediately

alice.sayHi()는 직접호출이라서 즉시 호출이 됨.
비동기로 함수를 걸어줘야 하는데 즉시 실행시켜버린 것이다..?

5번문제

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi.bind(bob), 1000);

Correct Answer:
Bob says hi, after 1 second

6번문제 – 틀림

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
setTimeout(alice.sayHi.call(bob), 1000);

Correct Answer:
Bob says hi, immediately

bind와 call apply의 차이를 잘 알자~~
call은 즉시 실행이 되어버림.

7번문제 – 틀림

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
bob.sayHi = alice.sayHi
setTimeout(bob.sayHi, 1000);

Correct Answer:
Window says hi, after 1 second

8번문제

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
var sayHi = alice.sayHi.bind(bob)
setTimeout(function () {
  window.sayHi()
}, 1000);

Correct Answer:
Bob says hi, after 1 second

9번문제 – 틀림

Question:
What message will eventually be alerted? After how long?

var name = "Window";
var alice = {
  name: "Alice",
  sayHi: function() {
    alert(this.name + " says hi");
  }
};
var bob = { name: "Bob" };
alice.sayHi.bind(bob);
setTimeout(alice.sayHi(), 1000);

Correct Answer:
Alice says hi, immediately

alice.sayHi.bind(bob);는 훼이크...

10번문제

Question:
After running the following code, what will be the value of result?

function doubleUp (f, x) {
  return f( f(x) );
};
function subject (value) {
  return value + "!";
};
var result = doubleUp(subject, "hi");

Correct Answer:
"hi!!"

11번문제

Question:
After running the following code, what will be the value of result? (You may look up JavaScript ternary operator if you need to.)

function eitherOne (f, g, x) {
  return (x % 2 === 0) ? f(x) : g(x);
};
var result = eitherOne(
  function (x) { return x + 5 },
  function (x) { return x - 5 },
  15
)

Correct Answer:
10

12번문제 - 틀림

After running the following code and all setTimeouts have run their callbacks, what will be the value of result?

var result = 10;
function wait (time, f) {
  setTimeout(function () {
    result = f(result);
  }, time);
}
wait(500, function (x) { return x + 5 })
wait(250, function (x) { return x * 2 })

Correct Answer:
25
wait(250)이 먼저 실행 되고, 그다음에 wait(500)이 실행됨.

13번문제 - 틀림

Question:
Using the concept of callbacks, write the exercise function so that result will equal 42.

function exercise(???) {
  ???
}
var a = exercise(10, function (x) {
  return x + 2;
});
var b = exercise(15, function (x) {
  return x * 2;
});
var result = a + b;

Correct Answers: 아래 둘중 아무거나
function exercise(value, callback) { return callback(value); }
function exercise(x, f) { return f(x); }

14번 문제

Question:
After the following code runs, what will be the value of result?

function foo () {
  var data = 10;
  bar(function (players) {
    data = players;
  });
  return data;
}
function bar (callback) {
  callback(20);
}
var result = foo();

Correct Answer:
20

Callback 함수로 인해서 data는 재할당이 됨.

15번문제

Question:
After the following code runs and all setTimeout callbacks run, what will be the value of result?

function foo () {
  var data = 10;
  bar(function (players) {
    data = players;
  });
  return data;
}
function bar (callback) {
  setTimeout(function () {
    callback(20);
  }, 500);
}
var result = foo();

Correct Answer:
10

setTimeout에 500으로 걸려져 있어서
비동기 함수는 실행이 동기 함수 이전에 되지 않는다..?

16번문제

Question:
After the following code runs and all setTimeout callbacks run, what will be the value of result?

function foo () {
  var data = 10;
  bar(function (players) {
    data = players;
  });
  return data;
}
function bar (callback) {
  setTimeout(callback, 0);
}
var result = foo();

Correct Answer:
10
foo가 다 실행이 되고 나서 setTimeOut이 실행이 된다.

15번, 16번 문제는 event loop개념이 필요함.
Eventloop를 실행하게 되면 어쨌든 마지막에 실행이 된다.(?)
다시 찾아봐야함.

참고: 비동기 눈으로 확인하는 사이트