이 문제들을 다 풀면 function binding, callback 정복!

출처 : 코드스테이츠

 

 function binding 

 

Q1. 다음 코드를 실행시키면 나오는 값은?

var name = "Window";

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

var bob = { name: "Bob" };

setTimeout(function() {
 alice.sayHi();
}, 1000);

Alice says hi, after 1 second

 

 

Q2. 다음 코드를 실행시키면 나오는 값은?

var name = "Window";

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

var bob = { name: "Bob" };

setTimeout(alice.sayHi, 1000);

Window says hi, after 1 second
//function 이 없어지면서 윈도우 객체를 받음 
//함수가 직접 실행되어서 그럼

박성용 엔지니어님 설명

setTimeout(함수, 시간) 2번문제에서는 alice.sayHi가 함수를 인자로 받는 부분에 위치에 있습니다.

즉, function() {alert(this.name + " says hi");} 를 가져오는 것과 같습니다.

자바스크립트에서 함수 호출시에 this는 전역객체에 바인딩 됩니다.

그러므로 this.name은 window가 되게 됩니다.

즉 setTimeout(alice.sayHi, 1000); -> 1초의 시간 뒤에 "Window says hi"가 출력 되게 됩니다.

Q3. 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); 

바인드는 지정만 call은 바로 실행됨
Alice says hi, after 1 second

 

Q4. 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);

 

 

Alice says hi, immediately

 

여기서의 setTimeout(alice.sayHi(), 1000); 또한 마찬가지로 setTimeout의 첫번째 인자인 함수 부분에 alice.sayHi()가 들어갑니다. 그런데 이번에는 함수가 아닌 ()를 사용하여 함수 호출을 넣어주었습니다.

이 때는 alice.sayHi()가 메서드로서 즉시 호출이 됩니다.

메소드 호출시의 this는 부모객체(해당 메소드를 호출한 객체)에 바인딩 됩니다.

그러므로 alice.sayHI()의 this.name 은 "Alice"가 됩니다.

또한 바로 실행되게 되므로, 딜레이 되는 시간 없이 즉시 "Alice says Hi"가 출력 됩니다.

Q5.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);

 

Bob says hi, after 1 second

바인드를 디스로 줌

디스네임이 밥이 되는거다

 

Q6.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);

//call이므로 즉시실행 

콜은 바인드랑 달리

밥을 바인딩하고 바로 실행시켜버려서

밥 세이하이로

딜레이 없이 즉시 실행됨

: 그럼 셋타임아웃에서는 콜을 못쓰는건가??

Bob says hi, immediately

 

Q7. 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);

 

 

//2번문제와 같음 
Window says hi, after 1 second

 

Q8. 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);

Bob says hi, after 1 second

Q9. 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);

메소드 호출이다.  

alice.sayHi.bind(bob); 이건 훼이크
Alice says hi, immediately

 

 

 Callback 

 

Q10(6-1). 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");

 

"hi!!"

 

코드스테이츠 엔지니어 박성용님 답변

함수 doubleUp(subject, "hi")는 콜백으로 받은 함수 subject에 "hi"를 대입하여 실행합니다.

여기서 doubleUp(subject, "hi")는 subject(subject("hi"))가 됩니다.

여기서 리턴된 값 "hi!"를 다시 subject 함수에 넣어 얻은 값 "hi!!"를 최종 반환하게 됩니다.

 

Q11. 6-2

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
)

10

 

6-3 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 })

25

 

6-4 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;
//42

function exercise(value, callback) { return callback(value); }
function exercise(x, f) { return f(x); }

function exercise(value, fn){
return fn(value)
}

 

6-5 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();

20

 

6-6 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();

 

10

코드스테이츠 엔지니어 박성용님 답변 : 

bar함수는 인자로 받은 callback을 0.5초 후에 실행 하게 되는데, foo함수 내부에서 실행되는 bar의 콜백함수는 var result에 foo()의 실행결과가 할당되고 난 뒤에 실행이 됩니다.

result에 foo()가 할당 되는 순간 data의 값은 10이됩니다.

단순하게 보자면 setTimeout으로 인해 딜레이가 생겨 바로 bar의 콜백함수가 실행되지 않게 되면서 foo함수 호출이 bar함수보다 더 빠르기 때문에 data는 10이 되며 result 또한 10이 됩니다.

이벤트 루프를 이해하고 계신다면 함수 실행시에 api로 넘어가 빨리 처리되는 순으로 callback queue에 쌓이고 call stack으로 보내지기 때문에 bar함수가 foo함수의 return data; 보다 늦게 실행됩니다.

 

 

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();

 

 

10