Question

The only difference I see in map and foreach is that map is returning an array and forEach is not. However, I don’t even understand the last line of the forEach method "func.call(scope, this[i], i, this);". For example, isn’t "this" and "scope" referring to same object and isn’t this[i] and i referring to the current value in the loop?

I noticed on another post someone said "Use forEach when you want to do something on the basis of each element of the list. You might be adding things to the page, for example. Essentially, it’s great for when you want "side effects". I don’t know what is meant by side effects.

Array.prototype.map = function(fnc) {
    var a = new Array(this.length);
    for (var i = 0; i < this.length; i++) {
        a[i] = fnc(this[i]);
    }
    return a;
}

Array.prototype.forEach = function(func, scope) {
    scope = scope || this;
    for (var i = 0, l = this.length; i < l; i++) {
        func.call(scope, this[i], i, this);
    }
}

Finally, are there any real uses for these methods in JavaScript (since we aren’t updating a database) other than to manipulate numbers like the following?

alert([1,2,3,4].map(function(x){ return x + 1})); // This is the only example I ever see of map in JavaScript.

Answer 1

The essential difference between map and forEach in your example is that forEach operates on the original array elements, whereas map explicitly returns a new array as a result.

With forEach you are taking some action with — and optionally changing — each element in the original array. The forEach method runs the function you provide for each element, but returns nothing (undefined). On the other hand, map walks through the array, applies a function to each element, and emits the result as a new array.

The “side effect” with forEach is that the original array is being changed. “No side effect” with map means that, in idiomatic usage, the original array elements are not changed; the new array is a one-to-one mapping of each element in the original array — the mapping transform being your provided function.

The fact that there’s no database involved does not mean that you won’t have to operate on data structures, which, after all, is one of the essences of programming in any language. As for your last question, your array can contain not only numbers, but objects, strings, functions, etc.