Hands-On Functional Programming with TypeScript

Frames

A frame is a sequential unit of work. In the preceding diagram, frames are represented by the blocks inside the stack.

When a function is invoked in JavaScript, the runtime creates a frame in the stack. The frame holds that function's arguments and local variables. When the function returns, the frame is removed from the stack. Let's look at an example:

function foo(a: number): number {    const localFooValue = 12;    return localFooValue + a;}function bar(b: number): number {    const localBarValue = 4;    return foo(localBarValue * b);}

After declaring the foo and bar functions, we invoke the bar function:

bar(21);

When the bar function is executed, the runtime will create a new frame containing the arguments of bar and all its local variables ...