자바스크립트 변수와 상수 가이드: 게임 데이터 설계 핵심 (게임 제작 #2)

자바스크립트 변수와 상수는 왜 사용될까?

 

웹 개발로 게임 만들기 프로젝트!

 

지난 시간에는 웹 개발의 3대 요소인 HTML, CSS, 자바스크립트가 게임에서 어떤 역할을 하는지 알아보았습니다.

 

오늘부터는 본격적으로 코드를 작성해 볼 텐데요, 제가 실제 제작한 code 자료와 결과 사진으로 예시를 들며 설명드리겠습니다.

 

그 첫 번째 시간으로 데이터를 저장하는 핵심 문법인 ‘변수’와 ‘상수’,

그리고 이들의 활동 범위인 ‘스코프(Scope)’를 완벽하게 파헤쳐 보겠습니다.

 

나만의 RPG를 만들기 위해 캐릭터의 이름, 체력, 공격력을 설정하는 과정에서 var, let, const 중 무엇을 써야 할지, 그리고 왜 전역 변수와 지역 변수를 구분해야 하는지 기초부터 정리해 드립니다.

 

참고로 취미로 굴러가는 글이므로 조언이 있으시다면 댓글로 둥글게 부탁드립니다!

 

 

---

지난 시간 글은 아래에서 확인해 주세요!

 

2026.02.07 - [Coding] - 웹 개발, 플래시 게임 개발: HTML, CSS, 자바스크립트 역할 완벽 정리

웹 개발, 플래시 게임 개발: HTML, CSS, 자바스크립트 역할 완벽 정리

 

---

 

1. 변수와 상수의 본질: 데이터를 담는 '이름표 붙은 상자'

 

컴퓨터 메모리(RAM)는 수많은 데이터를 저장하지만, 주소가 매우 복잡합니다.

개발자가 그 복잡한 주소를 일일이 외울 수 없기에, 메모리 공간에 '이름표'를 붙여 데이터를 쉽게 꺼내 쓰게 만든 것이 바로 '변수(Variable)'입니다.

RPG 게임으로 비유하자면, 캐릭터의 현재 HP가 100이라면 우리는 hp라는 이름표가 붙은 상자에 100이라는 값을 담아두고 필요할 때마다 꺼내서 깎거나 채우게 됩니다.

실제 HTML, CSS, JS 만으로 제작한 간단 게임

 

이 사진은 실제로 제가 테스트하고 있는 코드에서 몇 가지만 구현하여 실행한 결과입니다.

 

위 결과에서는 캐릭터의 닉네임은 값이 지속적으로 변동되지 않기에 상수로 저장,

그리고 게임을 하며 수시로 값의 변동이 있는 레벨, 골드, 체력(HP)은 변수로 저장하는 것이 바람직합니다.

 

---

2. 변수 선언의 세 가지 무기: var, let, const

 

그렇다면 상수와 변수는 어떻게 선언할까요?

 

자바스크립트에는 변수를 선언하는 세 가지 키워드가 있습니다.

이 세 가지의 차이점을 아는 것이 자바스크립트 숙련도를 결정짓는 첫 번째 관문입니다.

① var (Variable): 과거의 유산, 그러나 알아야 할 '함수 스코프'

var는 2015년(ES6) 이전까지 자바스크립트의 유일한 변수 선언 방식이었습니다. 하지만 몇 가지 치명적인 약점이 있어 현재는 거의 사용되지 않습니다.

• 특징: 같은 이름으로 변수를 여러 번 선언해도 에러가 나지 않습니다. (재선언 가능)
• 스코프: 오직 '함수' 단위로만 구역을 나눕니다. (함수 스코프)
• 문제점: if 문이나 for 문 안에서 선언해도 밖에서 접근이 가능해 버그를 유발하기 쉽습니다.

② let (Let): 변하는 값을 위한 선택

var의 단점을 보완하기 위해 등장했습니다. 값이 수시로 변하는 데이터를 담을 때 사용합니다.

• 특징: 재선언이 불가능하여 실수로 변수 이름을 겹치게 짓는 사고를 막아줍니다.
• 스코프: 모든 중괄호({ })를 기준으로 구역을 나눕니다. (블록 스코프)
• RPG 예시: 현재 체력, 경험치, 보유 골드 등.

③ const (Constant): 변하지 않는 '상수'

한 번 값을 넣으면 절대로 바꿀 수 없는 상자입니다.

• 특징: 선언과 동시에 값을 넣어줘야 하며, 나중에 수정하려고 하면 에러가 발생합니다.
• 중요성: 프로그램의 안정성을 높여줍니다. 값이 바뀌지 않는다는 확신을 주기 때문에 협업이나 디버깅 시 매우 유리합니다.
• RPG 예시: 캐릭터 고유 ID, 캐릭터 이름, 종족, 게임의 최대 레벨 등.

 

---

3. 스코프(Scope)의 세계: 변수가 활동하는 '월드맵'

변수는 어디서 어떻게 선언되었는지에 따라 접근할 수 있는 범위가 달라집니다.

이를 '스코프(Scope)'라고 부르며, 크게 전역(Global)과 지역(Local)으로 나뉩니다.

 

🌍 전역 스코프 (Global Scope): 게임의 전 구역

어떤 함수나 블록 밖에서 선언된 변수입니다.

• 범위: 코드 전체에서 언제든지 읽고 쓸 수 있습니다.
• 주의점: 전역 변수가 너무 많으면 어디서 값이 바뀌었는지 찾기 힘들어집니다. (변수 오염)
• 예시: const SERVER_IP = "127.0.0.1";

 

🏰 지역 스코프 (Local Scope): 특정 던전 혹은 건물 내부

함수나 중괄호({ }) 안에서 선언된 변수입니다.

• 범위: 자신이 선언된 영역 안에서만 유효하며, 밖으로 나가는 순간 메모리에서 사라집니다.
• 장점: 다른 코드와 충돌할 걱정 없이 안전하게 데이터를 처리할 수 있습니다.
• 예시: 전투 중 일시적으로 계산되는 let currentDamage;

 

전역 변수, 지역 변수 예시

 

---

4. 전문가를 위한 핵심 지식: 호이스팅(Hoisting)과 TDZ

var가 왜 위험한지 설명할 때 빠지지 않는 개념이 호이스팅입니다. 자바스크립트는 코드를 실행하기 전 변수 선언부만 최상단으로 끌어올리는 특징이 있습니다.

• var의 호이스팅: 선언 전에도 호출이 가능하며 undefined를 반환합니다. 이는 논리적으로 맞지 않아 버그를 만듭니다.
• let, const의 호이스팅: 똑같이 호이스팅 되지만, 실제 선언문에 도달하기 전까지는 **일시적 사각지대(TDZ)**에 갇혀 접근을 막습니다. (에러 발생 → 훨씬 안전함)

---

5. [표] 변수 선언 키워드 한눈에 비교하기 (최종 정리)

키워드	재선언	재할당	스코프 단위	호이스팅 시	추천 용도
var	가능	가능	함수 단위	undefined	사용 권장 안 함
let	불가능	가능	블록 단위 { }	ReferenceError	수시로 변하는 데이터
const	불가능	불가능	블록 단위 { }	ReferenceError	기본값 (대부분의 데이터)

---

6. 데이터 설계

지금까지 배운 내용을 바탕으로 우리 게임의 기초 데이터를 설계해 봅시다.

 

저는 위에서 보셨던 것처럼 닉네임, 체력, 골드 등을 먼저 정해보았습니다.

 

<JavaScript>

const PLAYER_NAME = "아르곤"; // [const] 이름은 변하지 않는 상수
const MAX_HP = 100;          // [const] 최대 체력 한도

let currentHp = 100;         // [let] 현재 체력은 수시로 변함
let currentGold = 500;       // [let] 골드도 수시로 변함

 

 

이제 이걸 함수로 제어해야 하는데.. 함수 설명은 다음으로 넘길까 했지만 코드만 먼저 선행합시다..

 

function을 사용해서 takeDamage 함수를 선언하고, 그 안에 필요한 계산을 넣으면 되는데요,

이제 데미지도 어쨌든 변수이기 때문에 선언 후 수식을 넣어줍니다.

 

이렇게 특정 함수 내에 변수가 선언되어 사용되는 개념이 지역 변수, 지역 스코프입니다.

 

function takeDamage() {
    // [지역 변수] 이 함수 안에서만 쓰이는 일시적인 데미지 계산
    const damage = Math.floor(Math.random() * 20) + 10;

    currentHp -= damage;
    if (currentHp < 0) currentHp = 0;

    updateUI(damage + "의 데미지를 입었습니다!");
}

 

 

나머지 코드를 모두 설명하기에는 매우 길고 험난하니.. 차차 해봅시다.

 

우리 아직 JS 밖에 안했..답니다.....

---

급마무리 - 배울 게 너무 많네요

하하.. 이번 글에 3가지 언어 모두 넣어서 데미지/골드 정도만 구현하려 했는데 생각보다 더 쉽지 않군요.

코드를 쓰는 것보다 설명글을 작성하는 게 더 오래.. 걸리네요..

 

그럼 다음 글에서 HTML, 할 수 있다면 CSS까지 구현해 보도록 하겠습니다.

 

감사합니다.

 

 

 

[[ 아직 HTML, CSS, Jabascript의 차이를 잘 모르겠다면? ]]

2026.02.07 - [Coding] - 웹 개발, 플래시 게임 개발: HTML, CSS, 자바스크립트 역할 완벽 정리

 

[[ 갑자기 경제 소식이 알고 싶다면?? ]]

2026.02.02 - [경제] - 세계 경제의 대통령, 미 연준 의장: 케빈 워시 지명

세계 경제의 대통령, 미 연준 의장: 케빈 워시 지명