JS - Scope

Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다.
즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있다.

💡 자바스크립트에 스코프는 global(전역)과 local(지역)이 존재한다.

Global Scope은 전역에 선언되어있어 어느 곳에서든 해당 변수에 접근할 수 있다는 의미

Local Scope은 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미

Q. 그럼 스코프는 언제 생성되는가?

A. 스코프는 함수를 선언할때 생성된다. 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됨

위와 같은 이유로 좀더 세부적인 스코프의 형태는 function-scoped, Block-scope로 나뉘게 된다.

Function scoped

함수에서 선언한 변수는 해당 함수 안에서만 접근할 수 있다.
함수 스코프가 바로 지역 스코프의 예라고 할 수 있다.

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a); // 111
}
print(); // 111
console.log(a); // 1

Block-scope

{}중괄호로 둘러싸인 부분을 블록이다.
함수를 선언할 때 중괄호로 함수 본문을 둘러싸게 되는데 이부분을 블록이라고 할 수 있다.

function print() { // 함수 블록
 console.log(a);
}

{ // 블록
 const a = '1';
}

---

// 전역 변수
let foo = 123; 
const hello='hello!';

{
  // 지역 변수
  let foo = 456; 
  let bar = 456; 
  
  const hello='hello foo'; 
  console.log(hello); // hello foo
}
console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined 

console.log(hello); // hello! 

💡 스코프를 대해 자세히 설명하자면 변수들에 관해 알아야한다.
var, let, const의 차이

간략하게 설명하자면 ES5당시 기존 var의 경우 함수 스코프를 가졌기 때문에 함수 내에서만 지역변수가 유지되는 문제가 있었는데
ES6에서 let / const 키워드가 추가되면서 함수가 아닌 일반 블록에서도 지역변수를 선언할 수 있게 되었다.

즉, var는 Function scoped를 let,const는 Block-scope를 가진다.