We then go to the next line and say store 4 in the variable with the name of num2. Basically, it means it is read line by line, from top to bottom. Since this is a function definition, there is no code execution happening here so JS skips the function definition and moves control to line number 8. Javascript is always hosted in some environment, typically it’s hosted in a browser that is Google Chrome, Firefox, Safari etc. Rhino — managed by the Mozilla Foundation, open source, developed entirely i… Now, that works great on the server but, unfortunately, makes it harder to use when writing JavaScript for the browser. At line 1, ‘n’ has a value set to 10 so JS removes the keyword undefined and sets the value to 10. The call stack tracks which execution context we are in — that is, what function is currently being run and where to return to after an execution context is popped off the stack. This book is a radical reappraisal of Java­Script, how it works, how it could be made better, and how it can be better used. During the code execution part of GEC, whenever JS engine encounters a function call, it creates a new Execution Context and pushes it to the Call Stack. Like with any language really, you can learn it, use it, even use it really well, but maybe never really understand it. The JavaScript engine is a program, written in, let’s say, C++, which goes through all the JavaScript code, character by character, and “transforms” it into something that the computer’s CPU can understand and execute — machine code. JavaScript then looks at the call stack and sees that the last one is global so it returns to the global execution context. The global execution context. We have finished calling the multiplyBy2 function so it’s execution context gets erased, except for the returned value which gets stored in output. The last thing that you put in is the first that that you take out. JavaScript doesn’t know that by default. It’s easy and free to post your thinking on any topic. Learn more, Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Using the allocated memory in JavaScript basically, means reading and writing in it. Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Now the next line has a keyword ‘return’. This happens synchronously, meaning one line at … JavaScript is a client scripting language which is used for creating web pages. Now the control goes to the next code block. F o r now use the style sheet that I am providing you (I like the solarized color scheme ), after understanding what it does, you may change it as per your preferences.. Let’s head over to the script section and create a function to show this alert. As soon as you call the function, then and only then, will you go inside the function. That local context is then removed from the call stack and we go back to the global execution context. As soon as JS encounters a function invocation [ square(5) ], it creates a new Execution Context as shown below. We are not going to go to newOutput, we pause before it and we are waiting to come back to the global execution context (global area) while we are busy inside the local execution context (local area), the one that is created in order to find the return value of our function so we can get a value for output. When it gets to the last line it doesn’t need to jump up it just looks in the global memory where we have stored that function to a label called multiplyBy2. A JavaScript engine is a program or an interpreter which executes JavaScript code. Thanks for signing up. A local memory (‘Variable environment’) is where anything defined in the function is stored rather than being stored in the global memory. Pretty much just like you are reading this blog post, at least I hope you are, line by line, top to bottom. Understanding the language will make you a much better developer. Lets see how the execution of the function block happens. This just means now we run the code inside the function line by line and we have paused what we are doing in the global execution. It … Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Using Media Queries With JavaScript. I think this is where we lose most people. A simple JS program to understand how the Execution Context work. Then we come to the function we store the label multiplyBy2 and associate it with the function definition. As soon as we start running our code, we create a global execution context. This has all the information it needs in order to run that function so it just uses what it has in it’s memory. The second phase is the Code Execution phase. I have to say I have done many many courses in JavaScript and it surprises me that practically none of them actually help you to understand how JavaScript works and I think it is fundamental not because you need to know the theory or want to understand how things work but because it will help you immensely with debugging (finding errors), writing clean code and communicating what your code is really doing. The statement has a single catch block that handles all exceptions. I think you know the answer now. We start at the beginning and say store 2 in the variable with the name of num1. It is the environment in which JS code is executed. Now the whole process of Execution Context repeats for that function call. Let me put it this way. It stores everything in a live memory of variables with data, known as the global variable environment. Write on Medium, https://www.youtube.com/watch?v=iLWTnMzWtj4, https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0, How to choose between Angular, React and Vue — and be right every time, Creating, Testing and Building a Monorepo With Lerna and Yarn, Creating Secondary Entry Points for your Angular Library, Using Sails JS to Create an IMAP Email API, Building a React Static Website With GCP Cloud Storage, How JavaScript Code is executed? Web Development. An interpreter can take the raw JavaScript code and run it for you. JavaScript is single threaded ( one thing at a time ), Synchronous execution. An event is like a signal or message that something has … These concepts may or mayn’t be used in your day to day activities, but if you are curious and want to dig deep into the world of JavaScript then I am sure that you will find this stuff really interesting. It need’s to keep track of that fact somehow, we call this the call stack. What happens to the execution context? It’s like a regular stack but mainly used for keeping track of Execution Contexts. When we run a function we create a local execution context (not a global one) and like our global one has a global memory we have a local memory and a local thread. Ok, great, I’m lost, What!!!! V8 — open source, developed by Google, written in C++ 2. We repeat what we did above storing the returned value into the newOutput which is stored in the global memory. Thanks to Will Sentance and his amazing course on Frontend Masters that this is taken from — JavaScript: The Hard Parts (Principles of JavaScript) which I highly recommend. We expect people to just know what an interpreted language means. This means … Everything in JS happens inside the Execution Context. JavaScript has an exception handling mechanism. At line 1, ‘n’ has a value set to 10 so JS removes the keyword undefined and sets the value to … But what is the language that the microprocessors understand? The way JavaScript works is interesting. In the second phase of this current Execution Context, JS starts from the first line of this function declaration. This can be done through code stored in a linked .js file, in an on-page