스코프는 값이 저장된 공간이 아니라
변수를 어디서 접근할 수 있는지에 대한 규칙이다.
JavaScript는 변수를
“어디서 실행됐는지”가 아니라
“어디서 선언됐는지”를 기준으로 찾는다.
변수를 찾을 때의 순서:
1. 현재 스코프
2. 자신을 감싸는 상위 스코프
3. 전역 스코프
👉 가까운 곳부터, 없으면 바깥으로 올라간다.
let x = 10;
function foo() {
console.log(x);
}
function bar() {
let x = 20;
foo();
}
bar(); // 10
foo는 전역에서 선언됨
따라서 foo 안에서 x를 찾을 때
bar의 x는 고려되지 않는다
👉 함수는 자신이 선언된 스코프만 본다
var / let 차이 (핵심만)
var는 반복문 전체에서 하나의 변수를 공유하고
let은 반복문 한 바퀴마다 새로운 변수를 만든다
// var
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// 3, 3, 3
// let
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// 0, 1, 2
클로저(Closure)란?
❌ 외운 정의
외부 함수의 변수를 참조하는 내부 함수
⭕ 이해용 정의
함수가 자신이 선언된 스코프를 기억하고
그 스코프에 계속 접근할 수 있는 현상
클로저가 생기는 이유
function outer() {
let a = 1;
return function inner() {
console.log(a);
};
}
const fn = outer();
fn(); // 1
outer 실행은 끝났지만
inner 함수가 a에 접근하고 있음
JS 엔진은 해당 변수를 제거하지 않음
👉 값이 메모리에 남아서가 아니라
접근 경로가 살아 있기 때문
클로저와 메모리의 관계
개념 의미
메모리 값이 저장되는 장소
스코프 변수를 찾는 규칙
클로저 함수가 스코프 접근을 유지하는 현상
클로저는 변수를 저장하는 것이 아니라
변수를 참조할 수 있는 상태를 유지한다.
클로저 예제 한 줄 설명
function makeCounter() {
let count = 0;
return function () {
count++;
return count;
};
}
내부 함수는
자신이 선언된 스코프의 count를 기억하기 때문에
호출할 때마다 이전 상태를 유지할 수 있다.