Scripting Week 9

JavaScript code runs on a ____________.

JavaScript code runs on a JavaScript Engine.

Name 2 examples of JavaScript Engines.

Specify which browser they are for.

V8 (Chrome)

SpiderMonkey (Firefox)

JavaScriptCore (Safari)

JIT stands for…

Just-In-Time compilation

What is JIT compilation? Why is it considered a hybrid type of program execution?

• Hybrid approach (combo of interpretation & compilation)

• At runtime —> compiles part of code into bytecode & eventually optimized machine code

Synchronous Code

• What is it?

• Pros v.s. Cons

• Executes tasks sequentially, one at a time

• Waits for each task to finish before moving to the next one.

Pros

• Easy to follow

• Predictable execution flow (easy to identify reasoning

Cons

• Can be inefficient — the program remains idle while waiting for tasks to complete

• Long-running operations, block execution, leading to poor user experiences

  • (long-running operations = tasks in a program that take significant amount of time to complete)

What are long-running operations (in a program)? Name an example.

Def: Long-running operations block execution, leading to poor user experiences

• (long-running operations = tasks in a program that take significant amount of time to complete)

Examples:

1. File I/o — Reading or writing large files from disk

2. Network requests — Download files, fetching data or making database queries

3. Complex Calculations — Performing difficult computations

4. Waiting for user input — Pausing execution until user provides input

_____________________ can cause delays, making a program slow/unresponsive.

Long-running operations can cause delays, making a program slow/unresponsive.

Asynchronous Code

What is it?

• Exexutes tasks independently of main program flow

• Can handle tasks such as I/O operations, timers, and HTTP request more efficiently

• Allows the program to continue running while waiting for tasks to complete

• The program can execute other tasks while awaiintg

• Enables handling of concurrent operations w/in a single thread

_______________ is the environment in which JavaScript code is evaluated and executed.

Execution context is the environment in which JavaScript code is evaluated and executed.

Each execution context has its own…

variables, scope, and this binding

Name & describe the 3 different Types of Execution Context in Js

1. Global — Default environment where code execution begins.

2. Functional — Created each time a function is invoked.

3. Eval — Executed code w/in the eval function (not recommended for use in modern JavaScript)

Execution Context — Phases

Involves 2 main phases

1. Creation Phase

   1. Execution Phase

Creation Phase — Description.

• JS engine set sup memory space for vairables & functions

• All variable declarations are hoisted to top of their respective contexts

  • All of them are initialized to have the value ‘undefined’

• Function declarations are also hoisted but with their actual definitions, making them fully available even before the code execution reaches their point of declaration

Creation Phase — Global Execution Context v.s. Functional Execution Context

Execution Phase

During this phase, JS engine executes code line by line & performs the following tasks:

• Assigns values to variables

• Processes function expressions

• Executes functions

• Runs code w//in function context immediately when the function is invoked

Execution Phase — Global Execution Context v.s. Functional Execution Context

Memory Heap

• Where memory allocation occurs

• Objects & functions are stored here

• In memory diagrams —> objects are represented as boxes that are diff colours & sizes

  • The size of a box reflects the amount of memory an object uses

Define the following and describe its functions.

(a) Call Stack

(b) Global Execution Context (Global EC)

(c) Function Execution Context

(a) Call Stack

• Data structure

• Tracks function calls & execution order

• Follows a last-in & first-out (LIFO) order

• Functions are pushed when called and popped when they finish execution

(b) Global Execution Context (Global EC)

• The default environment wherever JS starts executing

• Created when the script first runs & remain active until the program ends

(c) Function Execution Context

• A temporary environment created whenever a function is invoked, storing local variables, function arguments, and scope chain

• Pushed onto call stack and removed when execution completes

Web APIs

• Part of JS engine

• Handle tasks like…

  • DOM manipulation (DOM API)

  • Asynchronous operations

    • Examples:

    • setTimeout()

    • setInterval()

    • AJAX requests like XMLHttpRequest

    • modern fetch() API for network requests

T or F: Is Web APIs a part of the JS engine.

False.

• Web APIs is NOT a part of JS engine.

• It is provided by the browser.

setTimeout()

Schedules a function to run after a specified delay, without blocking other code.

setInterval()

Repeatedly executes a function at fixed intervals, while the rest of the code continues running.

AJAX Requests

Sends network requests w/o blocking the main thread, allowing the program to continue executing other code while waiting for a response.

fetch() API

A modern way to make asynchronous HTTP requests, using Promises to handle responses w/o blocking execution.

Callback Queue

• When asynchronous operations need to defer a task for future execution, the callback functions associated with these tasks are placed in Task Queue

• Once the Call Stack is clear, the event loop will take functions from Tasks Queue and push them onto the Call Stack to be executed

Microtask Queue

• Similar to Task Queue but has a higher priority

• Specific to certain operations like resolving promises (promise illustrated in the diagram)

• Jobs here processed at the end of the current run of JS event loop, before the next event loop tick begins

Event Looop

Circular arrow b/w the Call Stack & Task Queue represents the Event Loop which checks the Call Stack & determines if it needs to add any functions from the Task Queue to the Call Stack

Callback Function

• A function passed as an argument to another function

• Invoked inside the outer function to complete a specific task

• Commonly used in asynchronous operations to delay execution until an event occurs or a task completes

• Helps maintain efficient execution flow

• Useful for tasks like data fetching

function processUserInput(input, callback) {
    const result = `Processed: ${input}`;
    callback(result);
}

processUserInput('Hello', (result) => {
    console.log(result);
});

document.getElementById('myButton')?.addEventListener('click', function() {
    console.log('Button was clicked!');
});

1. Explain how this code demonstrates:

   (a) Callback functions

   (b) Event listeners

(a) Callback functions

function processUserInput(input, callback) {
    const result = `Processed: ${input}`;
    callback(result);
}

• processUserInput takes 2 parameters:

  • input: a string value

  • callback: a function passed as an argument

• it creates a new string (result), formatting it w/ “Processed: “ before the input

• It then calls the callback function, passing result as an argument

processUserInput('Hello', (result) => {

console.log(result);

});

• calls processUserInput w/ “Hello” as input

• Passes an anonymous arrow function as the callback

• The callback simply logs the result to the console

(b) Event listeners