[Old Pedant]

Let's take them one at a time.

First of all, understand this: Whatever the callback function *RETURNS* for each element it is called for is what ends up in the OUTPUT array. Anything the function does to the *ORIGINAL* array has *NO IMPACT AT ALL* on what happens to the output array.

SO;

var Barr  = Aarr.forEach( function(element) { return element + 1; } )

You are not changing any elements of the Aaar array; you are returning each element + 1. So each element of Barr will be one greater than Aarr.

Great. That's what you expected. That's what you got.
*********

var BBarr = Aarr.forEach( function(element, array, index) { array[index] += 1; return element; } );

You are changing each element of the input array. But you are returning the *original* element value. So the output array (BBarr) will get a copy of the original array while, at the same time, each element of the original array is incremented by 1.

Remember: the value of element *IS* the ORIGINAL value of the element. Changing the element value inside the current (thiis) array does *NOT* impact the value of element.

I *THINK* that what you *MEANT* to do here was

var BBarr = Aarr.forEach( function(element, array, index) { array[index] += 1; return array[index]; } );

Do you see the *HUGE* difference that makes? Here, you IGNORE the original value of element and go fetch it again as the return value. You could have also written this as

var BBarr = Aarr.forEach( function(element, array, index) { return ++array[index]; } );

************

var Earr = Aarr.forEach( function(element, array, index) { array[index] *= 100; return element; } );

Same thing as with BBarr. You are modifying the input (this) array but returning the ORIGINAL element value, so Earr gets a copy of the input array before the modifications.