Can somebody explain to me why we need a for loop in this function?

Question

I am relatively new to programming, and was reading the book, Eloquent Javascript today. I came across an example that was related to overall scope. However I was more interested in understanding all of the elements within the function that they provided.

Here is the function:

var landscape = function () {
    var result = "";
    var flat = function (size) {
        for (var count = 0; count < size; count++)
            result += "_";
    };
    var mountain = function (size) {
        result += "/";
        for (var count = 0; count < size; count++)
            result += "'"
        result += "\\"
    };

    flat(3);
    mountain(4);
    flat(6);
    mountain(1);
    return result;
};

console.log(landscape());

As I was trying to break down this function, I understood mostly everything except for the for loops. I am not sure why they are needed for this function, and was was wondering if somebody would be willing to digest this problem for me, and explain why we need for loops to make the function work properly.

Answer 1

Right now you're getting the output:

___/''''\______/'\

Without them you'd get two functions looking like this (simplified):

var flat = function(size){
    result += "_";
};

var mountain = function(size){
    result += "/'\\";
};

Hence you'd get the output

_/'\_/'\

The size argument for flat() defines how many underscores should be output, and the size argument for mountain defines how many single-quotes ( ' ) should be output.

Hence you need the loops, or else you'll get smaller mountains and flats.

Consider the below "drawing" with F being "flat" and M being "mountain":

___/''''\______/'\
FFFMMMMMMFFFFFFMMM

Every mountain is always a minimum of 3 characters long (as it outputs a forward slash, at least one ' and then a backslash). This means that the above output is (along with your code)

3 x F = 3 flats               | flats(3)
6 x M = (6 - 2) = 4 mountains | mountain(4)
6 x F = 6 flats               | flats(6)
3 x M = (3 - 2) = 1 mountain  | mountain(1)

To reiterate:

// define an anonymous function with a "size" parameter and save it as "flat"
var flat = function (size) {
    // start "count" at 0 (count = 0) and add 1 to "count" (count++) while "count" is less than "size" (count < size)
    for (var count = 0; count < size; count++) {
        // Add an underscore to the "result" variable
        result += "_";
    }
};

// define an anonymous function with a "size" parameter and save it as "mountain"
var mountain = function (size) {
    // Add a forward slash to the "result" variable
    result += "/";

    // start "count" at 0 (count = 0) and add 1 to "count" (count++) while "count" is less than "size" (count < size)
    for (var count = 0; count < size; count++) {
        // Add a single quote to the "result" variable
        result += "'";
    }

    // Add a backwards slash to the "result" variable
    result += "\\"
};

If you're asking because

if (foo)
    bar();
oof();

Seems weird to you, then always consider a single line condition like this to be similar to

if (foo) {
    bar();
}
oof();

Answer 2

Like said in the other answer the for loop is used to concatenate the characters a specified number of times. I want to point out that you don't need the for loops to make your "flats" and "mountains".

jsfiddle demo

var landscape = function () {
    var result = "";

    var flat = function (size) {
         result += Array(size+1).join("_");
    };
    var mountain = function (size) {
        result += "/";
        result += Array(size+1).join("'");
        result += "\\";
    };

    flat(3);
    mountain(4);
    flat(6);
    mountain(1);
    return result;
};

console.log(landscape());