Generators OR Interesting question i was asked at some interview

Question

Recently im going a lot to various interviews. So here is one interesting question i was asked:
Can you write the "adder" function that can be called multiple times and return sum of all numbers passed so far?
Example:
adder(1) // 1
adder(4) // 5
adder(2) // 7
Yes i answered, it is easy:

let store = 0;
function adder(num) {
  return store += num;
}
console.log(adder(1)) // 1
console.log(adder(6)) // 7

But interviewer asked:
And will it be possible not to use outer scope variables? (And i understood that answer is Yes)
Im not good at interviews in general, so the answer i finally got with, was:

let adder = (() => {
  let store = 0;
  return num  => store += num;
})()
console.log(adder(1)) // 1
console.log(adder(6)) // 7

Which is pretty much the same idea only the "store" is store inside the "Adder" function (actually it is more resembles the object with property to me)

Generators

After the interview (and actually even after i received a reject from this place) i had a sudden thought:what about generators - can they help me is such a problem?
What is generator?
according to the MDN site: Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.
Which sounds exactly what is needed in my case, right?
After playing around i come with following code:

function* adder() {
 let i = 0
 while(true)  {
  i += yield i;
 }
}

const gen = adder();
gen.next()
console.log(gen.next(1).value);  // 1
console.log(gen.next(2).value);  // 3
console.log(gen.next(3).value);  // 6

Which is pretty much doing the same thing, only it has very different and complicated syntax...

Conclusion

In this post i tried to show how to build a function with a "state" (statefull). I solved a problem by using a closure;
Also i asked myself if generators can be helpfull here, and although the answer was not so clear, it was yet interesting to play with generators

My Implementation of Javascript "Bind"

Recently i was asked on some interview to implement "bind". So i think i will make a post dedicated to bind implementation.

What is a purpose of "bind" anyway?

Well, everybody knows that when you use a javascript you must use "this" keyword very carefully. In some cases - "this" (which called also execute context) can seem to "loose" its original meaning and have some unexpected value instead...

Example

Lets say you have a "Person" object in your code:

function Person(name) {
  this.name = name;
}
Person.prototype.showName = function() {
  console.log(this.name);
}

let person = new Person('Chubaka')
person.showName();
// will print "Chubaka" as expected

Simple and clear...
But!
What will happen if we will try to execute this method in response of some event, say clicking on document?

function Person(name) {
  this.name = name;
}
Person.prototype.showName = function() {
  console.log(this.name);
}

let person = new Person('Chubaka')
document.onclick = person.showName;
// will print "undefined" (WHYYYY???)

Why? because "this"(inside showName function) is no more populated with "person" object.
Instead (if we will try to debug and look closer at this "this") - we will find that like any event - the this now populated with the target of event(which is document)
This is where "bind" might be helpfull:
It attaches the context to function for the future execution:

let person = new Person('Chubaka')
document.onclick = person.showName.bind(person);
// will print "Chubaka" again

Implementation

Here is my implementation of bind (i called it "mybind")

  Function.prototype.mybind = function (context) {
    const that = this;// 'this' here is instance of "function" object
    return function() {// this function will be called in response to "click" event
      that.call(context)  // here the context will be passed           
    }
  }

Do we still Need "bind" in the era of ES6?

My answer is - No
Here is why:
You can write the same functionality using modern ES6 syntax:

  class Person {
    constructor(name) {
      this.name = name;
      this.showName = () => {
        console.log(this.name);
      }
    }
  }

let person = new Person('Chubaka')
document.onclick = person.showName; 
// chubaka is here again 
// (and no 'bind' needed)

See you in the next article!