Intro to memory instructor notes

memory.md

Memory

Objectives

• Explain what memory is.
• Explain what the Stack and Heap are.
• Explain when data in memory is deallocated.
• Use memory diagrams to model data in JavaScript.
• Identify destructive vs non-destructive code.

Questions

• Describe the 3 main types of physical memory used in your computer

  Your answer...

• In your own words, write short definitions for the Stack (Call Stack) and Heap. When you're done, turn to your neighbor and compare your definitions. Discuss how the Stack and Heap work together.

  Your answer...

• How are primitive types stored in memory?

  Your answer...

• How are reference types (arrays, objects & functions) stored in memory?

  Your answer...

• When does data in the Heap get deleted (deallocated)?

  Your answer...

• What will the following code log? Are you surprised that you can use const and still mutate the object?

  const hero = { name: 'Superman' }
  const villain = hero
  villain.name = 'Bizarro'
  console.log(hero, villain)

  Your answer...

Use memory diagrams to model behavior in JavaScript.

Diagram the memory allocation in the snippets bellow:

var num = 8

var cat = {
  name: 'fuzzy',
  age: 22
}

var chores = ['clean room', 'feed fuzzy', 'learn js']

let me = 'Me'
function sayHi(name) {
  let greeting = 'Hello'
  console.log(greeting, name)
}
sayHi(me)

var albums = [
  {
    artist: 'SZA',
    name: 'Ctrl',
    year: 2017,
    genre: ['R&B', 'Hip Hop']
  },
  {
    artist: 'Miles Davis',
    name: 'Kind of Blue',
    year: 1959,
    genre: ['jazz']
  }
]

http://www.pythontutor.com/javascript.html#mode=edit

Identify destructive vs non-destructive code.

• What's the difference between these two snippets of code?

  var colors = [ 'maroon', 'aqua', 'magenta' ]
  colors.pop()
  colors.push('indigo')
  console.log(colors)

  var colors = [ 'maroon', 'aqua', 'magenta' ]
  var newColors = colors.slice(0, -1)
  newColors.push('indigo')
  
  console.log(colors, newColors)

• Identify the following examples as either desctrive or non-destructive:

  var original = [ 2, 1, 5]
  var string = original.toString()
  
  console.log(original, string) // ???

  var original = [ 2, 1, 5]
  var sorted = original.sort()
  
  console.log(original, sorted) // ???

  Your answer...

• Change the following code so that it will not mutate state. By the end of the code snippet, you want myHobbies to be hiking, cooking, and coding and yourHobbies to have cooking, coding, and reading.

  const myHobbies = [ 'hiking', 'cooking', 'coding' ]
  const yourHobbies = myHobbies
  yourHobbies.shift()
  yourHobbies.push('reading')

  Your answer...

• Change the following code so that it will not mutate state. By the end, you should have two objects with one having en-US as its language value and the other having es-MX as its language value.

  const options = { theme: 'ziggy', language: 'en-US' }
  const alternate = options
  alternate.language = 'es-MX'

  Your answer...