[ javascript ] 24.10.30 클로저 기록

closure

- (공장·학교·병원 등의 영구적인) 폐쇄(되는 상황) → a situation or occurrence in which something (such as business or factory) closes forever

- (도로·교량의 일시적) 폐쇄

- 무언가 완성되거나 문제가 해결된 기분

- (힘든 일의) 종료[종결] → 이혼 또는 가족의 죽음과 같은 안좋은 경험이 끝나서

차분하고, 평범하게 다시 살아가는 것을 시작할 수 있는 기분[분위기?]

 

a closure is the combination of a function / bundled together with references to its surrounding state ( the lexical environment ) → 클로저는 그것을(함수) 둘러싸는 상태, 즉 어떤 함수가 선언되었을 때 그 함수가 선언된 영역에서의 상태, 예를 들면 지역변수와 같은 데이터가 저장되어 있는 렉시컬 환경을 참조하는 것과 함께 묶은 함수(그것)의 조화를 의미한다. 클로저는 함수와 그 함수가 선언된 영역의 상태(렉시컬 환경에 저장된 데이터(예를들면 지역변수와 같은))를 함께 의미한다. 함수의 렉시컬 환경과 함수를 둘러싼, 함수를 선언한 영역의 렉시컬 환경 두 개의 렉시컬 환경을 의미하며, 함수는 그 함수를 둘러싼 외부의 상태(외부의 렉시컬 환경)에 영향을 줄 수 있다.

클로저는 외부에서 접근하지 못하는 지역변수의 값을 사용 및 접근 가능하여 지역변수의 값을 변경하는 것은 물론 값의 유지를 할 수 있다는 강점이 있다.

 

var 키워드를 사용한 반복문 블록에서 비동기 함수를 사용할 때

 

// let i = 0;

for(var i = 0; i<100; i++) {

// for문이 먼저 돌고, 완료되면 for문 밖에서 i는 100로 출력된다.

// 이 때 i는 var 키워드로 인해 전역변수가 되기 때문에

// setTimeout() 함수 내 console.log(i) 에 찍히는 i의 값이 100

setTimeout( function() {

console.log(i);

}, i*1000);

}

var 키워드를 사용해서 블록문을 갖는 반복문에서 변수를 선언할 경우 var i = 0;

var 키워드를 사용한 변수의 유효범위는 함수 스코프이므로

반복문의 조건식에 의해 i의 값이 99까지 변화된 후 ++증감식에 의해 i의 값이 100이 되는데 이 i의 값은 전역변수가 되므로 setTimeout함수 내부에 콘솔에 찍히는 i의 값은 100이 된다 → for문으로 인해 i의 값이 100이 되고, 100이라는 값을 저장하고 있는 변수 i는 전역변수, 이 전역변수를 setTimeout함수가 사용하게 된다.

 

let 키워드로 변수 선언시 let i = 0

let 키워드를 사용한 변수의 유효범위는 블록 스코프이므로

반복문으로 증가한 i의 값이 for문의 종료와 함께 소멸되는 것,

setTimeout함수 내에서 사용하는 i의 값은 초기화된 i의 값을 받아

i값마다 setTimeout함수에 작성된 명령문을 실행하게 된다.

***for문이 반복될 때마다 새로운 i값으로 모든 내부 블록을 돈다.

 

***var 키워드는 함수레벨 스코프를 let 키워드는 블록레벨 스코프를 가진다는 것을 이해하고 있어야함. 블록이란 함수를 포함해 if문, for문, while문 등 중괄호{}로 묶은 부분을 의미한다.

 

—-----------------------------------------------------------------

 

렉시컬 환경과 var와 let키워드를 사용해서 변수를 선언했을 때 변수의 유효범위(scope)를 먼저 알기

 

lexical: (한 언어의) 어휘의 → relating to words or vocabulary 관련있는 단어

***자바스크립트에서 lexical이란 흐름, 문맥의 의미로 파악하면 될 듯

 

하기와 같이 var 키워드 사용해서  for문(반복문)과 비동기를 함께 작성하면

setTimeout 함수에 첫 번째 매개변수로 전달한 함수 블록 내부의 실행문 console.log(i)의 결과는 0이 아닌 5가 출력되는 문제가 발생하는데 이는 for문에 작성된 var i = 0; 를

let 키워드를 사용해 let i = 0; 으로 작성하거나 클로저를 사용해서 해결하는 방법이 있다(즉시실행함수로 setTimeout함수를 감싸준다)

 

function a() {

for(var i = 0; i<5; i++) {

setTimeout(function() {

// i가 5로 모두 찍혀버리는 문제 발생

// for문에 작성한 var i = 0; 을 let으로 변경하면 문제 해결 가능

// 혹은 클로저 함수로 문제해결할 수 있음

console.log(i);

}, i*1000);

}

}

 

a();

—-----------------------------------------------------------------

 

클로저는 함수와 함수 외부변수와의 관계를 의미한다.

오늘 클로저를 이해했는가? No

클로저를 이해하려면 어떤 값을 참조하는지,

값 변화에 대한 이해도를 높여야할 듯

아직 클로저를 이해하지 못함

제로초님이 강의하는 자바스크립트 강의를 주행해봐야겠다.

 

참고강의

1. ZeroCho의 JS 중급 강좌 8-10. 클로저

2. [인간 JS 엔진 되기 2-8]클로저(closure) 분석