Где храните код?

Хранение кода в памяти JavaScript

Вопрос о том, где хранится код в JavaScript, касается памяти и механизма выполнения программы. Код хранится в разных местах в зависимости от его типа.

Типы памяти в JavaScript

JavaScript использует две основные области памяти:

1. Stack (стек) — быстро, но ограничено по размеру
2. Heap (куча) — медленнее, но больше

Что хранится где?

Stack (стек)

В стеке хранятся примитивные значения и ссылки на объекты:

let a = 5;           // число — в Stack
let b = 'hello';     // строка — в Stack
let c = true;        // boolean — в Stack
let d = undefined;   // undefined — в Stack
let e = null;        // null — в Stack

let obj = { name: 'John' }; // ссылка на объект — в Stack

Визуализация Stack:

Stack
┌─────────────────┐
│ a = 5           │
├─────────────────┤
│ b = 'hello'     │
├─────────────────┤
│ c = true        │
├─────────────────┤
│ obj -> (ref)    │ ──┐
└─────────────────┘   │
                      │
        Heap          │
    ┌─────────────┐   │
    │ { name:     │ <─┘
    │  'John' }   │
    └─────────────┘

Heap (куча)

В куче хранятся сложные объекты (объекты, массивы, функции):

let obj = { name: 'John', age: 30 };        // объект в Heap
let arr = [1, 2, 3];                       // массив в Heap
let func = function() { return 'Hello'; }; // функция в Heap
let date = new Date();                     // Date объект в Heap

Жизненный цикл переменных

{
  let localVar = 10; // переменная в Stack (в текущей области видимости)
  let obj = { value: 20 }; // ссылка в Stack, объект в Heap
} // localVar удаляется из Stack, obj удаляется из Stack
// но если объект не имеет других ссылок, он будет удален сборщиком мусора

let globalVar = 30; // в глобальном объекте Window (в Heap)

Примитивы vs Объекты

// Примитивы хранятся по значению (копируются)
let a = 10;
let b = a;  // копируется значение 10
a = 20;
console.log(b); // 10 — не изменилось

// Объекты хранятся по ссылке
let obj1 = { name: 'John' };
let obj2 = obj1; // копируется ссылка (оба указывают на один объект)
obj1.name = 'Jane';
console.log(obj2.name); // 'Jane' — изменилось

Замыкания и область видимости

function outer() {
  let x = 10; // в Stack во время выполнения outer
  
  function inner() {
    console.log(x); // x сохраняется в Closure Scope
  }
  
  return inner; // функция с замыканием
}

let closure = outer();
closure(); // 10
// переменная x всё ещё доступна благодаря замыканию

Асинхронный код и Memory

setTimeout(() => {
  // Callback-функция хранится в Memory до выполнения
  console.log('Delayed');
}, 1000);

fetch('https://api.example.com/data')
  .then(response => {
    // Promise callback хранится в Memory
    return response.json();
  })
  .then(data => {
    // данные хранятся в Heap до обработки
    console.log(data);
  });

Утечки памяти (Memory Leaks)

// Плохо: утечка памяти
let bigArray = new Array(1000000);
function doSomething() {
  // bigArray сохраняется в Closure, хотя может быть не нужна
  return bigArray.length;
}

// Хорошо: явно удалить
let data = new Array(1000000);
function process() {
  return data.length;
}
process();
data = null; // явно освобождаем память

// Плохо: слушатели событий
element.addEventListener('click', function() {
  console.log('Clicked');
});
// Если не удалить слушатель, он останется в памяти

// Хорошо: удалить слушатель
element.removeEventListener('click', handler);

Сборщик мусора (Garbage Collector)

let obj = { name: 'John' }; // объект в Heap
let ref = obj;              // ещё одна ссылка

obj = null;  // одна ссылка удалена
ref = null;  // все ссылки удалены
// Garbage Collector удалит объект из Heap

// Пример с циклической ссылкой (в современных V8 обработано):
let parent = { child: null };
let child = { parent: parent };
parent.child = child;

parent = null;
child = null;
// Oба объекта удалены, несмотря на циклические ссылки

Глобальные переменные

// В браузере глобальные переменные хранятся в Window объекте (Heap)
var globalVar = 10;    // window.globalVar
let blockVar = 20;     // НЕ в window (своя область видимости)
const blockConst = 30; // НЕ в window

function myFunc() {}
myFunc();  // window.myFunc

console.log(window.globalVar);  // 10
console.log(window.blockVar);   // undefined

Оптимизация памяти

// 1. Избегать глобальных переменных
var globalVar = 'bad';   // в Window (живёт долго)
let localVar = 'good';   // в блоке (удалится быстро)

// 2. Удалять большие структуры
let largeData = new Array(1000000);
function process() {
  return largeData.length;
}
process();
largeData = null; // явно освободить

// 3. Избегать утечек в слушателях
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
  
  mount() {
    element.addEventListener('click', this.handleClick);
  }
  
  unmount() {
    element.removeEventListener('click', this.handleClick);
  }
  
  handleClick() {
    console.log('Clicked');
  }
}

Вывод

• Примитивы хранятся в Stack
• Объекты, массивы, функции хранятся в Heap
• Ссылки на объекты хранятся в Stack
• Garbage Collector автоматически удаляет неиспользуемые объекты
• Понимание этого механизма критично для оптимизации памяти и избежания утечек