[Javascript] 스코프 (Scope)

우리가 변수를 선언했을 때, 그 변수를 사용할 수 있는 범위를 스코프라고 한다.
스코프에는 Global Scope(전역)와 Local Scope(지역)가 있고,
Local Scope에는 Function Scope, Block Scope가 있다.
컴퓨터가 코드를 돌리는 방식을 이해해보자면, 소프트웨어를 돌릴 때 필요한 자원들을 메모리에 올려놓는다. 그 때, 프로그램의 코드가 저장되는 영역은 고정되어 있고, 특정 함수나 조건/반복문에 등에서 쓰이는 변수들은 실행될 때 stack이라는 영역에 들어갔다가 나오게 된다.

if (condition) {
	... block scope ...
}
switch (item) {
	... block scope ...
}
for (const item of items) {
	... block scope ...
}
while (condition) {
	... block scope ...    
}
function hello() {
	... function scope ...
}
const world = () => {
	... function scope ...
}

scope내에 변수가 있다면 그 변수를 사용하고, 없다면 전역에 해당하는 변수가 있는지 체크한다.

var a = 10;
if (true) {
  var a = 20;
  console.log(a); // 20
}
console.log(a) // 20

let b = 20;
if (true) {
  let b = 20;
  console.log(b); // 20
}
console.log(b); //10

var는 function scope에서 동작한다.
간단히 말해서, var로 변수를 선언하면, block scope는 없다고 생각하고 동작하고, function scope에서는 function내부와 외부의 변수값이 연결되지 않는다.

// block scope
var a = 10;
if (true) {
  var a = 20;
  console.log(a); // 20
}
console.log(a); // 20

// function scope
var b = 0;
function hello() {
  var b = 20;
  console.log(b); // 20
}
hello();
console.log(b); // 10

function scope가 범위가 더 넓어서 block scope를 포함한다고 볼 수 있다.
let은 block scope나 function scope에서 모두 동작하기 때문에 scope내부와 외부부의 변수값이 연결되지 않는다.

// block scope
let a = 10;
if (true) {
  let a = 20;
  console.log(a); // 20
}
console.log(a); // 10

// function scope
let b =10;
function hello() {
  let b = 20;
  console.log(b); // 20
}
hello();
console.log(b); // 10

if내부는 block scope이기 때문에, let이나 const로 변수a를 선언하고 값을 할당하면, 아래 test()함수에서 a의 값을 가져오지 못하고 Error가 생긴다. 하지만, var로 변수a를 선언할 경우에는 test()함수에서 a의 값을 사용할 수 있다. block scope임에도 불구하고, var로 선언한 변수는 global scope가 되버려서 어디에서든지 참조할 수 있다.
그렇기 때문에, var보다는 let이나 const를 사용하는 것이 좋다. var를 사용할 경우에, 스코프가 명확하지 않기 때문에 나중에 혼란을 줄 수도 있다.

if (true) {
  var a = 20;
  // let a = 20;
  console.log(a); // 20
}

function test() {
  var b = 30;
  console.log(a); // 20
  console.log(b); // 30
}
test();