자바스크립트 변수명 지정 규칙: 실무에서 반드시 지켜야 할 핵심 원칙
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
자바스크립트 초보 개발자, 프론트엔드 개발자, 코드 리뷰 담당자
핵심 요약
- 변수명은
camelCase
로 작성하고, 상수는UPPER_SNAKE_CASE
로 구분 (예:userName
,MAX_RETRIES
) - 불리언 변수는
is
,has
,can
으로 시작하여 상태를 명확히 표현 (예:isLoggedIn
,hasPermission
) - 배열은 복수형(
users
,products
), 객체는 목적을 반영한 명확한 이름(userProfile
) 사용 - 단위가 명시된 수치 변수는
timeoutInMs
,maxItemsCount
처럼 명확하게 작성
섹션별 세부 요약
1. 변수명 규칙: camelCase 사용
- 자바스크립트 표준은
camelCase
(예:userName
,totalPrice
) snake_case
나PascalCase
는 클래스/상수에만 사용 (예:user_name
,TotalPrice
)
2. 명확한 이름 사용
- 너무 짧거나 일반적인 이름(
em
,mra
)은 피하고, 목적을 반영한 이름(customerEmail
,maxRetryAttempts
) 사용
3. 불리언 변수: `is`, `has`, `can` 접두사 사용
- 상태를 명확히 표현해야 함 (예:
isLoggedIn
,hasPermission
)
4. 배열/컬렉션: 복수형 이름 사용
users
처럼 복수형 이름으로 개별 요소와 구분 (예:userList
는 중복된 접미사로 피함)
5. 객체: 내용을 반영한 이름 사용
userProfile
처럼 객체의 역할을 명확히 반영 (예:data
는 너무 일반적)
6. 상수: `UPPER_SNAKE_CASE` 사용
- 명시적으로 설정된 값은
MAX_USERS
처럼 사용 (예:maxUsers
는 상수로 명확하지 않음) - 동적으로 생성된 값은
camelCase
사용 (예:BIRTHDAY_USER
,ageUser
)
7. 수치 변수: 단위 명시
timeoutInMs
,maxItemsCount
처럼 단위를 포함하여 명확하게 작성 (예:timeout
은 단위 불명확)
8. 구조 분해: 명확한 이름 사용
- 기존 변수명과 충돌 방지를 위해
name: userName
,age: userAge
처럼 명시 (예:name
,age
는 기존 변수와 충돌 가능성)
9. 예외 상황
- 카운터/인덱스:
i
,j
,k
처럼 짧은 이름 사용 (예:for (let i = 0; ...)
- 임시 변수:
temp
,result
사용 (예:let temp = calculateSomething()
) - DOM 요소:
submitButton
,emailInput
처럼 접두사 추가 (예:submit
은 DOM 요소인지 불명확)
10. 추천 예시
- 상수:
MAX_RETRIES = 3
- 객체:
currentUser = { name: "John" }
- 불리언:
isModalOpen = false
- 함수:
fetchUserData = async () => { ... }
- 배열:
products = [{ id: 1 }, { id: 2 }]
결론
- 변수명은 개발자에게 명확한 의미를 전달해야 하며,
camelCase
/UPPER_SNAKE_CASE
구분, 불리언 접두사, 복수형 배열 등 규칙을 철저히 준수해야 한다. - 예외 상황도 존재하나, 대부분의 경우 명확성과 유지보수성을 위해 규칙을 적용하는 것이 실무적이다.