5. 일을 대신해주는 도우미 (함수)/5.3 함수의 생활공간 (함수 스코프)

5.3.1 지역변수와 전역변수 - 우리 집과 내 방

thejavascript4kids 2025. 7. 4. 02:40

📘 5.3.1 지역변수와 전역변수 - 우리 집과 내 방

지난 시간의 여운이 아직 마음에 남아있나요? 우리는 함께 화살표 함수의 this에 대해 이야기를 나누었어요. 오늘은 변수가 사용될 수 있는 범위에 대해 살펴보려 해요. 바로 지역변수와 전역변수라는 흥미로운 개념입니다.

이것은 마치 우리 집의 거실과 내 방처럼, 변수마다 사용할 수 있는 공간이 각각 다르다는 아름다운 개념이에요.

🧠 새로운 단어들과 친해지기

새로운 개념을 배우기 전에, 그 언어들과 먼저 친숙해져보겠어요.

단어 쉬운 설명
전역변수 프로그램 어디서든 사용할 수 있는 변수예요. 마치 거실의 TV처럼 온 가족이 쓸 수 있어요.
지역변수 특정 함수 안에서만 사용할 수 있는 변수예요. 마치 내 방의 장난감처럼 내 방에서만 쓸 수 있어요.
사용 범위 변수가 사용될 수 있는 범위를 말해요.
함수 범위 함수 안에서만 유효한 범위예요.

예를 들어 우리 집을 생각해보세요. 거실의 TV는 가족 모두가 사용할 수 있지만, 내 방의 장난감은 내 방에서만 사용할 수 있어요. 전역변수는 거실의 TV처럼, 지역변수는 내 방의 장난감처럼 작동해요.

✨ 핵심 개념 이해하기

변수에는 사용할 수 있는 범위가 있어요. 마치 집에서 물건마다 사용할 수 있는 공간이 정해져 있는 것처럼요.

전역변수는 프로그램 어디서든 사용할 수 있는 변수예요. 함수 밖에서 선언하면 전역변수가 되어서, 모든 함수에서 접근하고 사용할 수 있어요.

지역변수는 함수 안에서만 사용할 수 있는 변수예요. 함수 안에서 선언한 변수는 그 함수에서만 사용 가능하고, 함수 밖에서는 그 변수에 접근할 수 없어요.

정말 중요한 규칙이 있어요. 같은 이름의 변수가 여러 개 있으면 지역변수가 우선이에요. 마치 내 방에서는 내 방의 물건을 먼저 찾는 것처럼요.

일상 속의 비유: 학교와 우리 반

변수의 범위를 더 친근하게 이해하기 위해 학교와 우리 반의 이야기를 해볼게요.

학교 전체에서 사용하는 것들을 생각해보세요. 운동장, 도서관, 급식실은 모든 반에서 사용할 수 있어요. 이런 것들이 전역변수와 같아요.

우리 반에서만 사용하는 것들도 있어요. 우리 반 청소도구, 우리 반 게시판, 우리 반 화분은 우리 반에서만 사용할 수 있어요. 다른 반에서는 사용할 수 없죠. 이런 것들이 지역변수와 같아요.

규칙도 있어요:

  • 우리 반 것은 우리 반에서만 사용할 수 있어요
  • 학교 전체 것은 어느 반에서든 사용할 수 있어요
  • 만약 같은 이름이 있다면? 우리 반 것을 먼저 사용해요!

⚙️ 문법 구조 살펴보기

전역변수와 지역변수의 기본 구조를 차근차근 살펴보겠어요.

🔹 전역변수와 지역변수 기본 구조

// 전역변수 (프로그램 어디서든 사용 가능해요)
let globalVariable = "전역변수에요";

function myFunction() {
    // 지역변수 (이 함수 안에서만 사용 가능해요)
    let localVariable = "지역변수에요";

    console.log(globalVariable);  // 전역변수 사용 가능
    console.log(localVariable);   // 지역변수 사용 가능
}

console.log(globalVariable);      // 전역변수 사용 가능
// console.log(localVariable);   // 오류! 함수 밖에서는 지역변수 사용 불가

🔹 사용 범위 동작 규칙

변수 위치 사용 가능한 범위
함수 밖 프로그램 전체
함수 안 그 함수 안에서만

🔹 변수 우선순위

let name = "전역 이름";           // 전역변수

function showName() {
    let name = "지역 이름";       // 지역변수 (같은 이름)
    console.log(name);           // "지역 이름" 출력 (지역변수 우선)
}

showName();                      // "지역 이름"
console.log(name);               // "전역 이름"

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 전역변수와 지역변수가 어떻게 작동하는지 차근차근 살펴보겠어요.

🔹 첫 번째 예시: 전역변수와 지역변수 기본 사용법

첫 번째 예시에서는 학교와 반의 정보를 관리하는 시스템을 만들어보겠어요.

// 전역변수들 (프로그램 어디서든 사용 가능해요)
let schoolName = "행복초등학교";     // 학교 이름을 저장해요
let totalStudents = 300;            // 전체 학생 수를 저장해요

// 함수 1: 1학년 1반 정보 출력하기
function showClass1Info() {
    // 지역변수들 (이 함수에서만 사용 가능해요)
    let className = "1학년 1반";     // 반 이름을 저장해요
    let classStudents = 25;          // 반 학생 수를 저장해요
    let teacher = "김선생님";        // 담임 선생님을 저장해요

    console.log("=== 반 정보 ===");
    console.log("🏫 학교: " + schoolName);          // 전역변수 사용 가능
    console.log("🎒 반: " + className);             // 지역변수 사용
    console.log("👫 반 학생 수: " + classStudents); // 지역변수 사용
    console.log("👩‍🏫 담임: " + teacher);            // 지역변수 사용
    console.log("👥 전체 학생 수: " + totalStudents); // 전역변수 사용 가능
}

// 함수 2: 1학년 2반 정보 출력하기
function showClass2Info() {
    // 이 함수만의 지역변수들 (1반과 같은 이름이지만 완전히 다른 변수예요!)
    let className = "1학년 2반";     // 같은 이름이지만 다른 변수!
    let classStudents = 27;          // 같은 이름이지만 다른 변수!
    let teacher = "이선생님";        // 같은 이름이지만 다른 변수!

    console.log("=== 반 정보 ===");
    console.log("🏫 학교: " + schoolName);          // 전역변수 사용 가능
    console.log("🎒 반: " + className);             // 이 함수의 지역변수 사용
    console.log("👫 반 학생 수: " + classStudents); // 이 함수의 지역변수 사용
    console.log("👩‍🏫 담임: " + teacher);            // 이 함수의 지역변수 사용
}

console.log("전역변수 확인하기:");
console.log("학교 이름: " + schoolName);        // 전역변수 직접 사용

showClass1Info();                               // 1반 정보 출력
showClass2Info();                               // 2반 정보 출력

console.log("각 함수의 지역변수는 독립적이에요!");

이 예시를 통해 같은 이름의 지역변수들이 각 함수에서 독립적으로 작동한다는 걸 확인할 수 있어요!

🔹 두 번째 예시: 변수 이름이 같을 때 우선순위 확인하기

두 번째 예시에서는 전역변수와 지역변수의 이름이 같을 때 어떤 일이 일어나는지 확인해보겠어요.

// 전역변수들
let playerName = "전역플레이어";     // 전역에서 선언한 플레이어 이름
let score = 0;                      // 전역 점수를 저장해요

// 함수: 게임 시작하기
function startGame() {
    // 지역변수 (전역변수와 같은 이름이지만 완전히 다른 변수예요!)
    let playerName = "게임플레이어";  // 지역변수가 전역변수를 가려요
    let level = 1;                   // 지역변수 (전역에는 없는 변수)

    console.log("🎮 === 게임 시작 ===");
    console.log("🎯 플레이어: " + playerName);  // "게임플레이어" (지역변수 우선)
    console.log("⭐ 레벨: " + level);           // "1" (지역변수 사용)
    console.log("🏆 점수: " + score);           // "0" (전역변수 사용)

    // 점수 증가시키기 (전역변수 수정)
    score = score + 100;
    console.log("🎉 점수 획득! 현재 점수: " + score + "점");  // 전역변수 값이 변경됨
}

// 함수: 게임 종료하기
function endGame() {
    console.log("🏁 === 게임 종료 ===");
    console.log("🎯 플레이어: " + playerName);  // "전역플레이어" (전역변수 사용)
    console.log("🏆 최종 점수: " + score);      // 100 (함수에서 변경된 값)
}

console.log("게임 전 상태:");
console.log("플레이어: " + playerName);  // "전역플레이어"
console.log("점수: " + score + "점");    // 0점

startGame();                             // 게임 시작 함수 호출
endGame();                               // 게임 종료 함수 호출

console.log("게임 후 최종 상태:");
console.log("전역 플레이어: " + playerName); // "전역플레이어" (변경되지 않음)
console.log("전역 점수: " + score + "점");    // 100점 (함수에서 변경됨)

이 예시를 통해 같은 이름의 변수가 있을 때는 지역변수가 우선한다는 걸 확인할 수 있어요!

🧠 자주 하는 실수와 주의할 점

변수를 사용할 때 자주 하는 실수들을 미리 알아두면 더 부드러운 코딩을 할 수 있어요.

첫 번째 실수는 함수 밖에서 지역변수를 사용하려고 하는 것이에요. 접근할 수 없는 범위이므로 오류가 발생해요.

두 번째 실수는 전역변수만 계속 사용하는 것이에요. 변수 이름이 충돌하거나 메모리를 낭비할 수 있어요.

세 번째 실수는 같은 이름으로 계속 선언하는 것이에요. 헷갈리고 예상과 다른 결과가 나올 수 있어요.

✏️ 직접 해보기 - 연습 문제들

이제 여러분이 직접 배운 내용을 체험해볼 시간이에요. 코딩은 머리로만 이해하는 것이 아니라, 손끝에서 피어나는 실제 경험이기도 하거든요.

Ex1) 전역변수와 지역변수 구분하기

// 전역변수를 선언해요
let globalVar = "전역이에요";

function testFunction() {
    // 지역변수를 선언해요
    let localVar = "지역이에요";
    console.log(globalVar);  // ✅ 가능해요 (전역변수 사용)
    console.log(localVar);   // ✅ 가능해요 (지역변수 사용)
}

console.log(globalVar);      // ✅ 가능해요 (전역변수 사용)
// console.log(localVar);    // ❌ 오류! 지역변수는 함수 밖에서 사용 불가

Ex2) 같은 이름의 변수 우선순위

// 전역변수로 이름을 정해요
let name = "전역이름";

function showName() {
    // 지역변수로 같은 이름을 정해요
    let name = "지역이름";
    console.log(name);       // "지역이름" (지역변수가 우선해요)
}

showName();                  // "지역이름" 출력
console.log(name);           // "전역이름" 출력

Ex3) 오류 찾기

function calculateArea() {
    let width = 10;          // 함수 안의 지역변수
    let height = 5;          // 함수 안의 지역변수
    let area = width * height; // 함수 안의 지역변수
    console.log("넓이: " + area);
}

calculateArea();             // 정상 실행
// console.log("폭: " + width); // ❌ 오류! width는 함수 안의 지역변수라서 밖에서 접근 불가

🔄 4단원 복습하기 - 반복문을 기억하고 있나요?

지역변수와 전역변수를 배웠는데, 지난 시간에 배운 반복문과 함께 사용해보면 더욱 강력한 프로그램을 만들 수 있어요!

복습 문제) for문과 지역변수 활용하기

전역변수와 지역변수를 사용해서 for문으로 여러 학생의 점수를 관리해보세요.

// 해답:
let schoolName = "행복초등학교";  // 전역변수

function printStudentScores() {
    let className = "3학년 1반";  // 지역변수

    console.log(schoolName + " " + className + " 성적표");

    for (let i = 1; i <= 5; i++) {  // for문의 i도 지역변수
        let score = 85 + (i * 2);   // 각 학생의 점수 (지역변수)
        console.log("학생" + i + ": " + score + "점");
    }
}

printStudentScores();

💫 마무리하며

오늘 배운 지역변수와 전역변수는 정말 중요한 개념이에요. 변수마다 사용할 수 있는 범위가 있다는 걸 이해하는 것이 핵심이에요.

가장 중요한 포인트는 함수 안에서 선언한 변수는 그 함수에서만 사용 가능하다는 것과, 같은 이름이 있으면 지역변수가 우선한다는 것이에요.

변수 범위는 마치 우리 집의 공간처럼, 각각 사용할 수 있는 영역이 정해져 있어요. 이 규칙을 잘 이해하면 더 안전하고 깔끔한 코드를 작성할 수 있답니다.

다음 시간에는 더 고급 함수 기법들을 배워볼 예정이에요. 여러분의 프로그래밍 실력이 하루하루 자라나는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 차근차근 확인해보세요!

학습 내용 이해했나요?
지역변수와 전역변수의 기본 개념 ✅
기본 사용법과 문법 ✅
주요 특징과 차이점 ✅
자주 하는 실수들 ✅
실전 예제 이해 ✅
4단원 반복문 복습 ✅

📂 마무리 정보

오늘 배운 5.3.1 내용이 여러분의 마음 속에 잘 자리잡았나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

'5. 일을 대신해주는 도우미 (함수) > 5.3 함수의 생활공간 (함수 스코프)' 카테고리의 다른 글

5.3.3 중첩 함수 만들기 - 함수 안의 함수  (0) 2025.07.04
5.3.2 호이스팅 현상 이해하기 - 미리 사용할 수 있는 신기한 특징  (0) 2025.07.04

'5. 일을 대신해주는 도우미 (함수)/5.3 함수의 생활공간 (함수 스코프)'의 다른글

  • 현재글5.3.1 지역변수와 전역변수 - 우리 집과 내 방

관련글

티스토리툴바