스코프 (Scope)

스코프는 유효 범위라고 하며, 변수와 함수가 영향을 미치는 범위를 의미한다.

less

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

변수 선언 키워드에 따른 스코프 차이
├── let / const → 블록 스코프
└── var         → 함수 스코프

const globalNum = 100; // 전역 변수

function print() {
  const localNum = 1000; // 지역 변수
  console.log(`지역 스코프: ${localNum}`); // 지역 스코프: 1000
}

print();
console.log(`전역 스코프: ${globalNum}`); // 전역 스코프: 100

함수 외부에서 선언된 globalNum 변수는 전역 스코프를 가지며, 함수 내부에서도 접근할 수 있다.
print 함수 내부에서 선언된 localNum 변수는 지역 스코프를 가지며, 함수 외부에서는 접근할 수 없다.

전역 스코프 Global Scope

코드 어디에서든 접근할 수 있는 범위이다. 함수 외부에서 선언된 변수는 전역 스코프를 가지며, 전체 코드에서 참조할 수 있다.

let sum = 0; // 전역 변수 선언

function add(num1, num2) {
  sum = num1 + num2; // add 함수 내부에서 전역 변수 sum에 값을 재할당
}

add(10, 15);
console.log(sum); // 25

전역 변수(Global Variable)는 함수 외부에서 선언되어 코드 어디서든 접근 가능하다.
함수 내부에서도 전역 변수에 접근하거나 값을 변경할 수 있다.
함수 실행 후에도 전역 변수는 유지되므로, 다른 코드에서 계속 참조할 수 있다.

지역 스코프 Local Scope

특정 지역(함수나 블록) 내에서만 접근 가능한 범위이다. 함수 내부에서 선언된 변수는 해당 함수 안에서만 사용할 수 있으며, 함수 외부에서는 접근할 수 없다.

function add(num1, num2) {
  let sum = num1 + num2; // 지역변수 sum
  return sum;
}

add(10, 15);
console.log(sum); //  ReferenceError: sum is not defined

지역 변수(Local Variable)는 함수 내부에서 선언되어, 함수 블록 {} 내에서만 유효하다.
함수가 종료되면 지역 변수는 사라지고, 외부에서는 접근할 수 없다.
따라서 함수 외부에서 지역 변수에 접근하려 하면 에러가 발생한다.

블록 스코프 Block Scope

function print() {
  for (let i = 0; i < 10; i++) {
    console.log(i); // 0 ~ 9까지 출력
  }
  console.log(i); // ReferenceError: i is not defined
}

print();

let, const는 블록 스코프를 가지므로, for문 블록 내부에서만 유효하다. 따라서 for문 밖에서 변수 i에 접근하면 에러가 발생한다.

블록이란?

블록(Block)이란 {} 중괄호로 감싼 코드 영역을 의미한다. 조건문, 반복문, 함수 등에서 자주 사용되며, let과 const는 이 블록 내부에서만 유효한 블록 스코프를 가진다.

함수 스코프 Function Scope

function print() {
  for (var i = 0; i < 10; i++) {
    console.log(i); // 0 ~ 9까지 출력
  }
  console.log(i); // 10
}

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

함수 스코프는 var 변수의 유효 범위가 함수 내부 전체라는 의미이다. 즉, var로 선언된 변수는 함수 내부 어디서든 접근 가능하지만, 함수 밖에서는 접근할 수 없다.
var는 함수 스코프를 가지며, 블록 내부에 선언되어도 해당 함수 전체에서 접근 가능하다. 이로 인해 블록 외부에서도 변수 i에 접근할 수 있어, 의도치 않은 값 변경이나 오류가 발생할 위험이 있다.
위의 반복문에서 i가 9일 때 마지막으로 출력되고, 그 다음 i++로 인해 값이 10이 된 후 조건 검사에서 반복이 종료된다. 그래서 for문 밖에서 i를 출력하면 10이 출력된다.

var는 왜 중복 선언이 가능할까?

var라는 키워드가 중복 선언이 가능한 이유는 함수 스코프를 가지며 호이스팅이라는 특성을 갖기 때문이다.

변수 선언 키워드에 따른 스코프 차이

let / const

let num = 10;
let num = 100;

console.log(num);
// SyntaxError: Identifier 'num' has already been declared

let은 같은 스코프 내에서 동일한 이름으로 변수를 중복 선언할 수 없기 때문에 에러가 발생한다. ES6에 도입된 let과 const는 블록 스코프를 가지며, 같은 블록 내에서 재선언하려 할 때 오류가 발생하여 코드의 안정성과 예측 가능성을 높인다.

var

var num = 10;
var num = 100;

console.log(num); // 100

var는 오래된 키워드로, 같은 스코프에서 중복 선언이 가능해 예기치 않은 동작을 일으킬 수 있다. 이로 인해 버그가 생기기 쉽기 때문에, 최신 코드에서는 let과 const 사용이 권장된다.

스코프 (Scope) ​

전역 스코프 Global Scope ​

지역 스코프 Local Scope ​

블록 스코프 Block Scope ​

함수 스코프 Function Scope ​

변수 선언 키워드에 따른 스코프 차이 ​

let / const ​

var ​