[JavaScript] Scope란?

Intro

이전 글에서 함수에 대해서 알아보았는데 계속 scope가 어쩌고 저쩌고 화살표 함수에서 어쩌고 this 바인딩 안된다고 막 내용들이 많았는데 두리뭉실하게는 알겠는데 정확히 이게 뭐지 라는 생각이 계속 들어서 이전 글 내용을 위해서 일단 scope를 먼저 알아볼려고 한다.

---

Scope

말 그대로 범위라는 이름으로 변수에 접근할 수 있는 범위 라고 할 수 있다.

크게 Golbal(전역)과 Local(지역) 2가지로 나눌수 있고, local 아래로 함수와 블록 스코프로 나뉜다.

• Global Scope(전역 스코프)
• Local Scope (지역 스코프)
  • Function Scope(함수 스코프)
  • Block Scope(블록 스코프)

Global Scope

코드 어디에서든 접근 가능한 범위를 의미하며, 스크립트 전체에서 접근 가능한 변수, 함수, 객체 등이 이에 해당합니다

var globalVariable = "전역 스코프에 속한 변수";

if (true) {
  console.log(globalVar); // 전역 스코프에 속한 변수
}

console.log(globalVariable); // 전역 스코프에 속한 변수

Local Scope

특정 부분에서만 접근 가능한 범위를 의미하며, 일반적으로 함수 내부를 가리키며, 해당 함수 내부에서만 접근 가능한 변수, 함수, 객체 등을 말합니다

Function Scope

함수 코드 블록 안에서 선언된 변수는 함수 내에서만 유효한 지역 변수이므로 외부에서는 접근할 수 없다.

var functionVariable = "전역 스코프에 속한 변수";

function globalFunction() {
  var functionVariable = "함수 스코프에 속한 변수";
  console.log(functionVariable); // 출력: 함수 스코프에 속한 변수
}

globalFunction(); // 출력: 함수 스코프에 속한 변수
console.log(functionVariable); // 출력: 전역 스코프에 속한 변수

Block Scope

중괄호{ } 블록 내부에 선언된 변수는 코드 블록 내에서만 유효하고 외부에서는 참조할 수 없는데, ES6 이전 JavaScript에서는 변수가 var 뿐이였기에 호이스팅 문제로 함수 스코프만 따랐지만, ES6 부터 let과 const 변수가 추가되며 if, for, while 등의 모든 코드 블록에서 적용가능합니다.

if (true) {
  let blockVariable = "블록 스코프에 속한 변수";
  console.log(blockVariable); // 블록 스코프에 속한 변수
}

console.log(blockVariable); // Uncaught ReferenceError: blockVariable is not defined

Lexical Scope(렉시컬 스코프) 
스코프의 종류라고 보기 보단 동작 방식을 설명하는 특징으로 상위 스코프를 결정하는 방법이다

동적 스코프 : 함수를 어디서 호출 하였는지에 따라 상위 스코프 결정
렉시컬 스코프 : 함수를 어디서 선언 하였는지에 따라 상위 스코프 결정 (대부분 언어에서 사용)

---

마무리

처음에는 Function +  var면 함수 스코프이고, { } + let or const 는 블록 스코프라고 하길래, 아니 뭔 소리야? 함수에 let or const 사용하면?? 함수 외에 var 사용하면? 어떻게 되는데? 라고 생각을 가지며 혼동이 왔었는데 정리하고 보니 그냥 var가 문제다 저놈의 호이스팅 때문에 중복선언 때문에 자유도 너무 높게 만들어져서 나뉜 문제라 생각이 든다.

 

[참고]

도서 - 제로초의 자바스크립트 입문

도서 - 코딩 자율학습 HTML +  CSS + 자바스크립트