Loop always returns last value of array

Question

Currently in TinyMCE 4 I'm trying to add emoticons as buttons in my toolbar.

The code below works fine, I can see all buttons in the toolbar:

var array = ['applause', 'bumping', 'cool', 'cry', 'grin', 'happy', 'laughing', 'notalking', 'sad', 'wink'];

    for (var i in array) {

        editor.addButton(array[i], {
            title: '',
            icon: true,
            image: 'img/smileys/'+ array[i] +'.gif',
            onclick: function() {
                editor.execCommand('mceInsertContent', false, '<img src="img/smileys/'+ array[i] +'.gif">');
            }
        });

    }

However, the array[i] in the editor.execCommand line, always return its value as wink (last value of the array). Meanwhile, the other two instances of array[i] in the code works just fine.

that is called function scope. – BeNdErR May 20 '14 at 22:12 — BeNdErR, May 20 '14 at 22:12

score 1 · Accepted Answer · answered May 20 '14 at 22:13

1

Close over i

for (var i in array) {
  new function(){
    var iCopy = i;
    editor.addButton(array[iCopy ], {
        title: '',
        icon: true,
        image: 'img/smileys/'+ array[iCopy ] +'.gif',
        onclick: function() {
            editor.execCommand('mceInsertContent', false, '<img src="img/smileys/'+ array[iCopy ] +'.gif">');
        }
    });
  }
}

answered May 20 '14 at 22:13

Travis J

81,153
41
202
273

Why the object constructor? Seems like needless overhead. – cookie monster May 20 '14 at 22:40
@cookiemonster - As opposed to (function(){ })()? I am not sure how much overhead it creates in relation to using an IIFE, however I am fairly certain that it is negligible. This way reads clearer to me. – Travis J May 20 '14 at 22:42
Fair enough. Just didn't know why you chose that approach. – cookie monster May 20 '14 at 22:52

Loop always returns last value of array

1 Answers1