1.3.1 좋은 이름, 나쁜 이름 - 저장소에 붙이는 이름표의 비밀

📘 1.3.1 좋은 이름, 나쁜 이름 - 저장소에 붙이는 이름표의 비밀

안녕하세요, 여러분. 지금까지 다양한 정보 종류와 저장소 만들기 방법을 차근차근 배웠어요. 저장소를 만들 때마다 우리는 그 저장소에 이름표를 정성스럽게 붙여주었죠.

그런데 잠시 멈춰서 생각해보세요. 여러분은 저장소에 어떤 이름을 붙여야 할지 고민해본 적이 있나요? 프로그래밍에서 저장소의 이름은 단순히 구별을 위한 표시가 아니에요. 좋은 이름표는 저장소 안에 무엇이 들어있는지 한눈에 알 수 있게 해주고, 나쁜 이름표는 저장소를 일일이 열어봐야만 무엇인지 알 수 있게 만들어요.

마치 도서관에서 책 제목이 그 책의 내용을 짐작하게 해주는 것처럼, 저장소의 이름표도 그 저장소가 무엇을 품고 있는지 알려주는 정말 소중한 역할을 하거든요.

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

저장소 이름표와 관련된 쉬운 단어들을 알아볼게요.

단어	쉬운 설명
변수명	저장소에 붙이는 이름을 뜻해요.
읽기 쉬움	코드를 읽기 쉬운 정도를 나타내요.
의미 있는 이름	저장소의 역할을 바로 알 수 있는 이름을 말해요.
예약어	자바스크립트에서 이미 특별한 용도로 사용하고 있어서 저장소 이름으로 쓸 수 없는 단어예요.

저장소 이름표는 저장소에 붙이는 소중한 설명 스티커와 같아요. 좋은 스티커는 저장소 안에 무엇이 들어있는지 한눈에 알 수 있게 해주죠!

✨ 좋은 이름표와 나쁜 이름표 알아보기

프로그래밍에서 저장소 이름표는 단순한 구별용 표시 이상의 깊은 의미를 가져요. 정성스럽게 붙여진 이름표는 코드를 읽는 사람에게 따뜻한 안내서 역할을 해줘요.

좋은 이름표는 저장소의 역할이나 내용물을 명확히 알 수 있는 이름이에요. studentAge라는 이름표를 보면 "아, 학생의 나이를 담는 저장소구나"라고 자연스럽게 이해할 수 있어요. 이런 이름표는 코드를 읽는 사람에게 추가적인 설명이 필요 없게 해줘요.

반면 나쁜 이름표는 의미를 알기 어렵거나, 헷갈리거나, 자바스크립트의 규칙에 맞지 않는 이름이에요. a, x, thing 같은 이름표들은 저장소의 목적을 전혀 알려주지 않아서 코드를 이해하기 어렵게 만들어요.

읽기 쉬운 코드는 다른 사람이 봐도 쉽게 이해할 수 있는 코드예요. 좋은 이름표는 이런 코드를 만드는 가장 기본적이면서도 중요한 요소예요.

마지막으로 규칙 지키기는 꼭 필요해요. 자바스크립트에서 정한 이름표 규칙을 따라야 오류 없이 프로그램이 실행돼요.

재미있는 비유: 학교 사물함 라벨 붙이기

좋은 이름표 붙이기를 학교 사물함 라벨 붙이기에 비유해볼 수 있어요.

여러분의 교실에는 많은 사물함이 있어요. 각 사물함에는 라벨을 붙여서 무엇이 들어있는지 알 수 있게 해요.

🏆 좋은 라벨들을 살펴볼까요? "교과서", "미술용품", "체육복", "간식" 이런 라벨을 보면 사물함을 열지 않아도 무엇이 들어있는지 바로 알 수 있어요. "수학 교과서가 필요해"라고 생각하면 "교과서" 라벨이 붙은 사물함에서 바로 찾을 수 있는 거예요.

이런 라벨의 장점은 시간을 소중히 할 수 있다는 거예요. 급하게 뭔가가 필요할 때 여러 사물함을 다 열어볼 필요가 없죠.

❌ 나쁜 라벨들을 생각해보세요. "A", "것", "물건1", "ㅁㅁㅁ" 같은 라벨로는 무엇이 들어있는지 전혀 알 수 없어요. 수학 교과서가 필요할 때 "A" 사물함에 있을까요, "것" 사물함에 있을까요? 결국 모든 사물함을 다 열어봐야 해요.

선생님들은 학생들에게 이렇게 말씀하셨어요: "좋은 라벨은 여러분의 시간과 마음을 아껴주는 소중한 도구예요!"

프로그래밍에서도 마찬가지예요. 저장소 이름표만 보고도 그 저장소가 무엇을 저장하는지 알 수 있어야 해요. 좋은 이름표는 코드를 읽는 사람에게 따뜻한 안내자 역할을 해주는 거예요.

🎯 왜 좋은 이름표를 붙여야 할까요?

여러분이 궁금해할 거예요. "그냥 a, b, c로 이름을 붙이면 안 되나요?"

첫 번째 이유는 코드 이해하기가 훨씬 쉬워져요. 몇 달 후에 자신이 작성한 코드를 다시 봐도 쉽게 이해할 수 있어요. x = 95보다는 mathScore = 95가 훨씬 따뜻하고 명확하죠.

두 번째로는 친구들과 함께 작업하기가 원활해져요. 다른 사람과 함께 프로그램을 만들 때 좋은 이름표는 소통의 다리가 돼요. 친구가 여러분의 코드를 봤을 때 별도의 설명 없이도 저장소의 역할을 이해할 수 있어요.

세 번째로는 실수를 줄이는 효과가 있어요. 명확한 이름을 사용하면 잘못된 저장소를 사용하는 실수를 방지할 수 있어요. height와 width를 혼동하는 것보다는 studentHeight와 studentWidth를 혼동하기가 더 어렵겠죠.

마지막으로 나중에 고치기가 쉬워져요. 프로그램을 수정하거나 새로운 기능을 추가할 때 좋은 이름표는 작업 속도를 크게 향상시켜줘요.

⚙️ 이름표 붙이기 규칙 배우기

자바스크립트에서 저장소 이름표를 붙일 때 반드시 지켜야 하는 규칙들이 있어요.

이름표 시작 규칙:

// 시작 가능: 영문자, _, $
let name = "철수";        // ✅ 좋아요
let _age = 12;           // ✅ 가능해요
let $score = 95;         // ✅ 가능해요

// 시작 불가능: 숫자
// let 2name = "철수";    // ❌ 에러가 나요

이름표 중간 규칙:

// 중간에 사용 가능: 영문자, 숫자, _, $
let student1 = "영희";    // ✅ 좋아요
let my_hobby = "독서";    // ✅ 가능해요

금지된 단어 사용 금지:

// 이런 특별한 단어들은 이름표로 쓸 수 없어요
// let let = "값";       // ❌ 에러가 나요
// let const = "값";     // ❌ 에러가 나요
// let if = "값";        // ❌ 에러가 나요
// let for = "값";       // ❌ 에러가 나요

이 규칙들을 지키지 않으면 문법 오류가 발생하여 프로그램이 실행되지 않아요.

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 좋은 이름표와 나쁜 이름표의 차이를 마음으로 이해해볼게요.

🔹 첫 번째 예시: 좋은 이름표와 나쁜 이름표의 놀라운 차이점 경험해보자

첫 번째로는 같은 정보를 저장하는 두 가지 방식을 비교하여 이름표의 중요성을 확인해보겠어요.

// ❌ 나쁜 이름표들 - 무슨 의미인지 알기 어려워요
let a = "김철수";       // a가 뭘까요?
let x = 12;            // x가 뭘까요?  
let data = true;       // data가 뭘까요?
let thing = ["사과"];  // thing이 뭘까요?

// ✅ 좋은 이름표들 - 바로 무슨 의미인지 알 수 있어요
let studentName = "김철수";     // 학생 이름이군요!
let studentAge = 12;           // 학생 나이군요!
let isPresent = true;          // 출석 여부군요!
let fruits = ["사과"];         // 과일 목록이군요!

// 사용해보기
console.log("학생 이름:", studentName);      // "김철수"
console.log("학생 나이:", studentAge);       // 12
console.log("출석 여부:", isPresent);        // true
console.log("과일 목록:", fruits);           // ["사과"]

이 예시를 통해 이름표의 차이가 얼마나 큰 영향을 미치는지 확실히 알 수 있어요. 나쁜 이름표들을 사용한 첫 번째 그룹을 보면, 각 저장소가 무엇을 저장하는지 전혀 알 수 없어요. 반면 좋은 이름표들을 사용한 두 번째 그룹은 이름표만 봐도 바로 그 역할을 이해할 수 있어요.

🔹 두 번째 예시: 구체적이고 명확한 이름표의 놀라운 힘 느껴보자

두 번째로는 좀 더 구체적이고 명확한 이름표를 붙이는 것이 왜 중요한지 알아보겠어요.

// ❌ 애매한 이름표들 - 뭔가 부족해요
let number = 95;           // 어떤 숫자인지 모르겠어요
let count = 5;             // 무엇을 센 건지 모르겠어요
let check = false;         // 무엇을 확인하는 건지 모르겠어요

// ✅ 구체적이고 명확한 이름표들 - 바로 이해돼요!
let mathScore = 95;           // 수학 점수군요!
let studentCount = 5;         // 학생 수군요!
let isHomeworkDone = false;   // 숙제 완료 여부군요!

// 나중에 코드를 봐도 바로 이해할 수 있어요
console.log("수학 점수:", mathScore);
console.log("학생 수:", studentCount);  
console.log("숙제 완료:", isHomeworkDone);

// 친구가 봐도 쉽게 이해할 수 있어요
if (isHomeworkDone) {
    console.log("숙제를 다 했어요!");
} else {
    console.log("숙제를 아직 안 했어요!");
}

이 예시는 단순히 의미가 있는 것을 넘어서 구체적이고 명확한 이름표를 붙이는 것의 중요성을 보여줘요. number보다는 mathScore가, count보다는 studentCount가, check보다는 isHomeworkDone이 훨씬 따뜻하고 명확하죠.

🔹 세 번째 예시: 자바스크립트 이름표 규칙 제대로 지키기

세 번째로는 자바스크립트의 이름표 규칙을 어긴 경우와 올바른 경우를 비교해보겠어요.

// ❌ 규칙에 어긋나는 이름표들 (실제로는 에러가 나요)
// let 1st-place = "철수";    // 숫자로 시작하고 하이픈 사용 불가예요
// let my name = "영희";      // 띄어쓰기는 사용할 수 없어요
// let let = "값";           // 특별한 단어는 사용할 수 없어요

// ✅ 규칙에 맞는 올바른 이름표들
let firstPlace = "철수";       // 숫자 대신 영어로 써요
let myName = "영희";          // 띄어쓰기 대신 붙여써요
let myVariable = "값";        // 특별한 단어 대신 다른 단어를 써요

// 규칙을 지키면서도 의미가 명확한 이름표들
let gameWinner = "철수";       // 게임 우승자
let bestFriend = "영희";       // 가장 친한 친구
let favoriteColor = "파랑";    // 좋아하는 색깔

// 잘 사용되는 모습
console.log("게임 우승자:", gameWinner);
console.log("가장 친한 친구:", bestFriend);
console.log("좋아하는 색깔:", favoriteColor);

이 예시는 기술적인 규칙 준수의 중요성을 보여줘요. 아무리 의미가 좋은 이름표를 생각해내도 자바스크립트의 문법 규칙을 어기면 프로그램이 실행되지 않아요.

🔄 좋은 이름표 붙이기 순서 정리하기

지금까지 배운 내용을 바탕으로 좋은 이름표를 붙이는 체계적인 과정을 정리해볼게요.

첫 번째 단계는 목적 생각하기예요. 이 저장소가 무엇을 저장할지 먼저 명확히 생각해보세요. "학생의 수학 점수", "사용자의 로그인 상태", "장바구니의 상품 개수" 등 구체적으로 정의하는 것이 중요해요.

두 번째 단계는 의미 있는 단어 선택하기예요. 목적에 맞는 적절한 영어 단어나 한글 발음을 조화롭게 조합해서 이름표를 만들어요. 너무 길어지지 않으면서도 의미가 명확한 단어를 선택하는 것이 포인트예요.

세 번째 단계는 규칙 확인하기예요. 만든 이름표가 자바스크립트의 규칙에 맞는지 확인해요. 숫자로 시작하지 않는지, 특별한 단어를 사용하지 않았는지, 허용되지 않는 특수문자는 없는지 체크해보세요.

마지막으로 가장 중요한 것은 읽기 테스트하기예요. 몇 주 후에 다시 봐도 이해하기 쉬운지, 다른 사람이 봐도 직관적으로 알 수 있는지 확인해보세요.

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

좋은 이름표를 붙이기 위해 피해야 할 흔한 실수들을 알아보겠어요.

❌ 실수 1: 너무 짧고 애매한 이름표 붙이기

let a = "김철수";      // a가 뭘까요?
let n = 25;           // n이 뭘까요?
let b = true;         // b가 뭘까요?

// ✅ 개선된 버전
let studentName = "김철수";   // 학생 이름이군요!
let studentAge = 25;         // 학생 나이군요!
let isPresent = true;        // 출석 여부군요!

이런 실수가 생기는 이유는 타이핑을 줄이려는 욕구 때문이에요. 하지만 짧은 이름표는 나중에 봤을 때 무슨 의미인지 기억하기 어려워요. 몇 글자 더 타이핑하는 수고를 아끼지 말고 명확한 이름표를 사용하세요.

❌ 실수 2: 한글이나 잘못된 특수문자 사용하기

let 이름 = "철수";           // 가능하지만 추천하지 않아요
let my-name = "영희";       // 하이픈 사용 불가예요!
let student@age = 12;      // 특수문자 사용 불가예요!

// ✅ 개선된 버전  
let name = "철수";          // 영어로 써요
let myName = "영희";        // 붙여서 써요
let studentAge = 12;       // 영어와 숫자만 써요

한글 이름표는 문법적으로는 가능하지만, 전 세계 사람들과 함께 작업하는 것을 고려하면 영어로 쓰는 것이 좋아요.

❌ 실수 3: 특별한 단어 사용하거나 숫자로 시작하기

// let let = "값";        // 특별한 단어 사용 불가예요!
// let 1name = "철수";    // 숫자로 시작 불가예요!
// let class = "6학년";   // 특별한 단어 사용 불가예요!

// ✅ 개선된 버전
let myVariable = "값";     // 다른 단어를 써요
let firstName = "철수";    // 영어로 시작해요
let className = "6학년";   // 다른 단어를 추가해요

이런 실수는 자바스크립트의 기본 규칙을 어기는 것이므로 반드시 피해야 해요.

📦 기본 연습문제

이제 배운 내용을 좀 더 편안한 마음으로 연습해볼게요. 급하지 않게, 천천히 생각하면서 좋은 이름표 붙이기에 익숙해져 보세요.

연습문제 1: 다음 중 좋은 이름표는 어떤 것인지 골라보자

// A: let x = 15;
// B: let age = 15;
// C: let studentAge = 15;
// D: let a = 15;

// 정답: C (studentAge)
let studentAge = 15;
console.log("학생 나이:", studentAge);

연습문제 2: 나쁜 이름표를 좋은 이름표로 바꿔보자

// 나쁜 예시들
// let a = "피자";
// let b = 3;
// let c = true;

// 좋은 이름표로 바꾸기
let favoriteFoodName = "피자";    // 좋아하는 음식 이름
let sliceCount = 3;              // 조각 개수
let isDelicious = true;          // 맛있는지 여부

console.log("좋아하는 음식:", favoriteFoodName);
console.log("조각 개수:", sliceCount);
console.log("맛있나요?", isDelicious);

연습문제 3: 나만의 좋은 이름표로 정보를 저장해보자

// 나의 정보를 좋은 이름표와 함께 저장하기
let myName = "하늘";              // 내 이름
let myAge = 11;                   // 내 나이
let myHobby = "그림그리기";       // 내 취미
let favoriteSubject = "미술";     // 좋아하는 과목

// 저장된 정보들을 확인해보기
console.log("내 이름:", myName);
console.log("내 나이:", myAge);
console.log("내 취미:", myHobby);
console.log("좋아하는 과목:", favoriteSubject);

💡 복습 문제 - 1.2.3단원 되돌아보기

이전에 배운 객체와 배열을 기억하나요? 간단히 복습해봐요!

복습 문제 1: 객체와 배열 구별하기

다음 중 배열을 만드는 방법은?

A) let data = {name: "철수"};
B) let data = ["사과", "바나나"];
C) let data = "철수";

정답: B

해설: 배열은 대괄호 []로 만들고, 객체는 중괄호 {}로 만들어요. 배열은 순서대로 여러 정보를 저장할 때 사용해요.

복습 문제 2: 객체 기본 이해하기

다음 객체를 보고 질문에 답해보세요.

let person = {name: "민수", age: 12};

이 객체는 어떤 정보들을 가지고 있나요?

정답: 이름(name)과 나이(age) 정보를 가지고 있어요.

해설: 객체는 여러 개의 속성(정보)을 하나로 묶어서 저장할 수 있어요. 각 속성은 이름과 값으로 이루어져 있어요.

🤔 연습문제

기본 연습을 마치셨다면, 이제 조금 더 깊이 있는 문제들을 통해 이름표에 대한 이해를 차분히 확인해볼게요. 물 한 잔 놓고 천천히 생각해보세요.

문제 1: 다음 중 자바스크립트 이름표 규칙에 어긋나는 것은?

A) let userName = "철수";
B) let user_name = "철수";
C) let 2userName = "철수";
D) let $userName = "철수";

정답: C

해설: 이름표는 숫자로 시작할 수 없어요. 영문자, 밑줄(_), 달러 기호($)로만 시작할 수 있어요.

문제 2: 다음 이름표들 중 가장 좋은 것은?

let a = ["사과", "바나나", "포도"];
let list = ["사과", "바나나", "포도"];  
let fruits = ["사과", "바나나", "포도"];
let data = ["사과", "바나나", "포도"];

정답: fruits

해설: 배열에 과일이 들어있다는 것을 명확히 알 수 있는 이름표예요. a나 data는 너무 애매하고, list는 무엇의 목록인지 알 수 없어요.

💡 심화 복습 문제

이제 정말 깊이 있게 변수명에 대해 이해했는지 확인해보는 문제들이에요.

심화문제 1: 좋은 변수명의 조건 정리하기

좋은 변수명의 조건 3가지를 써보세요.

정답: 1) 의미가 명확해야 함, 2) 자바스크립트 규칙에 맞아야 함, 3) 읽기 쉬워야 함

해설: 이 세 가지 조건을 모두 만족하는 변수명이 좋은 변수명이에요.

심화문제 2: 다음 변수명들을 좋은 이름으로 바꿔보세요

let x = 100;        // 최대 점수
let y = "빨강";     // 좋아하는 색깔  
let z = false;      // 숙제 완료 여부

정답:

let maxScore = 100;
let favoriteColor = "빨강";
let isHomeworkDone = false;

해설: 각 변수의 목적을 명확히 나타내는 이름으로 바꾼 거예요.

심화문제 3: 왜 let let = "값";은 에러가 날까요?

정답: let은 자바스크립트의 예약어(키워드)이기 때문에 변수명으로 사용할 수 없어요.

해설: 자바스크립트에서 특별한 의미로 사용하는 단어들은 변수명으로 쓸 수 없어요.

심화문제 4: 변수명을 영어로 짓는 것이 좋은 이유

변수명을 영어로 짓는 것이 좋은 이유 2가지를 써보세요.

정답: 1) 전 세계 개발자들과 협업할 때 소통이 쉬워요, 2) 대부분의 프로그래밍 언어와 도구들이 영어 기반이라 호환성이 좋아요

해설: 영어는 프로그래밍 세계의 공통 언어 역할을 해요.

심화문제 5: 다음 코드에서 문제점 찾기

let student1 = "철수";
let 1student = "영희";

정답: 두 번째 줄이 문제예요. 변수명은 숫자로 시작할 수 없어요.

해설: student1처럼 끝에 숫자가 오는 것은 괜찮지만, 1student처럼 숫자로 시작하면 안 돼요.

✅ 소단원 검토 체크리스트

이 단원에서 배운 내용들을 모두 이해했는지 확인해볼게요!

체크 항목	확인
좋은 변수명과 나쁜 변수명을 구별할 수 있어요	☐
자바스크립트 변수명 규칙을 알고 있어요	☐
의미있는 변수명을 지을 수 있어요	☐
변수명 관련 실수들을 피할 수 있어요	☐
왜 좋은 변수명이 중요한지 이해해요	☐
예약어가 무엇인지 알고 있어요	☐
객체와 배열의 차이를 기억하고 있어요	☐

지금까지 좋은 변수명을 짓는 방법에 대해 차분히 알아봤어요. 좋은 변수명은 프로그래밍에서 매우 소중한 요소예요. 처음에는 어색할 수 있지만, 계속 연습하다 보면 자연스럽게 좋은 변수명을 지을 수 있게 될 거예요. 다음 시간에는 변수명을 더 체계적으로 짓는 특별한 방법에 대해 배워볼 예정이에요!

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---