자바스크립트 고급 #1 클로저와 스코프

{
  const a = 10;
  console.log(a);   // 10
}
console.log(a);     // ✗ ReferenceError

const message = '바깥';

function inner() {
  console.log(message);   // '바깥' — 자기 위치에서 보이는 변수
}

function outer() {
  const message = '안쪽';
  inner();                 // 어디서 호출하든 결과는 같음
}

outer();   // '바깥'

function createCounter() {
  let count = 0;

  return function() {
    count = count + 1;
    return count;
  };
}

const counter = createCounter();
counter();   // 1
counter();   // 2
counter();   // 3

function createCounter() {
  let count = 0;
  return {
    increment() { count++; return count; },
    decrement() { count--; return count; },
    get value() { return count; },
  };
}

const a = createCounter();
const b = createCounter();

a.increment();  // 1
a.increment();  // 2
b.increment();  // 1 — a와 무관

console.log(a.value);  // 2
console.log(b.value);  // 1

a.count;        // undefined — 외부에서 직접 접근 불가

function attachHandlers(buttons) {
  buttons.forEach((btn, i) => {
    btn.addEventListener('click', () => {
      console.log(`${i}번째 버튼 클릭`);
    });
  });
}

function attachOld(buttons) {
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      console.log(`${i}번째 버튼`);
    });
  }
}

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(`${i}번째 버튼`);
  });
}

function add(a, b) {
  return a + b;
}

function partial(fn, ...preset) {
  return function(...rest) {
    return fn(...preset, ...rest);
  };
}

const add5 = partial(add, 5);
add5(3);   // 8
add5(10);  // 15

function memoize(fn) {
  const cache = new Map();
  return function(arg) {
    if (cache.has(arg)) return cache.get(arg);
    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

const slowSquare = (n) => {
  console.log(`계산: ${n}`);
  return n * n;
};

const fastSquare = memoize(slowSquare);
fastSquare(5);   // 계산: 5 → 25
fastSquare(5);   // 25 (캐시)
fastSquare(3);   // 계산: 3 → 9

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const handleSearch = debounce((query) => {
  fetch(`/api/search?q=${query}`);
}, 300);

input.addEventListener('input', (e) => handleSearch(e.target.value));

function setupHeavy() {
  const huge = new Array(1_000_000).fill(0);  // 큰 배열

  return function() {
    console.log('hi');
  };
}

const fn = setupHeavy();   // huge가 fn에 의해 살아남음 (필요 없는데도)

function setupHeavy() {
  let huge = new Array(1_000_000).fill(0);
  process(huge);
  huge = null;   // 더 이상 필요 없으면 풀기

  return function() { console.log('hi'); };
}

const counter = (function() {
  let count = 0;
  return {
    increment() { return ++count; },
    decrement() { return --count; },
    get value() { return count; },
  };
})();

counter.increment();  // 1
counter.count;         // undefined — 못 봄

console.log(x);          // ✗ ReferenceError
let x = 10;