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

Made with Slides.com