JavaScript runtime

Callback queue

Runtime API

Event  loop

Memory
Heap

Call
Stack

Byte code

Ignition

TurboFan

Output

Opt code

Callstack

 A call stack is an implementation of the stack data structure to keep track of function calls in your program

Personal definition

function one() {
  console.log('I am first')
}

function two() {
  console.log('I am second')
  one()
}

function third() {
  two()
  return 'I am third'
}

function run() {
  return third()
}

console.log(run())

main()

run()

third()

two()

one()

Stack  trace

Memory heap

 A memory heap is an implementation of multiple data structures for allocating memory used by your program 

Personal definition

Memory  heap

GC Algorithms

Memory  allocation

Memory heap

let meaningOfLife = 42

const data = {
  users: [
    {
      username: 'ahmedosama-st',
      email: 'hello@ahmedosama-st.com',
      articles: [
        {
          title: 'Optimizing recursive functions',
          url: 'https://dev.to/ahmedosama_st/optimizing-recursive-functions-1lhh',
        },
      ],
    },
  ],
}

meaningOfLife
42
data

JSObject

reference

Stack allocation

Heap allocation

Memory allocation

let arr = [1, 2, 3]

let user = { first_name: 'ahmed', last_name: 'osama' }

const double = (x) => x * 2

function sayWelcome(name) {
  return `Hello ${name}`
}

Memory allocation

let arr = [1, 2, 3]

let user = { first_name: 'ahmed', last_name: 'osama' }

const double = (x) => x * 2

function sayWelcome(name) {
  return `Hello ${name}`
}

Stack

Heap

arr: x1ud

x1ud: [1, 2, 3]

Memory allocation

let object =  {
  x: 5,
  y: 6,
}

[[Value]]: 5

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property attributes

[[Value]]: 6

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property attributes

'x'

'y'

JSObject

Memory allocation

let a = { x: 5, y: 6 }

let b = { x: 5, y: 6 }

Property attributes

[[Value]]: 5

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

[[Value]]: 6

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property attributes

'x'

'y'

JSObject (a)

'x'

'y'

JSObject (b)

Property attributes

[[Value]]: 5

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property attributes

[[Value]]: 6

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Memory allocation

let a = {
  x: 5,
  y: 6,
}

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property info

Offset: 1

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

5

6

JSObject (a)

'x'

'y'

Shape

Memory allocation

let a = { x: 5, y: 6 }

let b = { x: 7, y: 8 }

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property info

Offset: 1

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

5

6

JSObject (a)

'x'

'y'

Shape

7

8

JSObject (b)

Memory allocation

let o = {}

JSObject (o)

Shape

(empty)

Memory allocation

let o = {}
o.x = 6

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

JSObject (o)

'x'

Shape

(empty)

Shape

(x)

Memory allocation

let o = {}
o.x = 6
o.y = 7

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property info

Offset: 1

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

7

JSObject (o)

'x'

'x'

'y'

Shape

(empty)

Shape

(x)

Shape

(x, y)

Memory allocation

let o = {}
o.x = 6
o.y = 7

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property info

Offset: 1

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

7

JSObject (o)

'x'

'y'

Shape

(empty)

Shape

(x)

Shape

(x, y)

Memory allocation

let a = {}
a.x = 6

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

JSObject (a)

'x'

Shape

(empty)

Shape

(x)

Memory allocation

let a = {}
a.x = 6

let b = {}
b.y = 7

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Property info

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

JSObject (a)

'x'

Shape

(empty)

Shape

(x)

7

JSObject (b)

'y'

Shape

(y)

Memory allocation

let o = {}
o.x = 6

let w = { x: 6 }

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

JSObject (o)

'x'

Shape

(empty)

Shape

(x)

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

6

JSObject (w)

'x'

Shape

(x)

Memory allocation

let point = {}

point.x = 3
point.y = 4
point.z = 5

3

JSObject (p)

4

5

'x'

Shape

(x)

'y'

Shape

(x, y)

'z'

Shape

(x, y, z)

'x'

Shape table

'y'

'z'

Shape  ICS (inline  caching)

function getX(o) {
  return o.x
}
JSFunction 'getX'
get_by_id loc0, arg1, x
N/A
N/A
return loc0

Shape  ICS (inline  caching)

function getX(o) {
  return o.x
}






getX({ x: 'a' })
JSFunction 'getX'
get_by_id loc0, arg1, x
0
return loc0

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

'x'

Shape

Shape  ICS (inline  caching)

function getX(o) {
  return o.x
}






getX({ x: 'a' })



getX({ x: 'b' })


JSFunction 'getX'
get_by_id loc0, arg1, x
0
return loc0

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

'x'

Shape

Memory allocation

let array =  [
  'a',
]

Property attributes

[[Value]]: 1

[[Writable]]: true

[[Enumerable]]: false

[[Configurable]]: false

Property attributes

[[Value]]: 'a'

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

'length'

'0'

Array

Memory allocation

let array =  [
  'a',
  'b,'
]

Property attributes

[[Value]]: 'a'

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

'length'

'0'

Array

'1'

Property attributes

[[Value]]: 2

[[Writable]]: true

[[Enumerable]]: false

[[Configurable]]: false

Property attributes

[[Value]]: 'b'

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

Memory allocation

let usernames = [
  'ahmedosama-st',
  'ahmedosama_st'
]

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: false

[[Configurable]]: false

1

JSArray

'length'

Shape

Element information

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

'ahmedosama-st'

Elements

'ahmedosama_st'

Memory allocation

const array = Object.defineProperty([], '0', {
  value: 'ahmed',
  writable: false,
  enumerable: false,
  configurable: false,
})

const anotherArray = []

Object.defineProperties(anotherArray, [
  {
    value: 'one',
    writable: true,
    enumerable: true,
    configurable: true,
  },
])

console.log(anotherArray)

Memory allocation

let arr = Object.defineProperty([], '0', {...})
let anotherArr = Object.defineProperties([], [...])

Property information

Offset: 0

[[Writable]]: true

[[Enumerable]]: false

[[Configurable]]: false

1

JSArray

'length'

Shape

Element information

[[Value]]: 'abc'

[[Writable]]: true

[[Enumerable]]: true

[[Configurable]]: true

0

Dictionary Elements

1

GC Algorithms

Mark and sweep

GC Algorithms

Reference count

Free

Mark and sweep

GC Algorithms

Reference count

Mark and sweep

Free

A

Root
let A = { value: 1 }

GC Algorithms

Reference count

Free

A

Root

B

C

D

let A = { value: 1 }

let B = { value: 2 }

A.B = B
A.C = { value: 3 } // C object

B.D = { value: 4 } // D object

Mark and sweep

GC Algorithms

Free

A

Root

B

C

D

E

let A = { value: 1 }

let B = { value: 2 }

A.B = B
A.C = { value: 3 } // C object

B.D = { value: 4 } // D object

A.C.E = { value: 5 }

Mark and sweep

GC Algorithms

Free

A

Root

B

C

D

E

let A = { value: 1 }

let B = { value: 2 }

A.B = B
A.C = { value: 3 } // C object

B.D = { value: 4 } // D object

A.C.E = { value: 5 }

delete A.B

Mark and sweep

GC Algorithms

Free

A

Root

Free

C

Free

E

let A = { value: 1 }

let B = { value: 2 }

A.B = B
A.C = { value: 3 } // C object

B.D = { value: 4 } // D object

A.C.E = { value: 5 }

delete A.B

Mark and sweep

References

Thank you

EgyptJS presentation (JS memory management)

By Security Theater

Made with Slides.com

EgyptJS presentation (JS memory management)

Explore the fascinating world of JavaScript runtime, memory management, and garbage collection algorithms. Discover how these concepts enhance performance and efficiency, while unlocking new possibilities in your coding journey!

  • 22

More from Security Theater