[ js ] 스코프 이해하기

그룹스터디 🦆 팀 러버덕과함께!

<목차>
1.스코프란?
2.스코프의 종류
3.중첩 스코프
4.스코프 체인

1.스코프(socpe)란?

스코프(scope)는 '범위'라는 의미로 변수의 범위를 알려준다.
js엔진에게 변수가 어디에 저장되는지 유효범위가 어디까지인지 알려준다.
또는 js엔진이 식별자(변수가 메모리에 저장되어있는 이름) 검색시 활용하는 규칙이라고도 한다.

만약

var a =2;
console.log(a)

여기서 a의 값을 알아내기까지 과정을 살펴보면,

1️⃣ js엔진이 현재 실행중인, 해당 스코프에서 a라는 변수가 있는지 검색한다.
2️⃣ js엔진은 변수 a가 해당 스코프 내에서 접근할 수 있다면 a의 값을 찾는다.
3️⃣ a의 값을 가져와서 console.log()에 넘겨준다.

2.스코프의 종류

1.전역 스코프

전역 스코프는 어디에서나 js엔진이 변수를 찾을 수 있다.

var a =2;
function test(){
  console.log(a); //2
 }
 console.log(a); //2
 test();
 ✨ 블럭 내에서도 외부에서도 어디서든 a에 접근할 수 있다! 

2.지역 스코프

{}, 함수 내에서만 사용가능하다.
외부에서는 변수에 접근할수없지만,
함수내에서는 외부 변수접근가능하다.

var a =2;
function test(){
   var b = 3;
   console.log(b); //3;
   console.log(a); //2
 }
 console.log(a); //2
 console.log(b); //⛔️ ReferenceError 
 test();

3.중첩 스코프

코드 블럭 안에 다른 블럭, 함수 안에 다른 함수가 중첩될 수 있다.
이 말은, 스코프도 중첩된다는 말이고 하나의 스코프가아닌 여러개의 스코프가 생성된다.

const a = '나는 전역';

function outer() {
	console.log(a); 
	const a = 'outer의 변수';
	
	function inner() {
		console.log(a);
	}
    inner();
}
outer();

!!Quiz
❓ inner()함수에 있는 콘솔값,a의 값은 무엇일까요?
.
.
.

🙅‍♀️ : '나는 전역'
🙆‍♀️ : 'outer함수의 변수'

전역(글로벌) 스코프 : 변수 a와 함수 outer()이다.
지역스코프 : outer함수안에있는 변수a와 inner()함수이다.
함수 내에서도 outer함수가 상위 스코프, inner함수가 하위 스코프다.
1️⃣ js엔진은 현재 실행중인 하위 스코프(inner함수) 안에 변수가 있는지 먼저 찾는다.
2️⃣ 만약 해당 변수를 찾지못한다면 상위 스코프(outer함수)로 이동해서 변수를 검색한다.

여기서, 하위 스코프는 상위 스코프를 참조할 수 있다라는것을 알 수 있다.
즉, 엔진은 현재 실행중인 스코프에서 변수를 찾고 못찾으면 상위 스코프로 올라가고 변수를 찾을 때까지 상위 스코프로 올라가다가 마지막 전역(글로벌)까지 도달한다. 만약 변수를 찾았다면 엔진은 변수찾는것을 그만한다.
이처럼 스코프를 사용하면 변수명 중복 충돌을 피할 수 있다.

4.스코프 체인

스코프 체인은 중첩스코프에서 다뤘던거에서 코드블럭 내부에 상위스코프 하위스코프같이 스코프가 계층적으로 연결된걸 스코프 체이닝이라고 합니다.