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. — user1233508
– user1233508, Commented Nov 13, 2012 at 6:01

Community · Accepted Answer · 2017-05-23 12:26:23Z

38

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);
}

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Nov 13, 2012 at 6:13

user1233508

Sign up to request clarification or add additional context in comments.

Comments

Andrey Kuzmin · Accepted Answer · 2012-11-13 06:13:56Z

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, 2012 at 6:13

Andrey Kuzmin

4,4992 gold badges25 silver badges29 bronze badges

1 Comment

CJe Over a year ago

Works like charm! Thanks a million to all repliers :-)

mkoryak · Accepted Answer · 2012-11-13 06:09:28Z

1

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;
    }
};

answered Nov 13, 2012 at 6:09

mkoryak

58.1k64 gold badges204 silver badges262 bronze badges

Comments

JayCrossler · Accepted Answer · 2014-05-23 16:10:05Z

0

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);

answered May 23, 2014 at 16:10

JayCrossler

2,1372 gold badges23 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related