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;
}

Answer 3

Side-effect:

Think of a side-effect as something that does two things at once. For example:

Classic example of a side effect:

var i = 1;
var j = i++;

The side effect happens at i++. What happens here is j becomes 1 and then i gets incremented and becomes 2. In other words, two things happened and the side-effect was that i became 2.

Closure:

Visualize a chain of links like this: <><><><><><><>. Imagine that the name of this chain of links is called the scope chain. Then imagine that all these links connect objects together like this: <>object<>object<>object<>. Now, keep in mind the following:

(1) All scope chains begin with the global object.

(2) When a function is defined, a scope chain for that function is stored.

(3) When a function is invoked, it creates a new object and adds that to the scope chain.

Now, please look at the following example:

function counter () { // define counter
                   var count = 0;
                   return function () { return count + 1;}; // define anonymous function
                   };
var count = counter(); // invoke counter

In this example, when counter() is defined, the scope chain for counter looks like this: <>global object<>. Then, when counter() is invoked, the scope chain looks like this: <>global object<>counter object<>. After that, the function with no name (called an anonymous function) inside counter is defined and invoked. The scope chain for the anonymous function once invoked looks like this: <>global object<>counter object<>anonymous function object<>

Heres were the closure part comes in. If you notice, the anonymous function is using the variable count which was defined outside of it. The reason is because the anonymous function can access any variables defined in its scope chain. This is what a closure is, a function along with references to any variables in its stored scope chain.

However, in the above example, once the functions return, the objects created at invocation are discarded so there really is no point. Now look at the following:

function counter () { // define counter
                   var count = 0;
                   function f() { return count + 1;}; // define f
                   return f; // return f
                   };
var count = counter(); // invoke counter

In this example, I am returning a function named f and assign that to the variable count. Now the variable count holds a reference to the entire scope chain and it does not get discarded. In other words the variable count stores the scope chain like this: <>global object<>counter object<>anonymous function object<>. This is the power of closures, you can hold a reference to a scope chain, and call it like this: count().

Answer 4

Exemple

function outer() {
    var outerVar;

    var func = function() {
        var innerVar
        ...
        x = innerVar + outerVar
    }
    return func
}

When outer() die, function func() continue livе and this use practical

Answer 5

I am new to JavaScript, and will not try to talk of closures. However my newness to JavaScript makes me quite aware of the use of side effect that are impossible in my usual programming language (Erlang).

Side effects seem to be a usual way to change state in JavaScript. Take for example this example from the w3cschools.com website:

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

Here there is no input parameters or return value, instead the contents of the document get changed as they are global in scope to the function. If you were to write this in Erlang for example, the document would be passed in as a parameter, and the new document state would be returned. A person reading the calling program would see a document passed in and an altered document being returned.

Seeing functions called that to not return explicit new state should alert to programmer to probable use of sideeffects.

Answer 6

Mainly side effects are the interactions with the outside world from inside of the function. Some examples of the side effects are:- API Calls or HTTP requests, data mutations, Printing to a screen or console, DOM Query/Manipulation. Example :

var a = 12
function addTwo(){
   a = a + 2; // side-effect

}
addTwo()

Closures

According to MDN,

A closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Example :

function outer(){
  var a = 12; // Declared in outer function 
  function addTwo(){ // closure function
    a = a + 2; // acessing outer function property
    console.log(a)
  }
  addTwo();
 }
 outer()