[JavaScript] 지역 변수와 전역 변수(변수의 범위)

📝지역 변수와 전역 변수(변수의 범위)

✏️전역 변수(Global Variable)는 스크립트 전체에서 접근할 수 있는 변수로, 함수 외부에서 선언된 변수이다

이 변수는 스크립트 전역에서 사용할 수 있으므로 여러 함수에서 공유되어 사용될 수 있다

하지만 전역 변수는 값이 변경될 가능성이 높아서 예측하지 못한 결과를 만들 가능성이 있으며, 메모리 공간을 계속 차지하고 있어서 성능 이슈가 발생할 수 있기 때문에 전역 변수를 최소화하는 것이 좋다

 

✏️지역 변수(Local Variable)는 함수 내부에서 선언되는 변수로, 함수 내부에서만 사용할 수 있다

지역 변수는 함수 실행 시 생성되며, 함수가 종료될 때 함께 소멸한다

지역 변수는 함수 내에서만 유효하기 때문에, 다른 함수에서는 접근할 수 없다

이렇게 함수 내부에서만 유효한 변수는 외부에서 접근할 수 없기 때문에, 변수 이름의 충돌을 방지하는데 도움을 준다

 

아래 코드에서 전역 변수 globalVar는 함수 내에서도 사용할 수 있고, 함수 외부에서도 사용할 수 있다

지역 변수 localVar은 함수 내부에서만 사용할 수 있다. 함수 외부에서 localVar에 접근하면 ReferenceError가 발생

var globalVar = 'global'; // 전역 변수

function localScope() {
  var localVar = 'local'; // 지역 변수
  
  console.log(globalVar);
  console.log(localVar);
}

localScope();
// 출력 결과
// global
// local

console.log(globalVar);
// 출력 결과 global

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

 

+  함수 내에 { } 블록을 걸고 var 키워드로 변수를 선언한 경우, 해당 변수는 함수 스코프(function scope)를 가진다

이는 해당 변수가 선언된 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없다

하지만 let 키워드를 사용하여 변수를 선언한 경우, 해당 변수는 블록 스코프(block scope)를 가진다

블록 스코프는 해당 변수가 선언된 중괄호 { } 블록 내에서만 유효하며, 블록을 벗어나면 참조할 수 없다

function scopeTest() {
  var x = 1;
  let y = 2;
  {
    var x = 3;
    let y = 4;
    console.log("x inside block: " + x); // 출력 결과: 3
    console.log("y inside block: " + y); // 출력 결과: 4
  }
  console.log("x outside block: " + x); // 출력 결과: 3
  console.log("y outside block: " + y); // 출력 결과: 2
}

scopeTest();

위의 코드에서, var 키워드로 선언된 변수 x는 블록 내에서 재할당이 일어난다

이는 var 키워드로 선언된 변수의 스코프가 함수 스코프이기 때문이다

따라서 블록 내에서 선언된 x는 함수 내부에서 전역 변수로 취급되며, 값이 변경된다

반면 let 키워드로 선언된 변수 y는 블록 스코프를 가지므로, 블록 내에서 선언된 y는 블록 내에서만 유효한다

블록을 벗어난 후에도 y의 값은 2로 유지된다

 

ex) 아래의 코드에서는 let으로 선언된 변수 a는 블록 내에서만 접근 가능하므로 블록을 벗어나면 a에 접근할 수 없다

function scopeExample() {
  var x = 1;
  if (true) {
    let a = 2;
    var b = 3;
  }
  console.log(x);
  // 1
  console.log(a);
  // ReferenceError: a is not defined
  console.log(b);
  // 3
}