[JavaScript] 스코프(Scope) - 전역 스코프, 지역 스코프

 

• 스코프 (Scope) 란?
• 전역 스코프 (Global Scope)
• 지역 스코프 (Local Scope)
  • 함수 스코프 (Function Scope)
  • 블록 스코프 (Block Scope)
  • 제외인 var로 코드 진행할 경우

---

자바스크립트를 공부할 때 스코프(Scope)라는 단어를 많이 접할 수 있다.

 

많이 접한다는 것은 꼭 알아야 한다는 것이 아닐까..?

 

그러므로 이번에는 자바스크립트의 스코프(Scope)에 대해 알아볼 것이다.

---

- 스코프 (Scope) 란?

 

스코프(Scope)는 단어 뜻 그대로 '범위'라는 의미를 가지고 있다.

 

즉, 스코프(Scope)는 '변수에 접근할 수 있는 범위'라고 할 수 있다.

 

자바스크립트에서는 크게 두가지 타입의 스코프(Scope)가 존재한다.

 

하나는 전역 스코프(Global Scope), 다른 하나는 지역 스코프(Local Scope)이다.

 

---

- 전역 스코프 (Global Scope)

 

전역 스코프(Global Scope)는 말 그대로 전역에 선언되어 어느 곳에서든 해당 변수에 접근이 가능하다.

 

이것을 전역 변수라고 한다.

 

// 전역 스코프 (Global Scope)
const globalScope = "Hello! I'm global scope!";	  // 전역 변수
console.log(globalScope);	// Hello! I'm global scope!

// 화살표 함수 사용, 이후 포스팅 예정
// function() {} 와 역할은 같습니다.
// 전역 변수는 함수 안에서도 사용 가능합니다.
const isGlobal = () => {
    console.log(globalScope);
}

isGlobal();	// Hello, I'm global scope!

 

전역 변수는 함수 내에서도 사용 가능하고, 어느 곳에서는 사용 가능하다는 예시입니다.

 

---

- 지역 스코프 (Local Scope)

 

지역 스코프(Local Scope)는 해당 지역에서만 접근 가능하며,

 

지역을 벗어난 곳에서는 해당 변수에 접근 불가하다.

 

지역 스코프는 크게 ① 함수 스코프와 ② 블록 스코프로 나뉜다.

 

 

 

---

 

 

① 함수 스코프 (Function Scope)

 

함수 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능한 것을 의미한다.

 

// 함수 스코프 (Function Scope)
const funcScope = () => {
    const text = "This is function scope!"
    console.log(text);	// This is function scope!
}
console.log(text);	// ReferenceError: text is not defined

 

 

② 블록 스코프 (Block Scope)

 

블록 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능한 것을 의미한다.

 

// 블록 스코프 (Block Scope)
{
    const text = "This is Block scope!";
    console.log(text);	// This is Block scope!
}
console.log(text);	// ReferenceError: text is not defined

 

 

---

- 제외인 var로 코드 진행할 경우

 

{
    var age = 26;  // var 사용
}
console.log(age);  // 26

 

블록 내부에서 선언된 변수 age가 이상하게 블록 외부에서도 접근이 된 상태입니다.

 

왜?

var는 블록 스코프가 아니다.

 

추가로, let, const는 블록 스코프이다.