[JavaScript] 변수의 scope

Moon·2024년 11월 5일

JavaScript | 기초

목록 보기

23/48

자바스크립트의 스코프 (Scope) 이해하기

자바스크립트에서 스코프(Scope)는 변수가 어디까지 유효한지, 즉 변수를 사용할 수 있는 범위를 말한다. 변수를 선언하고 값을 할당하면 어디에서든 그 변수를 사용할 수 있을 것 같지만, 실제로는 변수가 유효한 범위가 정해져 있다. 변수가 유효하지 않은 범위에서 사용되면 오류가 발생한다.

지역 변수(Local Variable)와 전역 변수(Global Variable)

변수는 크게 지역 변수와 전역 변수로 나눌 수 있다. 이 둘의 차이는 변수가 선언된 위치에 따라 달라진다.

1. 지역 변수(Local Variable)

지역 변수는 함수나 블록 안에서 선언된 변수로, 블록문(중괄호) 안에서만 유효하다. 즉, 블록을 벗어나면 더 이상 사용할 수 없다. 이를 로컬 변수라고도 한다.

예시: 함수 안에서 선언된 지역 변수

function myFunction() {
    let x = 3;  // 지역 변수 x
    console.log(x);  // 3 출력
}

myFunction();
console.log(x);  // 오류: x is not defined

x는 함수 내부에서 지역 변수로 선언되었다. 따라서 x는 함수 내부에서만 사용할 수 있다. 함수 바깥에서 console.log(x)를 실행하려고 하면, x는 함수 외부에서 정의되지 않았기 때문에 오류가 발생한다.

Uncaught ReferenceError는 자바스크립트에서 존재하지 않거나 정의되지 않은 변수를 참조할 때 발생하는 오류다. 즉, 코드에서 특정 변수를 사용하려고 했지만, 그 변수가 선언되지 않았거나 스코프 밖에 있는 경우 발생하는 오류다.

2. 전역 변수(Global Variable)

반대로, 전역 변수는 블록 밖에서 선언된 변수로, 프로그램 어디서나 범위에 상관없이 사용할 수 있다. 파일 전체에서 유효하다.

예시: 전역 변수

let x = 3;  // 전역 변수 x

function myFunction() {
    console.log(x);  // 3 출력
}

myFunction();
console.log(x);  // 3 출력

여기서 x는 전역 변수로 선언되었기 때문에 함수 내부와 외부 어디서나 사용할 수 있다. 함수 안에서도 전역 변수 x를 문제없이 참조할 수 있다.

블록문(Block Statement)과 스코프

자바스크립트에서 블록문(중괄호 {}로 감싸진 코드)은 스코프를 정의한다. 블록 안에서 선언된 변수는 그 안에서만 유효하며, 이를 지역 변수라고 한다. 블록문 밖에서 선언된 변수는 전역 변수로서 어디서든 사용할 수 있다.

예시: 블록문과 스코프

let x = 3;  // 전역 변수

function myFunction() {
    let x = 5;  // 지역 변수
    console.log(x);  // 5 출력 (지역 변수 사용)
}

myFunction();
console.log(x);  // 3 출력 (전역 변수 사용)

이 예시에서, 함수 내부에서 같은 이름의 x 변수를 새롭게 선언했다. 이때, 함수 내부에서 x는 지역 변수가 되고, 함수 외부에서는 전역 변수 x를 사용한다.

스코프 체인(Scope Chain)

블록문 안에서 변수를 사용할 때, 자바스크립트는 먼저 지역 변수가 있는지 확인하고, 없으면 전역 변수를 찾는 과정을 거친다. 이 과정을 스코프 체인(Scope Chain)이라고 부른다.

예시: 스코프 체인

let x = 3;  // 전역 변수

function myFunction() {
    let x = 5;  // 지역 변수
    console.log(x);  // 5 출력 (지역 변수 사용)
}

myFunction();
console.log(x);  // 3 출력 (전역 변수 사용)

위 코드에서, 함수 내부에서는 지역 변수 x가 먼저 사용되고, 전역 변수 x는 함수 밖에서만 사용된다. 함수 안에서 지역 변수를 먼저 찾기 때문에, 전역 변수를 덮어쓰지 않는다.

지역 변수와 전역 변수의 충돌

만약 함수 안에서 같은 이름의 변수를 다시 선언하면 어떻게 될까? 함수 내부에서는 지역 변수가 우선이기 때문에, 전역 변수는 덮어쓰기 되지 않는다.

예시: 지역 변수와 전역 변수의 충돌

let x = 3;  // 전역 변수

function myFunction() {
    let x = 5;  // 지역 변수 (전역 변수와 이름이 같음)
    console.log(x);  // 5 출력 (지역 변수)
}

myFunction();
console.log(x);  // 3 출력 (전역 변수)

함수 내부에서는 지역 변수 x를 사용하고, 함수 외부에서는 전역 변수 x를 사용한다. 즉, 함수 안에서 전역 변수는 영향을 받지 않는다.

요약

스코프(Scope): 변수의 유효 범위를 의미하며, 크게 전역 변수와 지역 변수로 나뉜다.

지역 변수(Local Variable): 함수나 블록문 안에서 선언된 변수로, 해당 블록 안에서만 유효하다.

전역 변수(Global Variable): 블록 밖에서 선언된 변수로, 코드 전체에서 유효하다.

스코프 체인: 변수를 사용할 때, 지역 변수를 우선으로 찾고, 없을 경우 전역 변수를 찾는 과정이다.

지역 변수와 전역 변수 충돌: 함수 내부에서 같은 이름의 변수를 선언하면 지역 변수가 우선으로 사용된다.