// Allocation

let a = 10; // allocates memory to hold the value 10

const obj = { // Allocates memory for obj and extends that memory for each key
    firstName: 'foo',
    lastName: 'bar'
};

const arr = [1, 2, 3]; // Allocates memory for arr

const now = new Date(); // Allocation via function call


// Use

a = 20; // Modify the allocated memory

obj.birthday = new Date(); // Extend the allocated memory

function someFunc() {

} 

function someFunc() {

    const someConst = 10;

    // While inside the function someFunc,
    // someConst has a reference to it
    // hence the memory allocated to it
    // will not be reclaimed
}

// Outside someFunc, someConst is not referenced
// and the Garbage collector cleans it up

const someConst = 10;

const obj = {
    val: someConst // the constant someConst has a reference count of 1
}


const newObj = obj; // the object obj has a reference count of 1

newObj.newVal = someConst; // someConst has a reference count of 2


obj.val = 10;

// Here, someConst loses one reference count
// someConst has a reference count of 1


newObj = {
    foo: 'bar'
}

// Here, both someConst and obj lose one reference.
// obj has a reference count of 0
// someConst has a reference count of 0
// Since both have a reference count of 0, they will be garbage collected!

// Example from MDN

function someFunc() {
    const obj = {};
    const newObj = {};

    // Create a cyclic reference
    obj.val = newObj;
    newObj.val = obj;
}

// Even outside the function someFunc
// obj and newObj have 1 reference count
// and the garbage collector will not
// clean this up.

function someFunc() {
    b = 10; //looks pretty harmless right?
}

function someFunc() {
    b = 10;
}

// is the same as

function someFunc() {
    window.b = 10; // Oops!

    // This happens due to scope lookup
    // If the variable does not exist in any scope
    // the JS runtime creates the variable
    // in the GLOBAL scope! 😱
}

// The variable is never cleaned

setInterval(() => {
    const someConst = 10;

    // do something here    
}, 1000);

// someConst may be cleaned at some point

// The handler itself is still referenced
// and will not be cleaned unless ... 

// The fix? Assign the reference to a variable

let interval = setInterval(() => {
    const someConst = 10;

    // do something here    
}, 1000);


// some code


// When you're done with the interval
clearInterval(interval);

// A trivial example


function someFunc() {
    const a = 10; // 4 bytes, let's say

    return function() {
        console.log(a);
    }
}

const arrayOfFunction = [];


for (let i = 0; i < 1000000, i++) {
    arrayOfFunction[i] = someFunc();        
}

// A real-world example

const inputField = document.getElementById('input-field');


function someFunc() {
    // do something with inputField
}

// inputField is not longer referenced anywhere
// it can be cleaned.

// A real-world example

const inputField = document.getElementById('input-field');

const button = document.getElementById('cta');

button.addEventListener('click', () => {
    // do something with inputField
});

// Here, it will not be cleaned since the runtime
// cannot decide when the memory allocated to 
// inputField is not longer required

function someFunc() {
    const a = 10;
    const b = 20;
    
    this.sendAlert = function() {
        alert(a);
    }
}

const btn = document.getElementById('cta');

btn.addEventListener('click', () => {
    new someFunc().sendAlert();

    // Only the memory allocated for `a` will not be cleaned.
});

let inputContainer = document.getElementById('input-field-1');

let button = document.getElementById('cta');

let inputBox = inputContainer.querySelect('input');

button.addEventListener('click', () => {
    inputContainer.remove();
    // removes the DOM node from the DOM tree
});

// But, it is still referenced in JS by inputBox
// This is a detached DOM tree.

const obj = {
    numVal: 100, // 4 bytes
    strVal: 'Hello World' // 11 bytes
}

const btn = document.getElementById('cta');

btn.addEventListener('click', () => {
    alert(obj.numVal);
    // This will hold on to 15 bytes
    // not 4 bytes
});