[ JavaScript ] Scope란?!

자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지, 변수에 접근할 수 있는 범위이다.

 

스코프는 총 2가지로 나누어져 있다.

전역 스코프 ( Global Scope )
지역 스코프 ( Local Scope ) - 함수 스코프 / 블록 스코프

1. 전역 스코프 ( Global Scope)

코드의 어느곳에서든 변수를 참조할 수 있는 범위이다. 

중괄호 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 변수들을 전역 변수라고 한다.

 

[ 전역 스코프의 문제점 ]

 

2. 지역 스코프 ( Local Scope )

함수내에서의 범위이며, 자기 자신과 하위 범위에서만 참조 할 수 있다.

중괄호 안을 지역 스코프라고 하고 지역 스코프에서 선언된 변수들을 지역 변수라고 한다.

 

지역 스코프에는 함수 스코프와 블록 스코프 두가지로 나누어져 있다.

함수 스코프 ( Function Scope )  - 함수 기준! 
블록 스코프 ( Block Scope ) - 블록 기준! 

2-1. 함수 스코프 ( Function Scope )

함수 스코프는 let과 const가 없고 var만 존재하던 ES6이전까지 자바스크립트가 따르던 스코프라고 한다.

함수 스코프는 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수로 취급한다.

함수 안에 선언한 변수는 지역변수! 중괄호안의 변수는 지역변수 X 

중괄호 안에 선언한 변수를 지역변수가 아닌 전역 변수로 인식한다. 

( var는 함수 스코프 )

이런 단점을 보안하기 위해 ES6부터 블록 스코프가 등장하게 되었다.

 

2-2. 블록 스코프 ( Block Scope ) 

블록 스코프는 자바스크립트에서 var의 단점을 보완하기 위해 ES6부터 let과 const가 등장하면서 도입된 개념이다.

블록 스코프는 모든 중괄호 안에 선언된 변수는 지역 변수로 취급한다.

블록 안에 선언한 변수는 지역변수! 

중괄호 안에 선언한 name을 지역변수로 취급하여 마지막 줄 console.log(name)이 "전역변수 name입니다" 를 출력하게 된다.

각각의 블록이 독립적으로 존재하기 때문에 블록 안에 정의된 변수와 함수는 그 블럭안에서만 사용할 수 있고, 

다른 블럭에서 같은 변수이름을 사용해도 에러가 나지않고 사용할 수 있다. 

( let 과 const는 블록 스코프 )

 

---

3. 렉시컬 스코프 ( Lexical Scope)

자바스크립트의 스코프는 렉시컬 스코프를 따른다.

렉시컬 스코프는 함수를 어디서 호출 됐는지가 아니라 어디서 선언되었는지에 따라 결정된다.

 

선언될 때 접근할 수 있었던 변수는 호출 후 접근이 가능하지만 선언될 때 접근이 불가능했던 변수는 호출 후에도 접근이 할 수 없다. 

test함수를 호출할 때 age변수에 접근이 가능하더라도, 선언할 때에는 접근이 불가능하므로

에러가 발생한다.

 

---

[ 출처 ]

Javascript - 스코프 (Scope)란?