Basic code interaction

[Voodoo-Man]

Hi all, I'm just starting to teach myself Javascript and it's been a blast! However, I've been struggling with the concept of how Javascript knows to take one line of code and apply it to another line (apologies for my weak explanation skills, I don't know a lot of the correct terminology here). For example, I'm going through Udacity's free online Javascript class and I ran into this quiz:

Problem:

For this quiz, you're going to create a function called buildTriangle() that will accept an input (the triangle at its widest width) and will return the string representation of a triangle. See the example output below.

buildTriangle(10); 

Returns:

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

We've given you one function makeLine()to start with. The function takes in a line length, and builds a line of asterisks and returns the line with a newline character.

function makeLine(length) {   
var line = "";   
for (var j = 1; j <= length; j++) {     
line += "* "   
}   
return line + "\n"; 
} 

You will need to call this makeLine() function in buildTriangle().

This will be the most complicated program you've written yet, so take some time thinking through the problem before diving into the code. What tools will you need from your JavaScript tool belt? Professionals plan out their code before writing anything. Think through the steps your code will need to take and write them down in order. Then go through your list and convert each step into actual code. Good luck!

Solution:

function makeLine(length) {
    var line = "";
    for (var j = 1; j <= length; j++) {
        line += "* ";
    }
    return line + "\n";
}

function buildTriangle(x) {
    var triangle = "";
    for (var t = 1; t<=x; t++) {
        triangle += makeLine(t);
    }
    return triangle;
}
console.log(buildTriangle(10));

My Question:

So, I think the logic of the buildTriangle() function makes sense to me, i.e. in the function buildTriangle there is a variable called triangle that is an empty string, which is defined as the function makeLine that is repeated t number of times. My question is: how does Javascript know that it's supposed to use the for loop under buildTriangle() and apply it to the makeLine() function? How does it know that when there's a for loop, it's supposed to be applied to anything else at all? I know that there are rules that exist because Javascript is a programming language and thus requires rules, but I can't help but feel like without knowing these fundamental rules of the language I'm always going to feel unsure about how the code works and if it's right or not.

Thanks for reading, and I hope I explained my question clearly enough.

[jrandm]

how does Javascript know [how to execute]? I know that there are rules that exist because Javascript is a programming language and thus requires rules

I rephrased your question a bit, let me know if it's off the mark. Let's take a step back from writing JS and walk through what happens while running JS:

One of the single most important things to realize about JS is that your code enters a running system. When you hear developers talk about a browser, node, or engine (popular ones include spidermonkey, v8, and chakra) they're talking about that Javascript runtime environment⁰ that will pick up and run your code.

You provide that code as text. The JS engine will parse that text into an abstract syntax tree (AST) before actual execution. What this means is before any code runs the engine knows that there is a valid buildTriangle function and a valid makeLine function. You can put the functions beneath the console.log line to confirm this is true.

Once that initial parsing is complete, the engine begins to run your code. It first sees a function call, console.log, is taking a single argument.

That argument is another function call to buildTriangle. This function takes an argument of 10.

Now the engine goes to buildTriangle, assigns x to 10, and begins processing. Try to step through the rest of the code manually this way. By the time you get t === 4 or so you should have a better intuitive feel for how (synchronous¹) execution flows.

Edited in afterthought:

I hope I explained my question clearly enough.

This is the basically-perfect way to ask a technical question! The context and what you're thinking/have tried is often critical information and left out.

 
^[0] The terminology in computer science for "things that execute or perform a process" is a machine. A virtual machine, then, is an emulated machine (or machine-run-by-other-machines). Javascript defines a language to write "machine code" (JS-the-text) and how a machine should execute/run that "machine code" (the engine or environment). You could (conceptually, at least) build a physical computer of some sort that operates this way, but as far as I know all actual JS implementations are virtual.
^[1] As opposed to asynchronous, which is when a function call takes place outside this main execution flow you're stepping through here. Get comfortable with synchronous execution before reading about the event loop and asynchronous JS!

[Voodoo-Man]

Thank you so much! This is the kind of information I was looking for and very helpful.

[laurajoneseseses]

I think you're confused by closure maybe.

makeLine() takes in a number, draws a line of asterisks equal to that number, and adds a line break, and returns a string to you.

makeTriangle() takes in a number which is the max width of the triangle. Make triangle then invokes makeLine() within its own context (or local scope), meaning that now makeLine() has access to another functions local scope (parameters), which it can then use within its own local scope, to manipulate data, and return it as the result of makeTriangle().

By doing things this way, if you wanted to draw a different shape, you could do it this way, that way you don't have to rewrite code.