Scribd
Upload
48 views18 pages

How Js Works: Memory Management Concurrency in JS?

JavaScript memory management involves allocation of memory for variables and objects, and garbage collection to free up unused memory. Memory is allocated on the heap when variables and objects are declared, and garbage collection uses reference counting and mark-and-sweep techniques to release memory from items no longer referenced. While JavaScript is single-threaded, it handles concurrency through an event loop which allows asynchronous tasks to be processed without blocking the main thread.

Uploaded by

Oscar Callisaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
48 views18 pages

How Js Works: Memory Management Concurrency in JS?

JavaScript memory management involves allocation of memory for variables and objects, and garbage collection to free up unused memory. Memory is allocated on the heap when variables and objects are declared, and garbage collection uses reference counting and mark-and-sweep techniques to release memory from items no longer referenced. While JavaScript is single-threaded, it handles concurrency through an event loop which allows asynchronous tasks to be processed without blocking the main thread.

Uploaded by

Oscar Callisaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

HOW JS WORKS

Memory management
Concurrency in JS?
Memory management
Memory life cycle
Gargabe collection
Memory leaks
Memory life cycle
Allocation and use
• JS Allocates memory alongside declaring values.
• That memory belongs to its scope (Memory heap).
// filters.module.js
var a = 2; // access by global export function filterByText(ownerId, ownerName) {
function f() { return (text) => {
var a = 3; const nameFilter = {$regex : `.*${text}.*`};
console.log(a); // prints 3 const query = { owner: ownerId, name : filter};
} return Folders.find(query).map(
f(); // Using ({ name }) => ({ name, owner: ownerName })
);
}
}

// calling closure and executing


import { filterByText } from 'filters.module';
const oscarFs = filterByText('AfPMqXq4NzLDiA6RQ', 'Oscar');
console.table(oscarFs('a'));
Release - GC
Memory references Mark and sweep
function f() {
const o1 = {};
const o2 = {};
o1.p = o2;
o2.p = o1;
}

f();
GC demo with closure
Memory leaks
• Global variables const interval = setInterval(() => {
// any code
• Timers or intervals that are forgotten }, 5000);
// clearInterval(interval); Forget remove
• Closures (meteor forum)
• Out of DOM references var elements = {
button: document.getElementById('button'),
image: document.getElementById('image'),
cell: document.getElementById('someCell'),
• RxJS Live subscriptions };
function removeTable() {
const table = document.getElementById('aTable');
document.body.removeChild(table);
}
RxJS subscriptions
• ReactiveX is a library for composing asynchronous and event-based
programs by using observable sequences.

• Demo

• Solution
• ngUnsubscribe // OnDestroy hook
Concurrency in JS?
Concurrency Model and Event Loop
JS Runtime
Demo
JS is Concurrent, but isn't Parallel
• Concurrency is about composing independent processes to work
together
• Parallelism is about actually executing multiple processes
simultaneously
Concurrency model and Event Loop
• JavaScript is a single-threaded programming language. Therefore it
can do one thing at a time
• Use one Call Stack to trace the execution of a script and Memory
Heap for memory allocation.

function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
Runtime

angular
JS Engine
RxJS
e.g. V8

Chrome
NodeJS
Demo
http://latentflip
.com/loupe
Search demo example debug it
Threat Detail of MSP example

404
Sequence diagram not found

Go DEMO
Preguntas?
Resources
• Memory management
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
• https://blog.sessionstack.com/how-javascript-works-memory-
management-how-to-handle-4-common-memory-leaks-3f28b94cfbec
• https://msdn.microsoft.com/en-us/library/ms976398.aspx
• http://arindam89.github.io/JSTalk_ScopeChains/index.html#
• Concurrency
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
• https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-
rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5
• https://danmartensen.svbtle.com/events-concurrency-and-javascript
• http://latentflip.com/loupe
• http://nikgrozev.com/2017/10/01/async-await/

You might also like