JavaScript&TypeScript

JS ) 스코프

백단비 2023. 3. 30. 23:22

스코프는 변수의 유효 범위 즉 변수에 접근할 수 있는 범위를 말합니다.

동일한 식별자 충돌을 방지하기 위해 있는 거죠

변수나 함수 선언 위치에 따라 스코프를 구분할 수 있는데요

스코프에는 전역 스코프 (global scope)와 지역 스코프(local scope)가 있는데요.

지역 스코프는 또 함수레벨 스코프와 블록레벨 스코프로 나눠져요

함수레벨 스코프는 함수에서만 가져다 쓸 수 있고 블록레벨은 블록에서만 가져다 쓸 수 있죠

여기서 블록은 {}중괄호 안을 얘기합니다.

var str_v = "전역 스코프"
let str_l = "전역 스코프"
const str_c = "전역 스코프"

function fncScope() {
	console.log(str_v) // Output : 전역스코프
	console.log(str_l) // Output : 전역스코프
	console.log(str_c) // Output : 전역스코프
}
fncScope()

console.log(str_v) // Output : 전역스코프
console.log(str_l) // Output : 전역스코프
console.log(str_c) // Output : 전역스코프

전역 스코프는 어디서든 불러올 수 있으니 함수 안에서 불러올 수 있고 전역에서 불러올 수 있습니다.

 

앞서서 제가 동일 식별자의 충돌을 방지해준다 했는데요.

식별자 충돌은 이미 선언했던 것을 또 선언했을때 이미 선언되었다고 나오는 것을 말합니다.

변수를 선언할 때 var, let, const를 사용할 수 있는데

여기서 var는 재선언과 재할당이 가능해서 또 사용해도 충돌이 없습니다

하지만 let은 재할당만 가능하고 const는 그냥 선언과 할당이 한 번에 이루어져야 해서 

같은 식별자이름을 사용하면 충돌해서 오류가 뜹니다.

아래 코드 처럼 말이죠

var str_v = "전역 스코프"
let str_l = "전역 스코프"
const str_c = "전역 스코프"

var str_v = "전역 스코프"
let str_l = "지역 스코프" // output : SyntaxError: Identifier 'str_l' has already been declared
const str_c = "지역 스코프" // output : SyntaxError: Identifier 'str_c' has already been declared

그러면 다른 스코프내에서 같은 식별자이름으로 선언하면 어떨까요?

var str_v = "전역 스코프"
let str_l = "전역 스코프"
const str_c = "전역 스코프"

function fncScope() {
	var str_v = "지역 스코프"
	let str_l = "지역 스코프"
	const str_c = "지역 스코프"
	console.log(str_v) // Output : 지역스코프
	console.log(str_l) // Output : 지역스코프
	console.log(str_c) // Output : 지역스코프
}
fncScope()

console.log(str_v) // Output : 전역스코프
console.log(str_l) // Output : 전역스코프
console.log(str_c) // Output : 전역스코프

 

함수 내에서 같은 이름을 지닌 식별자를 만들어도 오류가 생기지 않죠

 

거기다 함수내에서 선언을 하지 않았을 때에는 전역변수를 가지고 오는데

함수 내에 지역변수가 존재하니 함수 내에서 지역변수를 가져와 씁니다.

이게 스코프 체인입니다. 나 선언한 사람? 여기 없어? 그럼 밖에는? 이런 식이죠

자신에게서 가장 가까운 것을 일단 찾고 없으면 다음장소로 가서 찾아와 씁니다.

마지막 장소까지 찾아봤는데 변수가 없으면 referrence error가 발생하죠.

 

 

 

 

뭔가 설명하는 식으로 써봤는데 어색하네요

저도 배우고 있는 걸 쓰는 거라서 잘못된 부분이 있으면 말씀해 주세요 감사합니다.

 

 

 

 

 

 

320x100

'JavaScript&TypeScript' 카테고리의 다른 글

[TS] Interface (인터페이스)  (0) 2024.05.08
TypeScript의 기본 타입  (0) 2023.09.20
TypeScript란?  (0) 2023.09.06
JS) type  (0) 2023.04.21
JS ) 변수 (var, let, const)  (0) 2023.04.05