Давайте начнем с ядра и спросим себя как Javascript работает?
Everything in Javascript happens inside an Execution Context.
🤨 Хорошо, я понял, но что это за Execution Context?
Execution Context is like a box 📦, which has two components in it. Memory Component and Code Component. Memory Component: - This is the place where all the functions and variables are stored in key value pair. - It is also known as Variable Environment. Code Component: - This is the place where code is executed one line at a time. - It is also known as Thread of Execution.
Подождите, по одной строке за раз?
Yes, Javascript is a synchronous single-threaded language.
😮 Хорошо, понятно, но 🤔 как тогда работает асинхронный в javascript?
TBH, I don't know 🙃, Let's tackle this question later.
Хорошо, достаточно честно.. Это только первый день.
Вы сказали, что все в javascript происходит внутривыполненияконтекста, но как это выполняется внутри этой коробочки? Я хочу знать, как работает JavaScript?
Okay, It happens in two phases actually. First one is Memory Creation Phase. It's kind of a critical phase and the second one is Code Execution Phase.
🤔 Что происходит на первом этапе?
In Memory Creation Phase, Javascript will allocate memory space to all the variables and functions within the program.
Знаете ли вы, сколько памяти выделено или зарезервировано?
At this point Javascript doesn't know how much memory space is needed for variable so it allocates special value called as undefined for the variable and literarily stores function code for the functions.
In above image debugger breakpoint is added on first line, So in Global Execution Context you can see both memory creation phase values. which is x is undefined and y has function code.
undefined это значение? Думал ошибка 😂😂 .
хорошо, что будет дальше?
( Don’t think about line numbers too much, It’s not important ATM ) Next phase is Code Execution Phase, In this phase code is literarily executed one line at a time. - So line 5 will be executed and value of x will be replaced to 10 from undefined in Memory Component. - and then from line 4 to 2 there is nothing to be executed so it is skipped. - and then comes the interesting part on line number 1. - function y is invoked, function invocation happens when we call function with rounded brackets like in line number 1. - Execution control moves to line 4, now this is a function. for each function Javascript creates a separate Execution Context (that same box which we talked about just before), notice Global Execution Context and this Execution Context is different. - Line 3 is executed. It logs "I am inside function y" in console. now inside this function there is nothing to execute after console.log(), so Execution Context of this function is deleted. - Execution Control moves to line 6 and there is nothing to be executed now, so Global Execution Context is also deleted.
Ага! Я понял, как теперь работает Javascript 😄. Позвольте мне попробовать это на моей машине.
Bye Bye !! See you tomorrow with another Javascript question.
Привет! подождите, откуда вы взяли всю эту информацию?
Sources: https://www.youtube.com/watch?v=ZvbzSrg0afE&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=2 https://www.youtube.com/watch?v=iLWTnMzWtj4&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=3 See you tomorrow 👋
👋
Hey, don't forget to join me on Twitter, LinkedIn and Github. I share lot of cool tips and tricks regarding PHP, Laravel, Javascript, Vuejs, Nuxtjs, Reactjs, databases, workflows, productivity etc etc. https://twitter.com/rckstrbhushan https://www.linkedin.com/in/rckstrbhushan https://github.com/bhushan Take care and stay safe. Cheers 🥂
