Question

This may be a javascript 101 or Backbone 100 questions. But I feel comfortable in asking this beginning question and not being made fun of here 🙂

The following code snippet is from Code School’s Anatomy of Backbone JS course:

render: function(){ 
    this.collection.forEach(this.addOne, this);
} 

addOne: function(todoItem){
    var todoView = new TodoView({model: todoItem}); 
    this.$el.append(todoView.render().el);

}

The addOne function is being called from the render function. addOne function definition shows that one parameter “todoItem” is being passed to it. But if you look at the call to addOne from render, it does not show an argument/parameter being passed to it. How is it possible that the code works correctly?

Thanks in advance for your time.

Bharat

Answer 1

The first argument of the forEach function is a callback function, and the forEach function calls that function, handing in each element of the array as a parameter.

More visually, your call to forEach would lead to:

this.collection.forEach(this.addOne, this) -> 
           |this.addOne(this.collection[0], 0, this.collection)
           |this.addOne(this.collection[1], 1, this.collection)
           |this.addOne(this.collection[2], 2, this.collection)
           |this.addOne(this.collection[3], 3, this.collection)
           |this.addOne(this.collection[4], 4, this.collection)
           |...
           |this.addOne(this.collection[n], n, this.collection)

.. where n represents the last index of the array this.collection.

The function addOne will ignore the second and third parameters because addOne only specified one parameter. Also, this from addOne will be set to the this variable from render.

More details are available from the Mozilla Developer Network and MSDN.