📘 1.3.3 변수들을 깔끔하게 정리하기 - 코딩도 정리가 필요해요!
안녕하세요, 여러분. 지금까지 우리는 좋은 변수 이름을 만드는 방법과 camelCase라는 특별한 규칙을 차근차근 배웠죠? 개별 변수의 이름을 잘 짓는 것도 정말 중요하지만, 프로그램이 점점 커질수록 더욱 소중해지는 게 있어요. 바로 변수들을 깔끔하게 정리하고 관리하는 방법이에요.
마치 여러분 방에 물건이 하나둘 늘어나면서 "아, 이제 정리해야겠다!"라고 느끼게 되는 것처럼, 코딩에서도 변수가 많아질수록 체계적인 정리가 꼭 필요하답니다. 오늘은 변수들을 어떻게 효과적으로 정리하고 관리할 수 있는지 함께 알아볼까요?
🧠 새로운 단어들과 친해지기
코딩에서 정리와 관련된 중요한 단어들을 쉽게 풀어서 설명해드릴게요.
| 단어 | 쉬운 설명 |
|---|---|
| 변수 관리 | 변수들을 체계적으로 만들고, 사용하고, 정리하는 좋은 방법이에요. |
| 코드 정리 | 코딩을 읽기 쉽고 관리하기 쉽게 차근차근 정돈하는 것을 말해요. |
| 사용 범위 | 변수를 사용할 수 있는 구역을 의미해요. 마치 우리 방 안에서만 쓸 수 있는 물건처럼요. |
| 이름 규칙 | 이름을 짓는 약속이나 규칙을 나타내요. 반 친구들끼리 약속한 것처럼요. |
변수 관리는 방 정리하기와 정말 비슷해요. 물건마다 정해진 자리가 있고, 정리 규칙이 있어야 나중에 찾기 쉬워지죠!
✨ 변수 정리하기가 뭔지 알아보기
변수를 정리한다는 것은 단순히 변수를 만드는 것을 넘어서 프로그램 전체의 품질을 결정하는 정말 중요한 일이에요. 좋은 변수 정리는 코드를 읽기 쉽게 만들고, 나중에 고치기도 쉽게 만들고, 친구들과 함께 작업할 때도 훨씬 편하게 해준답니다.
체계적 정리는 변수 관리의 첫 번째 방법이에요. 비슷한 일을 하는 변수들은 같은 그룹으로 묶어서 코드의 구조를 명확하게 만들어야 해요. 예를 들어 학생 정보와 관련된 변수들, 성적과 관련된 변수들, 현재 상태와 관련된 변수들을 각각 따로 모아두는 거죠.
일관된 규칙도 엄청 중요해요. 프로젝트 전체에서 같은 방식으로 이름을 짓고 같은 패턴으로 변수를 사용해야 합니다. 어떤 곳에서는 camelCase를 쓰고 다른 곳에서는 다른 방식을 쓰면 정말 헷갈리거든요.
적절한 구역에서 변수를 사용하는 것도 중요한 개념이에요. 변수를 꼭 필요한 곳에서만 사용할 수 있게 관리하면 실수로 잘못 사용하는 일을 막을 수 있어요.
마지막으로 설명과 메모를 적절히 활용하는 것이에요. 복잡한 변수나 특별한 의미를 가진 변수는 설명을 함께 적어서 나중에 코드를 읽는 사람이 쉽게 이해할 수 있도록 해야 해요.
재미있는 비유: 학용품 정리함 이야기
변수 정리를 더 쉽게 이해하기 위해 '학용품 정리함' 이야기를 들려드릴게요.
철수는 학용품을 정말 깔끔하게 정리해서 사용해요. 모든 것이 제자리에 있고, 체계적인 규칙에 따라 관리되고 있답니다.
📚 교과서 서랍에는 절대 바뀌지 않는 교과서들(const)이 큰 서랍에 깔끔하게 정리되어 있어요. MATH_BOOK, SCIENCE_BOOK, KOREAN_BOOK 이런 식으로 라벨이 붙어있어서 한눈에 알아볼 수 있어요. 이 교과서들은 학기 동안 바뀌지 않아요.
✏️ 문구류 칸막이에는 자주 바뀌는 문구용품들(let)이 작은 칸들에 담겨있어요. currentPencil, eraserCount, rulerLength 같은 읽기 쉬운 라벨이 있어서 무엇인지 바로 알 수 있어요. 사용하면서 내용물이 바뀔 수 있는 것들이죠.
📝 숙제 공간에서는 임시로 사용하는 도구들을 숙제할 때만 꺼내서 사용해요. 숙제가 끝나면 다시 정리해두어서 다음 숙제에 방해가 되지 않도록 해요.
✨ 정리 습관 덕분에 모든 게 제자리에 있어서 공부할 때 바로바로 필요한 걸 찾을 수 있어요! 친구들도 철수 자리에 와서 쉽게 도움을 줄 수 있고, 복잡한 숙제도 효율적으로 할 수 있답니다.
🎯 왜 변수 정리를 해야 할까요?
체계적인 변수 정리는 프로그래밍에서 여러 가지 정말 중요한 좋은 점들을 가져다줘요.
첫째로 코드 읽기가 훨씬 쉬워져요. 다른 사람이 여러분의 코드를 봐도 쉽게 이해할 수 있게 돼요. 변수들이 논리적으로 그룹화되어 있고 일관된 규칙을 따르면, 코드의 흐름을 파악하기가 훨씬 쉬워져요.
둘째로 나중에 고치기가 편해져요. 나중에 기능을 수정하거나 새로 추가할 때 어디를 건드려야 하는지 쉽게 알 수 있어요. 관련된 변수들이 한 곳에 모여 있으면 변경 작업도 훨씬 간단해져요.
셋째로 실수를 미리 막을 수 있어요. 체계적인 정리를 통해 변수 이름이 겹치거나 잘못된 구역에서 사용하는 실수를 줄일 수 있어요. 특히 프로그램이 커질수록 이런 장점이 더욱 중요해져요.
마지막으로 친구들과 함께 작업하기가 훨씬 편해져요. 팀원들과 원활한 소통이 가능해지고, 코드를 함께 보거나 공동 작업을 할 때 훨씬 수월해져요.
⚙️ 변수 정리하는 기본 방법들
효과적인 변수 정리를 위한 기본적인 방법들을 살펴볼게요.
변수들을 그룹으로 묶기:
// 학생 정보와 관련된 변수들
let studentName = "김민수";
let studentAge = 12;
let studentGrade = 6;
// 점수와 관련된 변수들
let mathScore = 95;
let scienceScore = 88;
let englishScore = 92;
// 현재 상태와 관련된 변수들
let isPresent = true;
let isHomeworkDone = false;
let isTestFinished = true;적절한 변수 사용 구역 정하기:
// 전체에서 사용할 변수
let schoolName = "행복초등학교";
// 특정 구역에서만 사용할 변수
{
let temporaryCalculation = 10 + 20;
console.log(temporaryCalculation); // 30
}
// temporaryCalculation은 여기서 사용 불가이런 방식으로 변수들을 체계적으로 정리하면 코드의 구조가 명확해지고 실수할 가능성도 줄어들어요.
🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 변수를 체계적으로 정리하는 방법을 자세히 알아볼게요.
🔹 첫 번째 예시: 변수들을 의미별로 그룹화해서 정리하기
첫 번째 예시에서는 학생과 관련된 정보를 다루는 변수들을 체계적으로 그룹화하여 관리하는 방법을 알아볼게요.
// ===== 학생 기본 정보 =====
let studentName = "이지수"; // 학생 이름을 담는 변수
let studentAge = 11; // 학생 나이를 담는 변수
let studentClass = "5학년 2반"; // 학생이 속한 반을 담는 변수
// ===== 성적 정보 =====
let koreanScore = 88; // 국어 점수를 담는 변수
let mathScore = 95; // 수학 점수를 담는 변수
let scienceScore = 90; // 과학 점수를 담는 변수
let averageScore = (koreanScore + mathScore + scienceScore) / 3; // 평균 점수를 계산해서 담는 변수
// ===== 활동 상태 =====
let isClubMember = true; // 동아리에 가입했는지 확인하는 변수
let isHomeworkSubmitted = false; // 숙제를 제출했는지 확인하는 변수
let attendanceCount = 18; // 출석한 날수를 세는 변수
// 정리된 정보 보여주기
console.log("=== 학생 정보 ===");
console.log("이름:", studentName);
console.log("나이:", studentAge);
console.log("반:", studentClass);
console.log("\n=== 성적 정보 ===");
console.log("평균 점수:", Math.round(averageScore)); // 반올림해서 보여주기
console.log("\n=== 활동 현황 ===");
console.log("동아리 가입:", isClubMember);
console.log("출석 일수:", attendanceCount);이렇게 관련있는 변수들끼리 그룹화하면 코드를 읽기가 훨씬 쉬워져요. 기본 정보, 성적 정보, 활동 상태로 명확히 구분했고, 주석으로 각 구역을 나누어 시각적으로도 구분이 쉽도록 만들었어요.
🔹 두 번째 예시: 변수 사용 범위를 적절히 관리하기
두 번째 예시에서는 전체에서 사용하는 변수와 특정 구역에서만 사용하는 변수를 적절히 구분하여 사용하는 방법을 알아볼게요.
// 전체 프로그램에서 사용할 정보
const SCHOOL_NAME = "꿈나무초등학교"; // 상수는 대문자로 (절대 변하지 않는 값)
const MAX_STUDENTS = 30; // 최대 학생 수 변수
let currentStudentCount = 25; // 현재 학생 수 변수 (변할 수 있음)
// 특정 계산을 위한 임시 변수들
{
let totalSeats = MAX_STUDENTS; // 전체 자리 수를 담는 임시 변수
let availableSeats = totalSeats - currentStudentCount; // 사용 가능한 자리 수를 계산하는 임시 변수
console.log("사용 가능한 자리:", availableSeats); // 5
}
// 또 다른 계산 구역
{
let attendanceRate = (currentStudentCount / MAX_STUDENTS) * 100; // 출석률을 계산하는 임시 변수
console.log("출석률:", Math.round(attendanceRate) + "%"); // 83%
}
// 전체 정보 요약
console.log("\n=== 학급 현황 ===");
console.log("학교명:", SCHOOL_NAME);
console.log("현재 학생 수:", currentStudentCount);
console.log("최대 수용 가능:", MAX_STUDENTS);이 예시는 변수의 사용 구역을 효과적으로 관리하는 방법을 보여줘요. 전체에서 사용할 변수와 특정 구역에서만 사용할 변수를 명확히 구분하고, 절대 변하지 않는 값은 대문자로 표시하여 변하지 않는 값임을 명확히 해요.
🔹 세 번째 예시: 실제 프로젝트처럼 체계적으로 관리하기
세 번째 예시에서는 게임 프로젝트를 예시로 하여 실제 개발에서 사용하는 수준의 변수 정리 방법을 알아볼게요.
// ===== 게임 설정값 (절대 변하지 않는 값들) =====
const GAME_TITLE = "숫자 맞추기 게임"; // 게임 제목을 담는 변수
const MIN_NUMBER = 1; // 최소 숫자를 담는 변수
const MAX_NUMBER = 100; // 최대 숫자를 담는 변수
const MAX_ATTEMPTS = 7; // 최대 시도 횟수를 담는 변수
// ===== 게임 현재 상태 (변하는 값들) =====
let currentAttempt = 1; // 현재 시도 횟수를 세는 변수
let isGameFinished = false; // 게임이 끝났는지 확인하는 변수
let playerScore = 0; // 플레이어 점수를 담는 변수
// ===== 플레이어 정보 =====
let playerName = "지우"; // 플레이어 이름을 담는 변수
let playerLevel = "초급"; // 플레이어 레벨을 담는 변수
// 게임 시작 메시지 (여러 변수를 조합해서 사용)
let welcomeMessage = playerName + "님, " + GAME_TITLE + "에 오신 것을 환영합니다!"; // 환영 메시지를 만드는 변수
let gameRules = MIN_NUMBER + "부터 " + MAX_NUMBER + "까지 숫자를 " + MAX_ATTEMPTS + "번 안에 맞춰보세요."; // 게임 규칙을 설명하는 변수
console.log(welcomeMessage);
console.log(gameRules);
// 게임 진행 중 상태 업데이트 시뮬레이션
currentAttempt = 3; // 3번째 시도로 변경
playerScore = 50; // 점수 획득
let statusMessage = "현재 " + currentAttempt + "번째 시도, 점수: " + playerScore; // 현재 상태를 알려주는 메시지 변수
console.log(statusMessage);이 예시는 실제 프로젝트에서 사용할 수 있는 수준의 변수 관리를 보여줘요. 설정값과 상태값을 명확히 구분하고, 절대 변하지 않는 값은 const와 대문자를 사용하여 표시해요.
🔄 변수 정리하는 순서 정리하기
지금까지 학습한 내용을 바탕으로 체계적인 변수 정리 과정을 정리해볼게요.
첫 번째 단계는 미리 계획하기예요. 프로그램을 만들기 전에 어떤 변수들이 필요한지 미리 생각해보세요. 어떤 정보를 저장해야 하고, 어떤 계산이 필요한지 파악하는 것이 중요해요.
두 번째는 그룹으로 묶기 단계예요. 비슷한 역할의 변수들을 함께 묶어서 관리해요. 사용자 정보, 게임 상태, 설정값 등으로 논리적으로 분류하는 거죠.
세 번째는 이름 규칙 통일하기 단계예요. 프로젝트 전체에서 일관된 이름 짓기 규칙을 적용해요. camelCase, 절대 변하지 않는 값 대문자 표기 등의 규칙을 일관되게 지켜야 해요.
네 번째는 사용 범위 정하기 단계예요. 변수를 적절한 구역에서 사용하도록 관리해요. 전체에서 쓸 것과 특정 구역에서만 쓸 것을 구분하는 거죠.
마지막으로 설명 달기 단계예요. 복잡한 부분이나 특별한 의미를 가진 변수는 설명을 추가하여 나중에 이해하기 쉽도록 해요.
🧚♀️ 이야기로 다시 배우기: 책상 정리의 비밀
지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?
두 명의 학생이 있었어요. 한 명은 지저분한 책상을 가진 학생이고, 다른 한 명은 깔끔하게 정리된 책상을 가진 학생이었어요.
지저분한 책상의 학생 🤯은 연필, 지우개, 책, 과자, 장난감이 뒤죽박죽 섞여있는 책상을 사용했어요. 뭔가 필요할 때마다 "어디 있지?" 하면서 찾아 헤매야 했거든요. 숙제를 하려고 해도 연필을 찾는데 10분, 지우개를 찾는데 5분, 교과서를 찾는데 또 10분... 정작 공부하는 시간보다 찾는 시간이 더 많았답니다.
친구가 도우려고 해도 "연필 좀 빌려줘"라고 하면 "잠깐, 어디 있는지 찾아볼게..." 하면서 또 한참을 뒤져야 했어요. 결국 친구도 포기하고 다른 사람에게 도움을 요청하게 되었죠.
반면 깔끔하게 정리된 책상의 학생 ✨은 완전히 달랐어요. 문구류는 연필꽂이에, 책은 책꽂이에, 간식은 서랍에 깔끔히 정리되어 있었어요. 필요한 걸 바로바로 찾을 수 있어서 공부 효율이 훨씬 좋았어요.
더 놀라운 건 친구들이 도우러 와도 "연필은 연필꽂이에, 지우개는 첫 번째 서랍에 있어"라고 바로 알려줄 수 있었다는 것이에요. 덕분에 친구들과의 협업도 매우 원활했답니다.
시간이 지나면서 지저분한 책상의 학생도 깔끔하게 정리된 책상의 학생을 보고 배우게 되었어요. 물건마다 정해진 자리를 만들고, 분류 규칙을 정해서 체계적으로 관리하기 시작했죠.
그 결과 공부 효율이 크게 향상되었고, 친구들과의 협력도 훨씬 수월해졌어요. 정리의 비밀을 깨달은 거예요!
프로그래밍에서도 마찬가지예요. 변수들을 체계적으로 정리하면 코드 작성도 쉬워지고, 다른 사람과의 협업도 원활해져요. 여러분도 정리 고수가 되어보세요!
🧠 자주 하는 실수와 주의할 점
변수 정리에서 자주 발생하는 실수들을 알아보고, 어떻게 피할 수 있는지 살펴볼게요.
❌ 실수 1: 모든 변수를 한 곳에 뒤죽박죽 만들기
// ❌ 정리되지 않은 방식
let name = "철수"; // 이름 변수
let math = 95; // 수학 점수 변수
let isPresent = true; // 출석 여부 변수
let age = 12; // 나이 변수
let science = 88; // 과학 점수 변수
let isHomeworkDone = false; // 숙제 완료 여부 변수
// ✅ 그룹별로 정리된 방식
// 학생 기본 정보
let studentName = "철수";
let studentAge = 12;
// 성적 정보
let mathScore = 95;
let scienceScore = 88;
// 상태 정보
let isPresent = true;
let isHomeworkDone = false;이런 실수가 발생하는 이유는 변수를 만들 때 체계적인 계획 없이 무작정 만들기 때문이에요. 관련있는 변수들을 그룹으로 묶으면 코드를 이해하기 훨씬 쉬워져요.
❌ 실수 2: 너무 넓은 범위에서 임시 변수 사용하기
// ❌ 임시 변수를 전체에서 선언
let temp1 = 10; // 임시 변수1
let temp2 = 20; // 임시 변수2
let result = temp1 + temp2; // 결과 변수
// 나중에 다른 계산에서 실수로 temp1을 사용...
let anotherResult = temp1 * 5; // 의도하지 않은 사용!
// ✅ 필요한 곳에서만 사용
{
let temp1 = 10; // 이 구역에서만 사용하는 임시 변수1
let temp2 = 20; // 이 구역에서만 사용하는 임시 변수2
let result = temp1 + temp2; // 이 구역에서만 사용하는 결과 변수
console.log(result);
}
// temp1, temp2는 여기서 사용 불가 (안전함)임시 변수를 전체에서 선언하면 나중에 다른 코드에서 실수로 사용할 가능성이 있어요. 필요한 범위에서만 사용하도록 구역을 만드는 것이 안전해요.
❌ 실수 3: 일관성 없는 이름 규칙 사용하기
// ❌ 일관성 없는 방식
let student_name = "철수"; // snake_case 방식
let StudentAge = 12; // PascalCase 방식
let isPresent = true; // camelCase 방식
let math_score = 95; // snake_case 방식
// ✅ 일관된 camelCase 방식
let studentName = "철수"; // camelCase 방식
let studentAge = 12; // camelCase 방식
let isPresent = true; // camelCase 방식
let mathScore = 95; // camelCase 방식일관성 없는 이름 짓기 규칙은 코드를 읽는 사람에게 혼란을 줘요. 프로젝트 전체에서 같은 규칙을 사용해야 읽기 쉽고 전문적인 코드가 돼요.
✏️ 직접 해보기 - 쉬운 연습 문제들
이제 배운 내용을 차분히 연습하면서 확실히 익혀볼게요. 급하지 않게, 천천히 생각하면서 해보세요.
Ex1) 개인 정보와 성적 정보를 깔끔하게 그룹화해서 정리해보자
// === 개인 기본 정보 ===
let studentName = "김영희"; // 학생 이름을 담는 변수
let studentAge = 11; // 학생 나이를 담는 변수
let isStudent = true; // 학생인지 확인하는 변수
// === 성적 정보 ===
let koreanScore = 90; // 국어 점수를 담는 변수
let mathScore = 85; // 수학 점수를 담는 변수
let englishScore = 92; // 영어 점수를 담는 변수
// 정보 출력하기
console.log("학생:", studentName + "(" + studentAge + "세)"); // 이름과 나이를 함께 보여주기
console.log("성적 평균:", (koreanScore + mathScore + englishScore) / 3); // 평균 점수 계산해서 보여주기Ex2) 절대 변하지 않는 값과 변하는 값을 구분해서 관리해보자
// 절대 변하지 않는 값들 (상수)
const GAME_NAME = "단어 맞추기"; // 게임 이름 변수 (절대 변하지 않음)
const MAX_ATTEMPTS = 5; // 최대 시도 횟수 변수 (절대 변하지 않음)
const POINTS_PER_CORRECT = 10; // 정답당 받는 점수 변수 (절대 변하지 않음)
// 변하는 값들 (변수)
let currentAttempts = 1; // 현재 시도 횟수를 세는 변수
let playerScore = 0; // 플레이어 점수를 담는 변수
let isGameActive = true; // 게임이 진행 중인지 확인하는 변수
// 게임 정보 출력하기
console.log(GAME_NAME + " 게임을 시작합니다!"); // 게임 시작 메시지
console.log("최대 시도 횟수:", MAX_ATTEMPTS); // 최대 시도 횟수 알려주기
console.log("현재 점수:", playerScore); // 현재 점수 보여주기Ex3) 구역을 사용해서 임시 계산을 깔끔하게 정리해보자
let totalScore = 0; // 총 점수를 누적하는 변수
// 1학기 성적 계산 구역
{
let firstSemesterKorean = 85; // 1학기 국어 점수 임시 변수
let firstSemesterMath = 90; // 1학기 수학 점수 임시 변수
let firstSemesterAverage = (firstSemesterKorean + firstSemesterMath) / 2; // 1학기 평균 계산 임시 변수
totalScore += firstSemesterAverage; // 총 점수에 더하기
console.log("1학기 평균:", firstSemesterAverage); // 1학기 평균 보여주기
}
// 2학기 성적 계산 구역
{
let secondSemesterKorean = 88; // 2학기 국어 점수 임시 변수
let secondSemesterMath = 95; // 2학기 수학 점수 임시 변수
let secondSemesterAverage = (secondSemesterKorean + secondSemesterMath) / 2; // 2학기 평균 계산 임시 변수
totalScore += secondSemesterAverage; // 총 점수에 더하기
console.log("2학기 평균:", secondSemesterAverage); // 2학기 평균 보여주기
}
console.log("연간 총 점수:", totalScore); // 최종 총 점수 보여주기🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마치셨다면, 이제 조금 더 깊이 있는 문제들을 통해서 변수 정리에 대한 이해를 확인해볼게요.
Q1. 아래 코드에서 변수 관리상 문제점을 찾아보세요.
let x = "김철수"; // 이름?
let temp = 95; // 점수?
let y = 12; // 나이?
let temp2 = 88; // 또 다른 점수?
let z = true; // 뭐가 참인지?정답: 1) 변수 이름이 의미가 없어요 (x, y, z), 2) 관련 변수들이 그룹화되지 않았어요, 3) temp, temp2 같은 애매한 이름을 사용했어요
해설: 의미있는 이름으로 바꾸고 관련 변수끼리 묶어서 정리해야 해요.
Q2. 절대 변하지 않는 값으로 만들어야 할 변수는?
A) 학생 이름
B) 학교 이름
C) 현재 점수
D) 출석 여부
정답: B) 학교 이름
해설: 학교 이름은 프로그램 실행 중에 바뀌지 않는 값이므로 const로 선언하는 게 좋아요.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 변수 정리의 기본 개념 | ☐ |
| 변수 그룹화 방법 | ☐ |
| const와 let 구분하기 | ☐ |
| 자주 하는 실수들 | ☐ |
| 실전 예제 이해 | ☐ |
지금까지 변수를 체계적으로 정리하고 관리하는 방법에 대해 차근차근 알아보았어요. 좋은 변수 정리는 프로그래밍 실력을 한 단계 끌어올리는 정말 중요한 기술이에요. 처음에는 번거로울 수 있지만, 습관화되면 코드 작성이 훨씬 쉬워지고 친구들과의 협업도 원활해질 거예요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'1. 데이터 상자 만들기 (변수 선언) > 1.3 상자 이름 잘 짓기 (변수명 규칙)' 카테고리의 다른 글
| 1.3.2 camelCase - 낙타 등처럼 이름 짓기 (0) | 2025.06.27 |
|---|---|
| 1.3.1 좋은 이름, 나쁜 이름 - 저장소에 붙이는 이름표의 비밀 (0) | 2025.06.27 |