set THIS to current object inside array.prototype.reduce()

Question

I have a code which adds up a range of values. It takes two or three arguments and then create an array using those values and then add them up. My reduce object has a addup method which reduce its this.arr property using array.reduce() method. I have found that the THIS key indicates the global object inside reduce function. Why it indicates to global object inside reduce? How can I stick to the current object inside reduce using closure or something like that? I tried but couldn't find a way to figure this out.

There is nothing wrong with the code.It works fine.

addup method of reduce object:

addup:function(){

       this.sum= this.arr.reduce(function(previous,current,index,array){
            console.log(this);
            return previous+current;  

        });

    },

full code if required:

<html>
<body>
<script>
    var reduce={
        start:null,
        end:null,
        step:null,
        args:null,
        arr:[],
        sum:null,
        getrange:function(){
            if(arguments.length==2){
                this.args=arguments.length;
                this.start=arguments[0];
                this.end=arguments[1];
             }
            else if(arguments.length==3){
                this.args=arguments.length;
                this.start=arguments[0];
                this.end=arguments[1];
                this.step=arguments[3];

             }
        },
        setarr:function(){
            if(this.args==2){
                for(i=this.start;i<=this.end;i++){
                    this.arr.push(i);   

                }   

            }
            else if(this.args==3){
                for(i=this.start;i<=this.end;i+=this.step){
                    this.arr.push(i);   

                }   

            }

        },
        addup:function(){

           this.sum= this.arr.reduce(function(previous,current,index,array){
                console.log(this);
                return previous+current;  

            });

        },

        show:function(){
            console.log(this.sum);

        },
        cleanup:function(){
            this.arr.splice(0,this.arr.length);
            this.sum=null;

        }

    }
    reduce.getrange(1,5);
    reduce.setarr();
    reduce.addup();
    reduce.show();
</script>
</body>
</html>

unlike the other array methods, reduce() doesn't accept an optional _this_ parameter. you can bind, use that=this + closure, or use a wrapper function. — dandavis, Sep 10 '14 at 00:45

score 1 · Accepted Answer · answered Sep 10 '14 at 01:41

1

You can use bind to change the context of a function.

Live Demo

function callback(previous,current,index,array){
    console.log(this);
    return previous+current;  
}

[1,2,3,4,5].reduce(callback);

var myObject = {}; 
[1,2,3,4,5].reduce(callback.bind(myObject));

answered Sep 10 '14 at 01:41

Brandon Boone

16,281
4
73
100

thanks!! i have a question here .That is what do mean by 'context of a function??' – AL-zami Sep 10 '14 at 03:35
See this answer for a more detailed explanation: http://stackoverflow.com/a/20279485/402706 – Brandon Boone Sep 10 '14 at 11:14

score 0 · Answer 2 · answered Sep 10 '14 at 01:46

Just store a reference to this before performing this.arr.reduce() so that you can use it from inside the callback:

addup:function() {
    var self = this;

    this.sum= this.arr.reduce(function(previous,current,index,array){
        console.log(self);
        return previous + current;  
    });
},

set THIS to current object inside array.prototype.reduce()

2 Answers2