Javascript 'Closure'

const outer = () => {
  const out = "outer!"; // 1. outer 함수 안에 지역변수 out 선언

  const inner = () => {
    console.log(out); // 2. 바깥의 out을 참조해 console.log 출력
  };

  return inner; // 3. 바깥의 out을 참조해 console.log를 출력하는 함수를 반환
};

const foo = outer(); // 4. outer함수 호출 -> 변수 foo에 inner함수의 주소값이 저장됨

foo(); // 5. 'outer!'

function scopeA() {
  const a = "호랑이";

  function scopeB() {
    const a = "사자";

    console.log(a);
  }
  scopeB(); // 사자
  console.log(a);
}

scopeA(); // 호랑이
console.log(a); // reference error

function outer() {
  const outer = "outer!";

  function inner() {
    console.log(outer);
  }

  inner(); // outer!
}

function furtherOuter() {
  const furtherOuterVariable = "further outer!";

  function outer() {
    function inner() {
      console.log(furtherOuterVariable);
    }

    inner(); // further outer!
  }
}

function scopeA() {
  const a = "호랑이"; // 선언 시점의 상위 스코프

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

  return scopeB;
}

const scopeC = scopeA();

const a = "기린"; // 실행 시점의 상위 스코프(?)

scopeC(); // '호랑이'

const outer = () => {
  const out = "outer!"; // 1. 바깥 함수 outer의 스코프에 변수선언

  const inner = () => {
    console.log(out); // 2. 내부 함수 inner의 스코프에서 스코프체인을 타고 바깥 함수 스코프의 변수 참조
  };

  return inner; // 3. 1급 시민인 함수 inner를 바깥으로 반환
};

const foo = outer(); // 4.  foo에 inner함수의 주소값이 저장됨

foo(); // 5. outer함수 호출은 종료가 되어서 스코프가 사라져야 하지만 out은 여전히 잘 참조된다.

function outer() {
  let value = 0;

  return {
    increase() {
      ++value;
      console.log(value);
    },
    decrease() {
      --value;
      console.log(value);
    },
  };
}

const count = outer();
count.increase(); // 1
count.increase(); // 2
count.increase(); // 3
count.decrease(); // 2
count.decrease(); // 1
count.decrease(); // 0
console.log(value); // Error

const Counter = () => {
  const [value, setValue] = useState(0); // 이 hook함수가 클로져를 통해 구현되었다.

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue(value + 1)}>+</button>
      <button onClick={() => setValue(value - 1)}>-</button>
    </div>
  );
};

let value = 0;

function increase() {
  console.log(++value);
}

function decrease() {
  console.log(--value);
}

function unknown() {
  value = -100000;
}

increase(); // 1
unknown(); // value: -100000
decrease(); // -100001

const counterCreator = () => {
  let value = 0;

  return {
    increase() {
      console.log(++value);
    },
    decrease() {
      console.log(--value);
    },
  };
};

const counter = counterCreator();

function unknown() {
  value = -100000;
}

counter.increase(); // 1
unknown(); // error: Uncaught ReferenceError: value is not defined
counter.decrease(); // 정상적으로 진행된다면 0

let myValue = 0;
let yourValue = 0;

function increaseMyCounter() {
  console.log(++myValue);
}

function decreaseMyCounter() {
  console.log(--myValue);
}

function increaseYourCounter() {
  console.log(++yourValue);
}

function decreaseYourCounter() {
  console.log(--yourValue);
}

const counterCreator = () => {
  let value = 0;

  return {
    increase() {
      console.log(++value);
    },
    decrease() {
      console.log(--value);
    },
  };
};

const myCounter = counterCreator();
const yourCounter = counterCreator();

myCounter.increase(); // 1
myCounter.increase(); // 2
yourCounter.increase(); // 1
myCounter.decrease(); // 1