D-14
어제 하루에 3블로깅이 말이 되는가? 의문을 가지며 밤새 복습했지만.
파도파도 끝이없는 자바스크립트 세계관에 정신을 못차리겠다.
그렇다고 안심하기엔 이르다! 오늘 배울 클로저는 더 힘들게 만들 것이니...
하지만 나 정태현 포기는 올 겨울 김장때나 하련다.
한풀이는 여기까지하고 클로저에 대해 알아보자!
📌 렉시컬 스코프(Lexical Scope)
클로저를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다.
🔍 렉시컬 스코프란?
함수를 어디에 선언하였는지에 따라 결정되는 것을 렉시컬 스코프라 말한다.
즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 중요한 점은
함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.
이것을 정적 스코프(Static Scope)라고 부르기도 한다.
렉시컬 스코프 = 정적 스코프
👨🏫 렉시컬 스코프 예제
var x = 1; // global
function first() {
var x = 10;
second();
}
function second() {
console.log(x);
}
first(); // ?
second(); // ?
1
1결과는 변수 x값 1이 두번 출력된다.
second() 함수가 first() 함수 안에서 호출된 것과 상관없이 second()함수는 전역(global) 범위에 선언되어있어 전역(global) 범위에 있는 변수 x의 값 1이 두번 출력된 것이다.
여기서 전역(global)변수를 어떻게 인식하는지 알기 위해서 어제 학습한 스코프 체인을 참고하자.
또 함수의 호출에 따라 상위 스코프가 정해지는 것을
Dynamic Scope라고 하는데
만약 함수의 호출로 상위 스코프가 결정이 된다면
함수second()의 상위 스코프는 자신을 호출한 함수first()와global을 가르켜
함수first()를 호출해 출력했을때 x의 결과는 10이 될 것이다.
그러나 결과는 앞서 말했는 1이 두번 출력되었는데
이는 함수의 호출이 아니라 함수의 선언에 따라 상위 스코프가 결정된다는 것이다.
🔍 클로저란?
이외에도 다양한 사이트에서 클로저의 정의가 다르게 표현되어 혼란스러웠다.
오늘 강의로 나는"자신이 선언될 당시 환경을 기억하는 함수"로 정의해보려한다.
클로저의 함수는 어디에서 호출되는지 무관하게 선언된 함수 주변 환경에 따라
접근할 수 있는 변수가 정해져 스코프와 따로 구분한다.
📌 클로저 = Closure = 페쇄
왜 클로저라고 부르는지 궁금해서 찾아보니
외부 함수 호출이 종료된 후에도 함수의 내부 변수에 대한 메모리 할당을 유지하지만
직접 볼수 없게 은닉화 하기 때문이라 한다.
또한 클로저를 사용하는 이유가 누구든 접근해 확인하고 변경할 수 있는
전역변수를 사용하지 않고 클로저 함수 내부 변수에 접근할 수 있기 때문이다.
👨🏫 클로저 예제
function sayHello (){
const a = 'Hellow';
const b = 'World';
function sumString (){
console.log(a+' '+b);
}
return sumString
}
const myFunc = sayHello();
myFun(); // 'Hello World'- 1. `myFunc`라는 변수가 `sayHello`함수를 호출
- 2. `myFunc` 를 실행
- 3. `'Hello World'` 출력
여기서
myFunc의 부분은 변수a와b를 합친'Hello World'를 출력한다.
그 이유는 클로저 (Closure) 때문이다.
모든 자바스크립트 함수는 선언(생성)될 당시에 클로저가 형성되어 주변 환경,
즉 렉시컬 스코프(Lexical Scope)를 기억할 수 있기 때문이다.
자바스크립트로 휘몰아친 한주였다.
하나를 알기위해 계속 파고파야하는 자바스크립트에서 살아남기위해 게을러지면 안되겠다 다짐하고 자바스크립트의 핵심들을 주말에 다시한번 점검하는 시간을 가져야겠다.
