Why is my variable undefined inside the Underscore.js each function?

Question

Here is my code:

TextClass = function () {
    this._textArr = {};
};

TextClass.prototype = {
    SetTexts: function (texts) {
        for (var i = 0; i < texts.length; i++) {
            this._textArr[texts[i].Key] = texts[i].Value;
        }
    },
    GetText: function (key) {
        var value = this._textArr[key];
        return String.IsNullOrEmpty(value) ? 'N/A' : value;
    }
};

I'm using the Underscore.js library and would like to define my SetTexts function like this:

_.each(texts, function (text) {
    this._textArr[text.Key] = text.Value;
});

but _textArr is undefined when I get into the loop.

Because `this` inside the callback is not the same as outside it. Use the third parameter to `each` to pass the context you want to have inside the callback. — DCoder, Nov 13 '12 at 06:01

score 38 · Accepted Answer · edited May 23 '17 at 12:26

In JavaScript, the function context, known as this, works rather differently.

You can solve this in two ways:

Use a temporary variable to store the context:

SetTexts: function (texts) {
  var that = this;
  _.each(texts, function (text) {
    that._textArr[text.Key] = text.Value;
  });
}

Use the third parameter to _.each() to pass the context:

SetTexts: function (texts) {
  _.each(texts, function (text) {
    this._textArr[text.Key] = text.Value;
  }, this);
}

score 6 · Answer 2 · answered Nov 13 '12 at 06:13

6

You have to pass this as context for _.each call like this:

_.each(texts, function (text) {
    this._textArr[text.Key] = text.Value;
}, this);

See the docs for http://underscorejs.org/#each

answered Nov 13 '12 at 06:13

Andrey Kuzmin

4,479
2
23
28

Works like charm! Thanks a million to all repliers :-) – CJe Nov 13 '12 at 12:49

score 1 · Answer 3 · answered Nov 13 '12 at 06:09

this in javascript does not work the same way as you would expect. read this article: http://www.digital-web.com/articles/scope_in_javascript/

short version:

the value of this changes every time you call a function. to fix, set another variable equal to this and reference that instead

TextClass = function () {
    this._textArr = {};
};

TextClass.prototype = {
    SetTexts: function (texts) {
        var that = this;
        for (var i = 0; i < texts.length; i++) {
            that._textArr[texts[i].Key] = texts[i].Value;
        }
    },
    GetText: function (key) {
        var value = this._textArr[key];
        return String.IsNullOrEmpty(value) ? 'N/A' : value;
    }
};

score 0 · Answer 4 · answered May 23 '14 at 16:10

Note that you can also pass things other that "this". For example, I do something like:

var layerGroupMasterData = [[0],[1,2,3],[4,5],[6,7,8,9],[10]];

_.each(layerGroupMasterData,function(layerGroup,groupNum){
    _.each(layerGroup, function (layer, i) {
            doSomethingThatComparesOneThingWithTheOverallGroup(layerGroupMasterData,layer);
    },layerGroups);
},layerGroupMasterData);

Why is my variable undefined inside the Underscore.js each function?

4 Answers4

Linked