JavaScript를 배우다 보면 변수가 어디서는 접근되고 어디서는 안 되는 상황에 당황하신 적 있으실 겁니다. 함수 안에서 선언한 변수가 밖에서 접근되지 않는다거나, 예상치 못한 곳에서 전역 변수가 변경되어 버그가 생기는 경우 말이죠.
저도 처음 JavaScript를 배울 때는 스코프 개념이 헷갈려서 많은 실수를 했었습니다. 특히 var, let, const의 차이를 제대로 이해하지 못해 예상치 못한 버그를 만들어냈어요. 하지만 스코프의 원리를 제대로 이해하고 나니 변수 관리가 훨씬 수월해졌고, 더 안전하고 예측할 수 있는 코드를 작성할 수 있게 되었습니다.
이 글에서는 JavaScript 스코프의 핵심 개념부터 실무에서 바로 활용할 수 있는 변수 관리 노하우까지 명확하게 알려 드릴게요.
전역/함수/블록 스코프의 차이점부터 스코프 체인, 렉시컬 스코프, 그리고 실제 프로젝트에서 활용할 수 있는 패턴까지, 실제 코드 예제와 함께 단계별로 살펴보겠습니다.
JavaScript 스코프란?
JavaScript 스코프(Scope)란 변수와 함수에 접근할 수 있는 유효한 범위를 의미합니다. 스코프는 변수가 어디서 선언되었는지에 따라 해당 변수를 참조할 수 있는 코드 영역을 결정하며, JavaScript의 핵심 개념 중 하나입니다.
JavaScript 스코프의 3가지 종류
1. 전역 스코프 (Global Scope)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 전역 스코프에 선언된 변수들
const userName = "홍길동"; // 전역 변수
let score = 100; // 전역 변수
function showWelcome() {
console.log("안녕하세요 " + userName); // 전역 변수에 접근 가능
}
function showScore() {
console.log("점수: " + score); // 전역 변수에 접근 가능
score = score + 10; // 전역 변수 수정 가능
}
showWelcome(); // "안녕하세요 홍길동"
showScore(); // "점수: 100"
showScore(); // "점수: 110"
|
전역 스코프의 특징:
- 코드의 최상위 레벨에 선언된 변수들이 속합니다.
- 프로그램 어디서든 접근할 수 있습니다.
- 브라우저에서는
window 객체의 속성이 됩니다.
실무에서의 활용:
전역 변수는 애플리케이션 전체에서 공유해야 하는 설정값이나 상태 정보를 저장할 때 유용해요. 하지만 너무 많이 사용하면 코드가 복잡해지고 예상치 못한 버그의 원인이 될 수 있어 주의해야 합니다.
2. 함수 스코프 (Function Scope)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| function calculateGrade() {
// 함수 스코프 내의 변수들
const studentName = "김학생"; // 함수 내부에서만 접근 가능
let mathScore = 85; // 함수 내부에서만 접근 가능
let englishScore = 90; // 함수 내부에서만 접근 가능
function getAverage() {
// 중첩 함수도 함수 스코프를 가짐
let average = (mathScore + englishScore) / 2; // 이 함수 내부에서만 접근 가능
// 외부 함수의 변수에 접근 가능
console.log(studentName + "의 평균: " + average);
return average;
}
let finalGrade = getAverage();
console.log("최종 등급: " + (finalGrade >= 90 ? "A" : "B"));
}
calculateGrade(); // 함수 실행
// console.log(studentName); // ❌ 에러! 함수 외부에서는 접근 불가
// console.log(mathScore); // ❌ 에러! 함수 외부에서는 접근 불가
|
함수 스코프의 장점:
- 데이터 은닉: 함수 내부의 변수를 외부에서 접근할 수 없어 데이터를 안전하게 보호합니다.
- 네임스페이스 분리: 다른 함수와 변수명 충돌을 방지합니다.
- 메모리 관리: 함수 실행이 끝나면 내부 변수들이 가비지 컬렉션(메모리 정리) 대상이 됩니다.
3. 블록 스코프 (Block Scope)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| function checkAge() {
const users = ["김철수", "이영희", "박민수"]; // 함수 스코프
// if 블록 스코프
if (users.length > 0) {
const message = "사용자가 있습니다"; // 블록 스코프
let currentUser = users[0]; // 블록 스코프
console.log(message); // "사용자가 있습니다"
console.log("현재 사용자: " + currentUser); // "현재 사용자: 김철수"
}
// for 블록 스코프
for (let i = 0; i < users.length; i++) {
const user = users[i]; // 블록 스코프 (각 반복마다 새로운 변수)
console.log((i + 1) + "번째 사용자: " + user);
}
// console.log(message); // ❌ 에러! 블록 외부에서 접근 불가
// console.log(currentUser); // ❌ 에러! 블록 외부에서 접근 불가
// console.log(user); // ❌ 에러! 블록 외부에서 접근 불가
}
checkAge();
|
블록 스코프의 특징:
let과 const로 선언된 변수만 블록 스코프를 가집니다.- 중괄호
{} 안에서 선언된 변수는 해당 블록 내에서만 접근할 수 있습니다. - 반복문에서 특히 유용하게 활용됩니다.
var vs let vs const: 스코프 차이점 완벽 정리
실무에서 가장 많이 헷갈리는 부분이 바로 var, let, const의 스코프 차이입니다.
| 특성 | var | let | const |
|---|
| 스코프 | 함수 스코프 | 블록 스코프 | 블록 스코프 |
| 재선언 | 가능 | 불가능 | 불가능 |
| 재할당 | 가능 | 가능 | 불가능 |
| 호이스팅 | 선언부만 호이스팅 | 호이스팅되지만 접근 불가 | 호이스팅되지만 접근 불가 |
| 초기값 | 선택사항 | 선택사항 | 필수 |
var의 문제점
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function showVarProblems() {
console.log(typeof userName); // undefined (호이스팅으로 인해)
if (true) {
var userName = "김개발"; // var는 블록 스코프를 무시
var userName = "이코딩"; // 재선언이 가능해서 실수 발생 가능
}
console.log(userName); // "이코딩" (블록 밖에서도 접근 가능)
// 반복문에서의 var 문제
for (var i = 0; i < 3; i++) {
// 1초 후에 실행되는 함수
setTimeout(function() {
console.log("var i: " + i); // 모두 3이 출력됨 (문제!)
}, 1000);
}
}
showVarProblems();
|
let과 const의 올바른 사용법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| function showBestPractices() {
const SITE_NAME = "내 웹사이트"; // 변경되지 않는 값은 const
let visitCount = 0; // 나중에 값이 변경될 변수는 let
// 블록 스코프 활용
if (Math.random() > 0.5) {
const randomMessage = "랜덤 메시지"; // 블록 내에서만 사용
visitCount = visitCount + 1;
console.log(randomMessage + " - 방문 횟수: " + visitCount);
}
// 반복문에서 let 사용
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log("let i: " + i); // 0, 1, 2가 각각 출력됨 (올바름!)
}, 1000);
}
// console.log(randomMessage); // ❌ 에러! 블록 외부에서 접근 불가
console.log("총 방문 횟수: " + visitCount); // ✅ 함수 스코프 내에서 접근 가능
}
showBestPractices();
|
스코프 체인과 렉시컬 스코프
스코프 체인의 동작 원리
스코프 체인은 변수를 찾을 때 JavaScript 엔진이 따르는 규칙입니다. 안쪽 스코프에서 바깥쪽 스코프로 순차적으로 변수를 검색하는 과정입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const globalMessage = "전역 메시지"; // 전역 스코프
function outerFunction() {
const outerMessage = "외부 함수 메시지"; // 외부 함수 스코프
function innerFunction() {
const innerMessage = "내부 함수 메시지"; // 내부 함수 스코프
// 스코프 체인 순서: 내부 → 외부 → 전역
console.log(innerMessage); // "내부 함수 메시지" (가장 가까운 스코프)
console.log(outerMessage); // "외부 함수 메시지" (외부 함수 스코프)
console.log(globalMessage); // "전역 메시지" (전역 스코프)
}
innerFunction();
}
outerFunction();
|
스코프 체인의 검색 순서:
- 현재 함수의 지역 스코프
- 외부 함수의 스코프
- 전역 스코프
- 변수를 찾지 못하면
ReferenceError 발생
렉시컬 스코프 (Lexical Scope)
렉시컬 스코프는 함수가 어디서 선언되었는지에 따라 스코프가 결정되는 방식입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const message = "전역 메시지";
function outerFunction() {
const message = "외부 함수 메시지";
function innerFunction() {
console.log(message); // "외부 함수 메시지" 출력
}
return innerFunction; // 함수를 반환
}
function callInnerFunction() {
const message = "호출 함수 메시지";
const inner = outerFunction(); // 함수를 받아옴
inner(); // 여기서 호출해도 선언 위치의 스코프를 사용
}
callInnerFunction(); // "외부 함수 메시지" 출력
|
렉시컬 스코프의 핵심:
- 함수가 어디서 호출되는지가 아니라 어디서 선언되었는지에 따라 스코프가 결정됩니다.
- 함수를 정의하는 시점에 상위 스코프가 결정되어 고정됩니다.
변수 섀도잉 (Variable Shadowing)
변수 섀도잉은 안쪽 스코프의 변수가 바깥쪽 스코프의 같은 이름 변수를 가리는 현상입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const userName = "전역 사용자"; // 전역 변수
function login() {
const userName = "로그인 사용자"; // 전역 변수를 가림 (섀도잉)
function showUserInfo() {
const userName = "내부 사용자"; // 외부 함수의 변수를 가림
console.log("현재 사용자: " + userName); // "내부 사용자"
}
console.log("함수 내 사용자: " + userName); // "로그인 사용자"
showUserInfo();
}
console.log("전역 사용자: " + userName); // "전역 사용자"
login();
|
섀도잉 주의사항:
- 의도하지 않은 변수 가림으로 인해 버그가 발생할 수 있습니다.
- 가능하면 다른 변수명을 사용하는 것이 좋습니다.
- 코드 리뷰 시 섀도잉이 발생하는 부분을 특별히 확인해야 합니다.
스코프를 활용한 실용적인 팁
1. 전역 변수 오염 방지하기
전역 변수를 너무 많이 만들면 문제가 생길 수 있어요. 간단한 방법으로 이를 방지할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| // ❌ 나쁜 예: 전역 변수가 많음
var userName = "홍길동";
var userAge = 25;
var userEmail = "hong@example.com";
function showUserInfo() {
console.log(userName + ", " + userAge + "세, " + userEmail);
}
// ✅ 좋은 예: 함수로 묶어서 관리
function createUser() {
const userName = "홍길동";
const userAge = 25;
const userEmail = "hong@example.com";
function showUserInfo() {
console.log(userName + ", " + userAge + "세, " + userEmail);
}
// 필요한 함수만 외부에서 사용할 수 있게 반환
return {
show: showUserInfo
};
}
const user = createUser();
user.show(); // "홍길동, 25세, hong@example.com"
|
2. 임시 변수 깔끔하게 관리하기
계산 과정에서 사용하는 임시 변수들을 블록 스코프로 깔끔하게 관리할 수 있어요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| function calculateTotal() {
const basePrice = 10000;
let finalPrice;
// 할인 계산을 위한 임시 변수들을 블록으로 묶기
{
const discountRate = 0.1; // 10% 할인
const discountAmount = basePrice * discountRate;
finalPrice = basePrice - discountAmount;
console.log("할인 금액: " + discountAmount + "원");
}
// 세금 계산을 위한 임시 변수들을 블록으로 묶기
{
const taxRate = 0.1; // 10% 세금
const taxAmount = finalPrice * taxRate;
finalPrice = finalPrice + taxAmount;
console.log("세금: " + taxAmount + "원");
}
console.log("최종 가격: " + finalPrice + "원");
// console.log(discountRate); // ❌ 에러! 블록 밖에서 접근 불가
// console.log(taxRate); // ❌ 에러! 블록 밖에서 접근 불가
}
calculateTotal();
|
3. 반복문에서 변수 충돌 방지하기
중첩된 반복문에서 변수명이 겹치지 않도록 주의해야 해요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function printMultiplicationTable() {
// 바깥쪽 반복문
for (let i = 1; i <= 3; i++) {
console.log(i + "단:");
// 안쪽 반복문 - 다른 변수명 사용
for (let j = 1; j <= 3; j++) {
console.log(i + " × " + j + " = " + (i * j));
}
console.log("---");
}
}
printMultiplicationTable();
|
4. 설정값 안전하게 관리하기
중요한 설정값들을 함수 안에 숨겨서 실수로 변경되는 것을 방지할 수 있어요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| function createGame() {
// 게임 설정값들 (외부에서 변경 불가)
const MAX_LIVES = 3;
const MAX_SCORE = 999999;
let currentLives = MAX_LIVES;
let currentScore = 0;
return {
// 점수 추가
addScore: function(points) {
currentScore = currentScore + points;
if (currentScore > MAX_SCORE) {
currentScore = MAX_SCORE;
}
console.log("현재 점수: " + currentScore);
},
// 생명 감소
loseLife: function() {
if (currentLives > 0) {
currentLives = currentLives - 1;
console.log("남은 생명: " + currentLives);
if (currentLives === 0) {
console.log("게임 오버!");
}
}
},
// 현재 상태 확인
getStatus: function() {
return {
score: currentScore,
lives: currentLives
};
}
};
}
const game = createGame();
game.addScore(100); // "현재 점수: 100"
game.loseLife(); // "남은 생명: 2"
// console.log(MAX_LIVES); // ❌ 에러! 외부에서 접근 불가
// currentScore = 999999; // ❌ 에러! 직접 변경 불가
|
5. 조건문에서 임시 데이터 처리하기
조건문 안에서만 사용하는 데이터를 블록 스코프로 제한하여 깔끔하게 처리할 수 있어요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| function processUserInput(userInput) {
if (userInput && userInput.length > 0) {
// 이 블록 안에서만 사용하는 변수들
const trimmedInput = userInput.trim();
const upperCaseInput = trimmedInput.toUpperCase();
const isValidInput = upperCaseInput.length >= 2;
if (isValidInput) {
console.log("처리된 입력: " + upperCaseInput);
return upperCaseInput;
} else {
console.log("입력이 너무 짧습니다.");
return null;
}
} else {
console.log("입력이 없습니다.");
return null;
}
// console.log(trimmedInput); // ❌ 에러! 블록 밖에서 접근 불가
}
processUserInput(" hello "); // "처리된 입력: HELLO"
processUserInput("a"); // "입력이 너무 짧습니다."
|
자주 묻는 질문 (FAQ)
var와 let/const의 차이점이 실무에서 왜 중요한가요?
실제 프로젝트에서 var를 사용하면 예상치 못한 버그가 발생할 수 있어요. 제가 경험한 사례로는 반복문에서 이벤트 핸들러를 등록할 때 var를 사용해서 모든 버튼이 같은 값을 참조하는 문제가 있었습니다. let과 const를 사용하면 블록 스코프로 인해 이런 문제를 예방할 수 있어서, 현재는 거의 모든 프로젝트에서 let과 const만 사용하고 있습니다.
전역 변수 사용을 피해야 하는 이유는 무엇인가요?
전역 변수가 많아질수록 코드의 예측 가능성이 떨어져요. 어떤 함수에서든 전역 변수를 수정할 수 있어서 디버깅이 어려워지고, 다른 라이브러리와 변수명이 충돌할 위험도 있습니다. 실무에서는 함수로 관련 변수들을 묶어서 관리하는 것이 좋습니다.
스코프 체인의 성능 영향은 어느 정도인가요?
스코프 체인이 길어질수록 변수 검색 시간이 늘어나긴 하지만, 일반적인 웹 애플리케이션에서는 성능상 큰 문제가 되지 않아요. 하지만 반복문 내에서 깊은 스코프 체인을 자주 참조한다면 성능에 영향을 줄 수 있으니, 자주 사용하는 변수는 지역 변수로 캐싱하는 것이 좋습니다.
함수 안에 함수를 선언하는 것이 좋은 방법인가요?
네, 중첩 함수는 관련된 기능을 논리적으로 그룹화하고 외부에서 접근을 제한할 수 있어 좋은 패턴이에요. 하지만 너무 깊게 중첩하면 코드 가독성이 떨어질 수 있으니 적절한 수준에서 사용하는 것이 중요합니다. 일반적으로 2-3 레벨 정도의 중첩이 적당해요.
블록 스코프를 언제 활용하면 좋을까요?
블록 스코프는 임시로 사용하는 변수들을 제한할 때 특히 유용해요. 반복문, 조건문, 또는 계산 과정에서 잠시 사용하는 변수들을 블록으로 묶으면 코드가 더 깔끔해지고 실수를 방지할 수 있습니다. 특히 복잡한 계산이나 데이터 처리 과정에서 단계별로 블록을 나누면 가독성이 좋아져요.
마무리: 스코프 마스터하기
이번 글에서 다룬 핵심 내용을 정리해 보겠습니다.
- 스코프의 3가지 종류: 전역, 함수, 블록 스코프의 특징과 활용 방법
- var vs let/const: 현대 JavaScript에서 let과 const를 사용해야 하는 이유
- 스코프 체인과 렉시컬 스코프: 변수 검색 메커니즘의 이해
- 실용적인 활용법: 전역 변수 오염 방지, 임시 변수 관리, 설정값 보호 등
오늘 배운 내용으로 간단한 게임이나 계산 프로그램을 만들어보세요. 함수로 관련 변수들을 묶어서 관리하고, 블록 스코프를 활용해서 임시 변수들을 깔끔하게 정리하는 연습을 해보시면 스코프 개념이 더 확실해질 거예요.
다음 글에서는 자바스크립트 블록과 함수의 차이점을 더 깊이 있게 비교 분석해보겠습니다. 각각의 장단점과 실무에서 언제 어떤 방식을 선택해야 하는지 구체적인 가이드를 제공할 예정이에요.
여러분의 JavaScript 스코프 관련 경험은 어떠셨나요? 실무에서 겪으신 스코프 관련 문제나 해결 방법이 있다면 댓글로 공유해주세요!
