변수 명명 규칙(Variable Naming Rules)#
JavaScript의 변수 명명 규칙(Variable Naming Rules)은 코드의 가독성과 유지보수성을 높이는 데 중요한 역할을 한다.
좋은 변수 이름을 사용하면 코드를 처음 보는 사람도 더 쉽게 이해할 수 있고, 나중에 자신이 작성한 코드를 다시 볼 때도 의도를 빠르게 파악할 수 있다.
필수 규칙 (문법적 제약)#
변수 이름에는 다음과 같은 필수 규칙이 적용된다:
문자, 숫자, 밑줄(_), 달러 기호($)만 사용 가능하다.
1
2
3
| let userName = "John"; // 올바른 이름
let user_name = "John"; // 올바른 이름
let $price = 100; // 올바른 이름
|
변수 이름은 숫자로 시작할 수 없다 (문자, 밑줄, 또는 달러 기호로 시작해야 한다).
1
2
| let 1user; // 잘못된 이름 (오류 발생)
let user1; // 올바른 이름
|
예약어를 변수 이름으로 사용할 수 없다.
예약어의 예: var, let, const, if, else, function, return 등
1
2
| let let = 5; // 잘못된 이름 (오류 발생)
let myVar = 5; // 올바른 이름
|
대소문자를 구분한다(case-sensitive).
1
2
| let userName = "John";
let USERNAME = "Jane"; // 완전히 다른 변수
|
코딩 관행 (스타일 가이드)#
좋은 코드 작성을 위한 관행들:
카멜 케이스(camelCase) 사용하기
JavaScript에서는 일반적으로 첫 글자는 소문자로 시작하고, 이후 단어의 첫 글자만 대문자로 하는 카멜 케이스를 사용한다.
1
2
3
| let firstName = "John";
let isUserLoggedIn = true;
let calculateTotalPrice = function() { /* ... */ };
|
클래스에는 파스칼 케이스(PascalCase) 사용하기
클래스 이름은 첫 글자부터 대문자로 시작한다.
1
2
3
4
5
| class UserProfile {
constructor(name) {
this.name = name;
}
}
|
상수에는 대문자와 언더스코어 사용하기
값이 변하지 않는 상수는 모두 대문자를 사용하고 단어 사이에 밑줄을 넣는다.
1
2
| const MAX_USER_COUNT = 100;
const API_BASE_URL = "https://api.example.com";
|
의미 있는 이름 사용하기
변수 이름은 그 내용이나 목적을 명확히 나타내야 한다.
1
2
3
4
5
| // 좋지 않은 예:
let x = 5;
// 좋은 예:
let userAge = 5;
|
불리언 변수에는 is, has, can 등의 접두사 사용하기
1
2
3
| let isActive = true;
let hasPermission = false;
let canEdit = true;
|
특별한 경우와 고급 규칙#
프라이빗 변수를 위한 관행
JavaScript에서는 ES2022 이전까지 진정한 의미의 프라이빗 변수가 없었다.
그래서 밑줄로 시작하는 이름을 사용하여 “이것은 프라이빗으로 취급해주세요"라는 의미를 전달했다.
1
2
3
4
5
| class User {
constructor() {
this._privateVar = 42; // 관행적으로 프라이빗
}
}
|
ES2022부터는 #을 사용한 진짜 프라이빗 필드가 도입되었다:
1
2
3
4
5
6
7
| class User {
#privateField = 42; // 진짜 프라이빗
getPrivateField() {
return this.#privateField;
}
}
|
jQuery와 같은 라이브러리에서의 관행
jQuery 객체를 담은 변수 이름 앞에 $를 붙이는 것이 관행이다:
1
| const $button = $("#submit-button");
|
실제 코드에서의 사용 예시#
아래는 다양한 변수 이름 규칙이 적용된 실제 코드 예시:
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
| // 상수
const MAX_RETRY_COUNT = 3;
const API_KEY = "abcd1234";
// 변수
let firstName = "John";
let lastName = "Doe";
let isLoggedIn = false;
let userAge = 25;
// 함수
function calculateTotalPrice(price, tax) {
// 지역 변수
let taxAmount = price * tax;
let totalPrice = price + taxAmount;
return totalPrice;
}
// 클래스
class UserProfile {
#privateData; // 프라이빗 필드 (ES2022+)
constructor(name, age) {
this.name = name;
this.age = age;
this._createdAt = new Date(); // 관행적 프라이빗
this.#privateData = { sensitive: true }; // 진짜 프라이빗
}
getUserSummary() {
return `${this.name}, ${this.age}세`;
}
}
|
가독성과 유지보수성을 위한 추가 조언#
너무 길거나 너무 짧은 이름 피하기
- 너무 짧은 이름 (예:
a, b, c)은 의미를 파악하기 어렵다. - 너무 긴 이름은 타이핑하기 어렵고 코드를 읽기 불편하게 만든다.
약어 사용에 주의하기
널리 알려진 약어가 아니라면 풀어서 쓰는 것이 좋다.
1
2
3
4
5
| // 좋지 않은 예:
let uaddr = "서울시 강남구";
// 좋은 예:
let userAddress = "서울시 강남구";
|
일관성 유지하기
같은 종류의 데이터나 기능에는 같은 이름 지정 방식을 사용한다.
1
2
3
4
5
6
7
| // 일관성 없는 예:
let getUserName = function() { /* ... */ };
let fetch_user_age = function() { /* ... */ };
// 일관된 예:
let getUserName = function() { /* ... */ };
let getUserAge = function() { /* ... */ };
|
참고 및 출처#