Principles of JavaScript

Subscribe to my newsletter and never miss my upcoming articles

Hello everyone, here is just a take note from a course I recently took from Frontend Masters : JavaScript: The Hard Parts, v2.
I'll be documenting what I've learnt through out the course as for reference later on and also sharing it with you guys.

Side note, this is my first tech blog, I'm so excited 😊.


In this article, I'll be explaining how Javascript execute and run code.

  • Thread of Execution
  • Memory

Thread of Execution

The term "Thread of Execution" simply means Javascript goes through the code line-by-line and then runs / execute each line as it goes. Which makes Javascript, a Synchronous Language.

Now you might wonder, what's Synchronous?

Synchronous simply means occurring at the same time.

So when Javascript goes through these lines of code for example :

var fruits = ["orange", "apple", "mango", "pineapple"]
hello everyone
fruits[3]
console.log(3)

Looking at the above example, if it were to be ran on the browser's console. The first line is checked and valid cause Javascript recognizes that's that a variable fruits that has an array as the value.
Meanwhile, as soon as line 2 is got to, instantly on the console you'll get :

Uncaught SyntaxError: Unexpected identifier

Hereby Javascript is saying, I don't know what you mean by hello everyone and then fruits[3] isn't executed and any other statement below wouldn't be executed.

Too sum up Thread of Execution. Javascript goes through a code line-by-line and execute each line, if there's an error on a line like line 2, from the above example any other Javascript statement valid or not below the error isn't going to be executed.

Try it for yourself

Memory

The Memory could either be :

  • Global Memory
  • Local Memory

And all the Memory dose is to save data like strings and arrays even functions, so we can use that data later in its memory.
For example:

var fruits = ["orange", "apple", "mango", "pineapple"]

fruits is stored as a label / placeholder name on the Memory containing an array. More like a reference to the array.
E.g

fruits: ["orange", "apple", "mango", "pineapple"]

Note: this example is being stored on the Global Memory.

and also the above illustration / code is just an example of how code is stored in memory.

Global Memory

Basically, every line of code / instruction written that's not executed in a function is stored on the Global Memory. That's why fruits is stored on the Global Memory from the above example.

Local Memory

Before I dive into Local Memory, look at the code below

function adding(num) {
     var name = "Favourite";
     let age = 30;
     return num + 2
}

adding(4)     //Output : 6

A function adding has been declared / defined and stored on the Global Memory.

Something like this :

adding: function

When the function adding(4) is called on line 6, an Execution Context is created which will be discussed later on hopefully... also a Local Memory is created to store data that exist in the function body only.

The Thread of Execution which executes the code / instructions line-by-line goes into the function body adding and execute each line.

Line one (1) in the function body adding

var name = "Favourite";
name : "Favourite"

name is a placeholder name / reference in memory that has the value "Favourite" . And so on for the rest lines irrespective of var and let in the function body.

A more precise illustration of what's stored on the Local Memory is shown below :

num: 4
name: "Favourite"
age: 30

Note: I'm not 30 years old 😁 and the returned value isn't stored on the memory.

From the illustration above the parameter num in the function adding is being assigned a value 4 which is the argument passed and stored first on the Local Memory before anything else.
Then name and age.

Now the Thread of Execution is at line 3 in the function body adding which return a value return num + 2 .
4 + 2 = 6 ... outputs 6 to the console.

After all the lines of code in the function adding body has been executed, that function forgets its parameter value and anything stored in the Local Memory until invoked / called again and then a new argument will be passed to the function or not.

Thanks For Reading

If you've read so far, thank you. I know it's a lot, I myself get bored with reading and just do for exams and all but I'm seeing the importance now. Hopefully other blogs will come from what I've learnt from JavaScript: The Hard Parts, v2 course.

Tapas Adhikary's photo

Jome Favourite, Good one. Thanks for sharing!

Side note, this is my first tech blog, I'm so excited

Wish you many more!

Jome Favourite's photo

Thanks for reading.

Victoria Lo's photo

Congrats on your first article! Looking forward to reading more from you!

Jome Favourite's photo

Thanks for helping out. More to come.

AjeaSmith's photo

Nice work, thank you 🙏

Jome Favourite's photo

You're welcome