Quartz sync: Jun 9, 2025, 4:31 PM

Author: codeyoma

content/Computer Science/5 Software Development/Programming Language/JavaScript/Closure Trap.md

@@ -0,0 +1,56 @@
+---
+description:
+aliases:
+created: 2025-06-09
+modified: 2025-06-09
+---
+
+- 클로저가 변수를 캡처하는 방식 때문에 생기는 예상치 못한 동작
+	- 
+		```js
+		for (var i=0; i<10; ++i) {
+		  setTimeout(function() {
+		    console.log(i); // 10, 10, 10, 10, 10, 10 ...
+		  }, 1000);
+		}
+		```
+	- `var`로 선언된 `i`는 함수 스코프 변수이고, setTimeout 콜백은 루프가 끝난 후에 실행되므로, 모든 클로저가 같은 i를 참조하게 됨
+- solutions
+	- 
+		```js
+		// using IIFE (immediately invoked function) 
+		// with delay
+		for (var i=0; i<10; ++i) {
+			(function(j) {
+				setTimeout(function() {
+					console.log(j);
+				}, 1000);
+			})(i);
+		}
+		
+		// without delay
+		for (var i=0; i<10; ++i) {
+			setTimeout((function(i) {
+				console.log(i);
+			})(i), 1000)
+		}
+		
+		
+		// wrap in a function 
+		for (var i = 0; i < 10; i++) {
+			function timer(j) {
+				setTimeout(function() {
+					console.log(j);
+					}, j);
+				};
+			timer(i); 
+		}
+		
+		
+		// ES6, use let instead of var
+		for (let i=0; i<10; ++i) {
+			setTimeout(function() {
+				console.log(i);
+			}, 1000);
+		}
+		```

content/Computer Science/5 Software Development/Programming Language/JavaScript/Closures.md

@@ -0,0 +1,130 @@
+---
+description:
+created: 2025-05-18
+modified: 2025-06-09
+aliases:
+  - 클로저
+---
+
+- [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures)
+	- is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
+	- gives a function access to its outer scope. In JavaScript, closures are created every time a function is created, at function creation time.
+	- 함수가 선언될 때의 렉시컬 스코프 안의 참조를 기억
+	- 함수가 실행될 때, 렉시컬 스코프 안의 변수들에 접근할 수 있다
+		- 값이 아닌 접근할 수 있는 연결(참조)를 유지
+	- 함수 내부에 있는 함수가 외부 변수에 접근할 수 있는 건 클로저
+	- 
+		```js
+		function outer() {
+		  let count = 0;
+		
+		  function inner() { // closures 
+			count++;
+			console.log(count);
+		  }
+		
+		  return inner;
+		}
+		
+		const fn = outer(); // outer는 실행되고 종료됨
+		fn(); // 1
+		fn(); // 2
+		```
+- 열린 변수를 닫힌 변수로
+	- lambda calculus
+		- free variables
+			- 내부에서 정의되지 않고, 외부에서 참조되는 변수
+			- 외부에서 정의된 변수
+		- closed lambda expression
+			- free variables가 없는 람다 표현식
+		- open lambda expression
+			- free variables가 하나 이상 있는 람다 표현식
+			- 람다 표현식 내에서 참조되는 외부 정의 변수가 있으면
+		- Bound Variables (akaDependent, Restricted Variables)
+			- 클로저에 의해 묶여진 자유 변수
+			- 클로저가 활성 상태인 동안에는 가비지 컬렉터의 대상에서 제외
+				- 해당 변수가 참조되고 있으니까
+- precautions
+	- 메모리 누수 가능성
+	- 코드의 복잡성
+		- 이해의 어려움
+		- 디버깅 어려움
+- use cases
+	- key points
+		- encapsulation
+		- data hiding
+		- state persistence
+	- examples
+		- currying
+			- 여러 인자를 받는 함수를 단일 인자를 받는 함수로 변환
+				- 함수의 부분 실행, 지연 실행 가능하게
+			- 함수의 재사용성, 모듈성 향상
+			- 
+				```js
+				function createLogger (type) {
+					return function (message) {
+						console.log (`[${type}] ${message}`); // 파라미터도 외부 변수이니 묶인 변수됨
+					}
+				}
+				const errorLogger = createLogger ( 'ERROR');
+				const infoLogger = createLogger ( 'INFO');
+				const warningLogger = createLogger ('WARNING');
+				errorLogger("something");
+				infoLogger("something");
+				warningLogger("something");
+				```
+		- deferred execution
+			- 지연 실행
+			- 모든 함수의 인자가 등록되어야 실행
+			- 
+				```js
+				function add(a) {
+					return function (b) {
+						return function (c) {
+							return a + b + c;
+						}
+					}
+				}
+				console. log (add (1) (2)); // not yet
+				console. log (add (1) (2) (3)); // 6
+				```
+			- 리덕스 미들웨어의 구조
+				- `const middleware = store => next => action => {}`
+		- react
+			- 함수형 컴포넌트는 자체적으로 상태 저장안되는데 어떻게?
+				- (*현재는 클로저 아님*)
+				- 함수 컴포넌트는 상태가 변경될 때마다 새로운 인스턴스를 생성하기 때문에 초기화된 상태만을 가질 수 있었다
+				- `hook`을 통해 상태 보존
+			- `useState` 간단히 구현해보기
+				- 
+					```js
+					function createUseState() {
+						let state;
+						
+						function setState(newState) {
+							state = newState;
+							render();
+						}
+						
+						function useState(initialState) {
+							state = state === undefined ? initialState : state;
+							return [state, setStatel;
+						}
+						
+						return useState;
+					}
+					```
+			- `useEffect`의 [[Closure Trap]]
+				- useEffect hook은 사이드 이펙트 처리용
+				- 의존성 배열의 값 변화에 따라 콜백함수 실행
+					- 필요할때 사이드 이펙트 실행
+				- 콜백 함수
+					- (컴포넌트의 렌더링 시점의) 상태와, 프롭을 기억
+						- 클로져 특성 (초기 상태 캡처)
+						- 그러므로 새로운 상태일때는 업데이트 해야함
+				- 의존성 배열
+					- [[Closure Trap | 클로저 트랩]]을 피하기 위해
+					- useEffect의 콜백 함수가 의존해야하는 변수들
+					- 의존 변수들 상태가 변할 때마다, 콜백 함수가 다시 실행(생성)
+					- 콜백 함수는 최신 상태 기억하게 된다
+					

content/Computer Science/5 Software Development/Programming Language/JavaScript/Execution Context.md

@@ -0,0 +1,42 @@
+---
+description: 
+aliases:
+  - 실행 컨텍스트
+created: 2025-06-09
+modified: 2025-06-09
+---
+
+- Execution Context
+	- 코드가 실행되는 환경을 말함
+	- 어떤 변수, 함수에 접근 가능한지를 결정
+-  구성 요소
+	- `Variable Environment`
+		- `var`, 함수 선언 등
+		- lexical environment과 겹쳐보이지만, 초기화용
+	- `This Binding`
+		- `this`가 참조하는 값
+	- `Scope Chain`
+		- `Lexical Environment`
+			- Activation Object
+				- 특정 스코프의 변수와 함수 선언을 저장하는 객체
+				- 구성 요소
+					- `Environment record`
+						- 내부 지역 변수, 참조
+					- `Outer Lexical Environment Reference`
+						- 전역 환경, 부모 스코프의 lexical environment 를 참조
+						- [[Closures]]의 원리 
+- 종류
+	- Global Context
+		- 전체 코드 실행 시 생성
+		- browser - `window` 
+		- node - `global`
+	- Function Context
+		- 함수 호출마다 생성
+	- Eval Context
+		- `eval()` 실행 시 생성
+- 실행 과정
+	- 컨텍스트 생성
+		   - 변수/함수 선언을 메모리에 올림 (호이스팅)
+	- 컨텍스트 실행
+		   - 코드 실행
+		   - 함수 호출 시 새로운 컨텍스트가 스택에 push됨