렉시컬 스코프, 클로저

kim yeeun·2023년 11월 29일
1

렉시컬 스코프 (정적 스코프)

함수가 선언된 시점에 상위 스코프가 결정되는것

var x = 1;

function foo() {
  var x = 10;
  
  // 동적스코프라면 호출한 시점에 상위스코프가 결정됨 (10)
  bar();
}


// 선언된시점에 상위스코프가 결정됨
function bar() {
  console.log(x);
}

foo(); 
bar();


결과(렉시컬스코프)
1
1

만약 동적스코프라면 (호출한 시점에 스코프가 정의됨)
10
1

클로저(Closure)

하단코드에서 내부함수를 클로저라고 한다.

const 외부함수 = () => {
		let x = 10; // private 변수(외부에서 접근 불가)

		// 클로저
		// 내부함수에서 x는 렉시컬 스코프에의해 외부함수의 x를 참조함
		const 내부함수 = (y) => {
				x = x + y;
				console.log(x);
		}

		return 내부함수;
}

const addFunc = 외부함수();

addFunc(5); // 15
addFunc(10); // 25

위의 코드를 아래로 바꾸면 좀더 이해가 쉽다.

const 외부함수 = () => {
		let x = 10; // private 변수(외부에서 접근 불가)

		// 클로저
		const 내부함수 = (y) => {
				x = x + y;
				console.log(x);
		}

		return 내부함수;
}

// 외부함수를 실행한것이므로 addFunc = return 내부함수
const addFunc = (y) => {
				x = x + y;
				console.log(x);
		}
		
addFunc(5); // 15
addFunc(10); // 25

위 코드를보면 x는 존재하지않는데 결과가 어디선가 x+y 가 계산되어 값이 나온다.

즉 클로저 함수는

자신이 생성될 때의 환경(렉시컬 스코프)을 기억하는 함수

특징

자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우

외부 함수 밖에서 내부함수가 호출되더라도

외부함수의 지역 변수에 접근할 수 있음

profile
안녕하세요 프론트엔드 엔지니어 김예은입니다.

0개의 댓글