up

1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md

@@ -0,0 +1,43 @@
+
+The error occurs because `ask` gets functions `loginOk/loginFail` without the object.
+
+When it calls them, they naturally assume `this=undefined`.
+
+Let's `bind` the context:
+
+```js run
+function askPassword(ok, fail) {
+  let password = prompt("Password?", '');
+  if (password == "rockstar") ok();
+  else fail();
+}
+
+let user = {
+  name: 'John',
+
+  loginOk() {
+    alert(`${this.name} logged in`);
+  },
+
+  loginFail() {
+    alert(`${this.name} failed to log in`);
+  },
+
+};
+
+*!*
+askPassword(user.loginOk.bind(user), user.loginFail.bind(user));
+*/!*
+```
+
+Now it works.
+
+An alternative solution could be:
+```js
+//...
+askPassword(() => user.loginOk(), () => user.loginFail());
+```
+
+Usually that also works, but may fail in more complex situations where `user` has a chance of being overwritten between the moments of asking and running `() => user.loginOk()`. 
+
+

1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md

@@ -0,0 +1,38 @@
+importance: 5
+
+---
+
+# Ask loosing this
+
+The call to `askPassword()` in the code below should check the password and then call `user.loginOk/loginFail` depending on the answer.
+
+But it leads to an error. Why?
+
+Fix the highlighted line for everything to start working right (other lines are not to be changed).
+
+```js run
+function askPassword(ok, fail) {
+  let password = prompt("Password?", '');
+  if (password == "rockstar") ok();
+  else fail();
+}
+
+let user = {
+  name: 'John',
+
+  loginOk() {
+    alert(`${this.name} logged in`);
+  },
+
+  loginFail() {
+    alert(`${this.name} failed to log in`);
+  },
+
+};
+
+*!*
+askPassword(user.loginOk, user.loginFail);
+*/!*
+```
+
+