Answer to a Beginner’s JavaScript Question

A friend of a friend is learning how to code in JavaScript (non-technical, first programming language). Here’s the question:

I’m very early on in the lesson, and I simply can’t wrap my brain around it. It’s like math equations and they just look like gibberish to me. I keep thinking that if I just keep plugging away at it, it will start to make sense, but I’m just stumbling through with no understanding of what I’m doing.

This is simple, basic, beginner code:

var my_number = 7;
var timesTwo = function(number) {
    var my_number = number * 2;
    console.log("Inside the function my_number is: ");
    console.log(my_number);
};

timesTwo(7);
console.log("Outside the function my_number is: ")
console.log(my_number);

 

And while I kind of get the gist of it, I can’t “read” it like a sentence, where I understand each step, like I do basic HTML and CSS. Stuff like this:

<div id="header">
    <p id="name">Your Name Here</p>
    <a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a>
</div>

 and this:

.right {
   background-color: ‪#‎E3E4FA‬;
   height: 800px;
   width: 88%;
   float: right;

I can read it like a sentence and understand each and every word. I’m doubting myself, that if I’m struggling this much with these simple beginner concepts, there is no way in god’s green earth that I will be able to keep up with a bootcamp course. Did y’all have this kind of experience when you were learning? Did you hit a wall, then have a breakthrough and the rest was understandable? Or was this all super easy to you from the start?

“ANSWER” (MY ADVICE):

The stuff you can read (HTML and CSS) is written in a “declarative programming paradigm.” So congratulations, you understand this style of programming. The other important style you will have to master is the “imperative programming paradigm,” where behavior and flow are implemented in distinct steps. This is the most common and more general-purpose programming paradigm. Most programmers will need to know a mixture of both.

For most beginners, the biggest learning curve is learning your first imperative programming language. Although the concepts will get more and more advanced as you learn, the simplest concepts are often the hardest because you are starting from scratch. The best way to learn is by combination of hands-on (doing), experimenting (tinkering), focused research (asking questions/reading forums), and traditional learning (reading, tutorials, sometimes classroom).

To avoid information overload I recommend that you break things down into small nuggets. You don’t have to understand everything at once. If you are struggling it’s often because you aren’t breaking the problem down into small enough pieces or there is a concept you might be over-complicating. Learning how to code can be fun and rewarding, so if it’s not, you’re doing it wrong. Relax and enjoy the process of experimenting with code. Software developers can get away with reckless experimentation that would otherwise be materially expensive in the real world, so don’t be afraid to make mistakes or get confused in the beginning. Learning can be messy, but it should always be fun. After all, it’s all in your head.

Let’s go over your code snippet. I’ve typed it into notepad, added some minimal HTML, and saved it as a web page on my desktop called “example.html.” I’ve opened it up in Chrome, hit F12 (F12/Debug mode is your friend), and displayed the Console output:

 

js-source

…as you can see from the console output, the gist of the lesson was to demonstrate that the variable “my_number” outside of the function is a *different* variable than “my_number” inside the function. The first is global scope, while the second is function scope (exists only in the function).

To get a better understand of what is going on, here’s an informal explanation of what is happening, line-by-line:

1. var my_number = 7
Assign the number 7 to the GLOBAL scope variable “my_number”

2. var timesTwo = function(number) {
Declare a function called “timesTwo” that takes in a parameter (input variable) “number” We are not running or executing the function here, we are just defining (declaring) it. Later on when we get to the line that says “timesTwo(7)” we are calling it and passing 7 as the value for input variable “number”… but right now we are just declaring the function name and input parameters.

3. var my_number = number * 2;
We are still in the definition of the function “timesTwo.” Here we multiply the input variable “number” by 2 and assign it to the LOCAL scope variable “my_number”. It is unrelated to the GLOBAL scope variable “my_number” on line 1.

4. console.log(“Inside the function my_number is: “);
We are still in the definition of the function “timesTwo.” All we are doing here is displaying the literal string “Inside the function my_number is: ” to the console. I say “literal” because it is in quotes.

Note that in a web browser, the end user won’t be able to see the console. You have to go into debug mode to see console output. It’s just for troubleshooting. In real-world (“production”) code you wouldn’t be doing this, so this is just for simplicity (learning).

5. console.log(my_number);
We are still in the definition of the function “timesTwo.” Here we are displaying the value of the LOCAL variable “my_number,” which will be the local variable “number” times 2. Recall that “number” is an input variable, so we don’t know what will be displayed later until we call our function (“timesTwo”) later on.

6. };
This is the END the definition of the function “timesTwo.” (closing curly brace + end of statement semicolon).

7. timesTwo(7);
Now we are calling (running) the function we have just defined. We are passed in the value 7 for the input parameter (input variable) “number.” Since we are really running through the function now (not just defining it), go through steps 2 through 7 again with the number 7 plugged into “my_number” to see what happens.

NOTE: if you are the kind of person who tends to overthink things, you may be confused as to why the literal number 7 was passed in instead the value of GLOBAL scope my_number, which was also 7. I’m not sure why other than perhaps the author of this example wanted to show that 7 could be passed in literally (directly) rather than using the variable. Sometimes when you read code you must keep your inferences and judgments separate from your observations–that’s a troubleshooting skill that you will develop over the years (balance of critical thinking, scientific method, observation, inference, and intuition).

8. console.log(“Outside the function my_number is: “);
All we are doing here is displaying the literal string “Outside the function my_number is: ” to the console.

9. console.log(my_number);
Here we display the GLOBAL scope variable my_number. Notice that is hasn’t changed since line 1. You could pretty much delete lines 2 through 8 and you would get the same answer on line 9.

Although the language is JavaScript, I’ve seen this lesson since the 1980’s across several different languages: BASIC, FORTRAN, Pascal, C, C++, Visual Basic, C#, and Java. There will be some gotchas with JavaScript variable scope compared to those other languages, but in the general case (and certainly this case), the variable scope rules are the same.

Hope this helps.