JavaScript The New Hard Parts

Foundations of JavaScript

Execution context

Execution context consists of two things:

• thread of execution( parsing code line by line).
• Variable environment which is live memory of data with variables. When code runs for first time, global execution content is created.When a function is executed, local function execution content is created. JavaScript is synchronous( top to bottom)& single threaded.

Call Stack

It is stack of call to function or execution content.

Asynchrony in JavaScript

In browser we can execute functions which are not part of 55 but part of web browser features. These methods when executed, are executed in background/within browser& JS thread of execution continues with neat line of code.Once this browser methods execution is completed, the desired completion method (method which is to be executed on completion of browser API method) is added to Callback Queue. Event Loop is a metaphorical process in JS V8 Engine that continuously checks if call stack is empty and code in global content has completed execution.Event Loop pop’s the method from callback queue& adds it to call stack.This ensures asynchronous browser APIs/methods are executed in a non-blocking manner.Callback Queue, Event Loop are part of V8 Engine.

Promises

Promises are special type of objects which has two important properties among others: value and onFulfillment(this is hidden property).Promises are used by asynchronous web browser methods on api where it will return Promise object immediately with value as undefined. When the desired task is complete.It will assign resultant value to Promise value property and trigger onFulfillment method with value property as argument. The .then property is used to push method to array assigned to onFullfillment property. Along with callback queue, JS engine has microtask queue which queues onFulfilment methods. Microtask queue has higher priority than callback queue. Callback queue is also called task queue and microtask queue is also called job queue. Before callback queue methods are added in callstack, microtask queue should be empty along with call stack.

Generators

Generators functions are special type of functions that returns iterator object. For syntax refer JavaScript The New Hard Parts. Unlike simple function, generator functions don’t execute underlying functions code but will return object with neat method as property along with other properties. The invocation of neat method will run functions code in the functions execution content. Whenever the method yields a value, it pause the execution of function immediately and return object { value, done } where value is yield value. Now if done is false and next method is invoked again, the function execution starts where it left off & if a argument is passed to next method it will resolve to value of yield value.This is achieved by JS storing where code was in Generators in iterator object.

Execution context is nothing but the line of code currently executing& memory

Example:

function *Batgenerator (){
	const r = yield 5:
	yield 2 + 7;
	yield 19;
}
const iterator = Batgenerator()
console.log(iterator-next());// 115
console.log(iterator-next(7))// 11
console.log(iterator.next(1));// 19

• First generator function Batgenertor is defined in global memory.
• Second, constant iterator variable is defined in memory& initially it value is undefined & will resolve to return of Batgenerator.
• Since Batgenerator is generator function, it will return iterator object& will be assigned” iterator” variable.
• In neat line, iterator objects neat method is executed. This will invoke Batgenerator function& return the value of first field.Here the execution of function will be halted& code location will be stored in Generator. ‘5’ will be the value returned/yielded& will be passed to console_ log.
• In neat line, iterator. neat is executed with 7 as its argument. This will resume execution of Batgenerator & will resolve ‘7’ as value of yield from where execution. The next yielded value will be ‘14’ & will be passed to console. log as argument & logged.
• The next iteration-neat will yield ‘19’ & will be logged.