Why wrap everything into an empty function?


#1

Hi, I'm halfway through the Javascript course and there is one thing that I don't get, maybe someone has an explanation:
what is the use of writing a loop or any other command into a function with no parameters like they do here all the time?

like this example in 10:
var getToDaChoppa =** function(){**
// Write your do/while loop here!

};

getToDaChoppa();

i mean one step before that they didn't use the function() -
var loopCondition = false;

do {
console.log("I'm gonna stop looping 'cause my condition is " + loopCondition + "!");
} while (loopCondition);

so there is obviously no real need to write it like that. Anybody knows why?


#2

Evary time we are able to write a single abstract to replace numerous repetitions, we are making our program more re-usable. Consider this basic task...

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Five lines of code and ~80 bytes of text. It printed a list of numbers from 1 to 5. Five screen bytes for 80 bytes of code. If we want that list again, we have to retype the code.

The first improvement on this is the loop construct. Wrap the repetive code in a loop structure and remove the repetition.

for(var i=1;i<6;i++){
    console.log(i);
}

Half as many bytes of code, and no repeated patterns. However if we want to run the loop again, without restarting the program, we need to write it again. JavaScript is a top down, linear script. It never goes back to the top. In comes the saving grace of JavaScript (or any language)... The function. Often functions are referred to as methods, but essentially they are the same, regardless.

A function is an object that contains executable script in its body. It can be given a name, and executed simply by calling that name in our program. We can call a function a million times and it wouldn't care. It will just execute each call and be on its way.

That means we can now give our loop from above a function body wrapper and make it re-usable at our beck and call, and never have to write the same code pattern anywhere else in the program. Slick, eh?

function foo() {
    for(var i=1;i<6;i++){
        console.log(i);
    }
}
// call it
foo();

Now we can print a list of numbers, 1 to 5, anytime we wish.

Functions can see variables in scopes above them, but scopes outside of a function cannot see locally declared variables (those declared with var or are in the formal parameter list). This means we could feasibly control the loop inside the function from outside of it.

function foo() {
    for (var i = a; i<=b; i++) {
        console.log(i);
    }
}
a = 1;
b = 5;
foo();

The output will be a list of numbers from 1 to 5. Only problem is that controlling from the outside is messy and repetitive, not to mention risky and potentially harmful to the global scope. This is where the parameters come in. We suppy them with the function call and they become values or object references for local variables.

function foo(a,b) {
    for (var i = a; i <= b; i++) {
        console.log(i);
    }
}
foo(1,5);
foo(11,20);

Now we have a re-usable code module that takes variable parameters and still uses less bytes of text than the original five line example above. It gets better. We can have as many parameters as we like (though fewer is better). To the above we can add a step parameter which if undefined is set to 1.

function foo(a,b,c) {
    c = c ? c : 1;
    for (var i = a; i <= b; i+=c) {
        console.log(i);
    }
}
foo(5,50,5);
foo(6,60,6);

Still, under 80 bytes of code (with white space, 108), and look at the power we now have. And it takes only a few bytes to run it again and again. Beauty, eh?


#3

It gets even better. We can call functions from anywhere in our program, even inside of loops.

// same function as above
function foo(a,b,c) {
    c = c ? c : 1;
    for (var i = a; i <= b; i+=c) {
        console.log(i);
    }
}
function bar(a,b) {
    a = a ? a : 1;
    b = b ? b : a;
    for (var i = a; i <= b; i++) {
        foo(i, i * 10, i);
    }
}
bar();
bar(5);
bar(1, 10);

Cool, eh?


#4

thanks for the in-depth reply!! I got it now, and much more:)