what's wrong with my javascript scope

Question

pretty simple, how do i make my scope work in this example. the first reference of scope logs to the deck function, but the second one logs to the global window. how do i make the second refer to the deck like i want it to.

thanks!

http://jsbin.com/neqevo/1/edit?js

function Deck(){
    this.suits = [ // this is an array now
        {
            'suit': 'diamonds',
            'symbol': '&diamondsuit;',
            'color': 'red'
        }

    ]; // close suits

    this.cardValues = [
        {
            'name': 'ace',
            'face': 'A',
            'value': 1
        }
    ]; // close cardValues

    this.cards = [];

    console.log(this);

    this.suits.forEach(function(currentSuit){

        var scope = this;

        console.log(scope);

      // scope doesn't work.
      // obviously, scope references window
      // so how do i get it to refer to the deck like it's supposed to.
      // i looked into using call and apply, and even though the concepts 
      // made sense i couldn't figure it out.
      // fuck this is frustrating!

    });
}

Asked and answered many times here. See suggested duplicate. I suggest you read up on exactly how `this` works and what it means. — , Dec 10 '14 at 04:31

icktoofay · Accepted Answer · 2014-12-10T04:32:41.163

3

Either store a reference to this in the enclosing function and use that:

var me = this;
this.suits.forEach(function(currentSuit) {
    console.log(me.suits);
});

Or use bind:

this.suits.forEach(function(currentSuit) {
    console.log(this.suits);
}.bind(this));

Or use the second argument to forEach: (This is probably the best solution.)

this.suits.forEach(function(currentSuit) {
    console.log(this.suits);
}, this);

edited Dec 10 '14 at 04:32

answered Dec 10 '14 at 04:22

icktoofay

126,289
21
250
231

damn! i was so close. thanks for your help. – heyjohnmurray Dec 10 '14 at 04:27
1

Or use the second argument to `forEach`: `this.suits.forEach(function()..., this)`. – Dec 10 '14 at 04:29
@torazaburo: Ah! I didn’t know about that. I’ll edit that in. – icktoofay Dec 10 '14 at 04:32
@icktoofay, what makes the third solution the best? – heyjohnmurray Dec 10 '14 at 04:36
@heyjohnmurray: It looks the cleanest to me; you can continue using `this` in the inner function, but there’s no overhead from `bind`. – icktoofay Dec 10 '14 at 04:38

score 1 · Answer 2 · answered Dec 10 '14 at 04:22

1

U checked it like that (?):

 $this = this;
 this.suits.forEach(function(currentSuit){

    var scope = $this;

    console.log(scope);

});

answered Dec 10 '14 at 04:22

machei

337
2
16

score 1 · Answer 3 · answered Dec 10 '14 at 04:22

Save a reference variable to the deck scope first...

function Deck(){
    var self = this; // save a reference to the deck context

    this.suits = [ // this is an array now
        {
            'suit': 'diamonds',
            'symbol': '&diamondsuit;',
            'color': 'red'
        }

    ]; // close suits

    this.cardValues = [
        {
            'name': 'ace',
            'face': 'A',
            'value': 1
        }
    ]; // close cardValues

    this.cards = [];

    console.log(this);

    this.suits.forEach(function(currentSuit){

        var scope = self;

        console.log(scope);

      // scope doesn't work.
      // obviously, scope references window
      // so how do i get it to refer to the deck like it's supposed to.
      // i looked into using call and apply, and even though the concepts 
      // made sense i couldn't figure it out.
      // fuck this is frustrating!

    });
}

score 1 · Answer 4 · answered Dec 10 '14 at 04:28

One way to fix this is to pass "this" as a second argument to forEach. So if you edit

   this.suits.forEach(function(currentSuit){
      var scope = this;
        console.log(scope);
    });

to

  this.suits.forEach(function(currentSuit){
      var scope = this;
        console.log(scope);
    }, this);

then calling new Deck() will console log "Deck" in both cases.

what's wrong with my javascript scope

4 Answers4