열정 실천

[JavaScript] 렉시컬 스코핑 (Lexical Scoping) 본문

개발 공부/JS

[JavaScript] 렉시컬 스코핑 (Lexical Scoping)

구운오니 2023. 7. 28. 01:25

📌 렉시컬 스코핑 (Lexical Scoping) 이란?? 

 

렉시컬 스코핑은 동적 스코핑과 반대되는 정적 스코핑으로 쉽게 이해하면 된다.

함수가 호출되는 시점에 따라 상위 스코프를 결정하는 동적 스코핑과 달리 

렉시컬 스코핑 함수가 선언되는 시점에 상위 스코프를 결정한다. 

 

다른 많은 프로그래밍 언어들처럼 자바스크립트도 이 '렉시컬 스코핑'을 따른다. 

 

 


 

다음 코드를 보자

const name = "KOO"

function print1(){
	const name = "ROSS"
	console.log(name);
	print2();    // 함수 호출 위치
}

function print2(){    //함수 선언 위치 
  console.log(name);     
}

print1();

만약 이 렉시컬 스코핑을 따른다면 결과 어떻게 될까???

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

 

 

 

 

👀

 

 

 

 

결과 : 'Ross', 'Koo'

 

print1의 console.log( )의 값은 당연하다. print1 함수 내부의 name에 접근하고 있기 때문이다. 

print2의 함수 선언 위치는 "전역"이다. 때문에 상위스코프는 전역이다.

따라서 print2 / console.log의 name은 전역에 선언된 "KOO"이다. 

 

 

 

 

 

 

동일한 코드에서 만약 렉시컬 스코핑이 아닌 동적 스코핑(Dynamic Scoping)을 따른다면?? 

 

결과 : 'Ross', 'Ross'

 

print2의 함수 호출 위치는 "print1 함수 내부"이다. 때문에 상위스코프는 print1 함수이다.

따라서 print2 / console.log의 name은 print1 함수 내부에 선언된 "ROSS"이다.