Accessing 'this' inside JS iterator's next() method?

Question

I'm currently working on a Eloquent JavaScript's object assignments and I'm wondering if there is any way that I can use this inside iterator's next() method (see the code)

class Group {
  constructor() {
    this.members = [];
  }

  add(member) {
    if (this.has(member)) return;
    this.members.push(member);
  }

  delete(member) {
    if (!this.has(member)) return;
    this.members.splice(this.members.indexOf(member), 1);
  }

  has(member) {
    return this.members.indexOf(member) !== -1
  }

  static from(iterable) {
    const group = new Group();
    for (const element of iterable) {
      group.add(element);
    }

    return group;
  }

  [Symbol.iterator]() {
    let current = 0;
    let last = this.members.length - 1;

    const that = this;

    return {
      next() {
        if (current <= last) {
          return {
            done: false,
            value: that.members[current++]
          }
        } else return { done:true }
      }
    }
  }
}

for (let value of Group.from(["a", "b", "c"])) {
  console.log(value);
}

As you can see there I'm using this weird const that = this pattern. Is there any way I can get rid of it? Besides using arrow function and extracting iterator to a separate class, as suggested in the solution.

score 2 · Accepted Answer · answered Jan 17 '19 at 20:40

The sortest way, could be an implementation of a default iterator of the object in the constructor section and use yield* expression for delegating to another generator of the array this.members.

constructor() {
    this.members = [];
    this[Symbol.iterator] = function* () {
        yield* this.members;
    }
}

class Group {
    constructor() {
        this.members = [];
        this[Symbol.iterator] = function* () {
            yield* this.members;
        }
    }

    add(member) {
        if (this.has(member)) return;
        this.members.push(member);
    }

    delete(member) {
        if (!this.has(member)) return;
        this.members.splice(this.members.indexOf(member), 1);
    }

    has(member) {
        return this.members.indexOf(member) !== -1
    }

    static from(iterable) {
        const group = new Group();
        for (const element of iterable) {
            group.add(element);
        }
        return group;
    }
}

for (let value of Group.from(["a", "b", "c"])) {
    console.log(value);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

This is actually a pretty nice approach! – JJWesterkamp Jan 17 '19 at 20:57 — JJWesterkamp, Jan 17 '19 at 20:57

score 0 · Answer 2 · answered Jan 17 '19 at 20:14

0

you can use the arrow function

class Group {
  constructor() {
    this.members = [];
  }

  add(member) {
    if (this.has(member)) return;
    this.members.push(member);
  }

  delete(member) {
    if (!this.has(member)) return;
    this.members.splice(this.members.indexOf(member), 1);
  }

  has(member) {
    return this.members.indexOf(member) !== -1
  }

  static from(iterable) {
    const group = new Group();
    for (const element of iterable) {
      group.add(element);
    }

    return group;
  }

  [Symbol.iterator]() {
    let current = 0;
    let last = this.members.length - 1;
    return {
      next: () => {
        if (current <= last) {
          return {
            done: false,
            value: this.members[current++]
          }
        } else return { done:true }
      }
    }
  }
}

for (let value of Group.from(["a", "b", "c"])) {
  console.log(value);
}

answered Jan 17 '19 at 20:14

jcal

871
5
14

There's no `this` in an arrow function. – zer00ne Jan 17 '19 at 20:45
@zer00ne he was asking to get rid of the `const that = this;` which is happening in the snippet – jcal Jan 17 '19 at 20:47
`next: () => { if (current <= last) { return { done: false, value: this.members[current++] }...` – zer00ne Jan 17 '19 at 20:48
1

yes? using the arrow function `this` will refer to the class (what he wanted) – jcal Jan 17 '19 at 20:49
Well, the console output speaks for itself. `this` is the context within which `group[Symbol.iterator]` was executed to obtain the iterator required for the `for ... of` loop: the correct class instance. – JJWesterkamp Jan 17 '19 at 20:53
Ok, now I see, my bad, – zer00ne Jan 17 '19 at 20:57

Accessing 'this' inside JS iterator's next() method?

2 Answers2