Javascript closures and side effects in plain English? (separately)

Question

I've been reading some JavaScript books and I always hear about closures and side effects. For some reason I can't understand what they really are. Can anyone explain to me what they are in plain English plus examples? (as you were explaining it to someone with the programming level of a graphic designer).

Answer 1

Side effects are the easier concept. A "pure function" is a function that maps its input value(s) into an output value function plus(x, y) { return x + y; }. A "side effect" is any effect other than that return value. So, for instance:

function plusWithSideEffects(x, y) {   alert('This is a side effect');    return x + y; }  

has the side effect of raising an alert dialog (and requiring user interaction). Every code function has some side effects (they all consume memory and take time, if nothing else), but when people talk about side effects, they are often most concerned with either IO (like the alert dialog above) or the writing of state that lives beyond the execution period of the function.

The challenge with side effects is that they make functions harder to reason about and to reuse. (It's much easier to reason and reuse functions that are as close to "pure functions" as possible, since they tend to "do one thing well.")

Answer 2

Functions with side effects do something other than returning a value (though they may do that as well). If you can replace all function calls for given arguments with the value for those arguments and the program has the same behavior, there are no side effects. This requires that the function always return the same value for given arguments.

That is, suppose f(1,2) == 12. If you can always replace f(1,2) with 12 and the program behaves the same way, then f has no side effects for those arguments. On the other hand, if in one place f(1,2) == 12 and another f(1,2) == 13, then f has side effects. Similarly, if the program stopped sending an email after replacing f(1,2) with 12, then f has side effects. Generally, if f(x,y) == z (where z depends on x and y) and you can always replace every f(x,y) call with z, then f has no side effects.

Some simple functions with side effects:

// doesn't always return the same value function counter() {     // globals are bad     return ++x; } // omitting calls to `say` change logging behavior function say(x) {     console.log(x);     return x; }