FED Interview

Question 1

let myObject Go 🧙‍♂️

Code:

- What would be the output? and why?

let myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log(this.foo);
        console.log(self.foo);
        (function() {
            console.log(this.foo);
            console.log(self.foo);
        })();
        (() => {
            console.log(this.foo);
            console.log(self.foo);
        })();
    }
};
myObject.func();

- What is the difference between the functions? When should we use each?

- What is hoisting? How does it help us?

- Is there a way to secure ourselves from hoisting?

JSBin

Explenation

Code - Explained

let myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log(this.foo);
        console.log(self.foo);
        (function() {
            console.log(this.foo);
            console.log(self.foo);
        })();
        (() => {
            console.log(this.foo);
            console.log(self.foo);
        })();
    }
};
myObject.func();

JSBin

Question 2

😴

Let's Implement a sleep function

Hint

/*
 * We want some function that would have the signiture below.
 * So that when called upon, execution would stop for "ms"amount
 */
function sleep(ms) {
  // ...
}

Examples

Different Implemetations

Answer 1
Bullet Two
Bullet Three

Explanations

- await implementation explaind

Question 3

Subtitle

Code:

for (var i = 0;  i < 5;  i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

What will we see on screen?

What will be the output when clicking on button 2?

How can we fix it?

Solution

Code:

for (var i = 0;  i < 5;  i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

What will we see on screen?

What will be the output when clicking on button 2?

How can we fix it?

5 Buttons - each labeled sequentially 1,2,3...

"5" - actually each button would give the same result - "5"

the "bug" is hidden in the "for (var = 0 ....)
var is hoisted - and the "console.log(i);" takes the last value in the hoisted "i"