AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

자바스크립트 변수명 지정 규칙: 실무에서 반드시 지켜야 할 핵심 원칙

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

자바스크립트 초보 개발자, 프론트엔드 개발자, 코드 리뷰 담당자

핵심 요약

  • 변수명은 camelCase로 작성하고, 상수는 UPPER_SNAKE_CASE로 구분 (예: userName, MAX_RETRIES)
  • 불리언 변수는 is, has, can으로 시작하여 상태를 명확히 표현 (예: isLoggedIn, hasPermission)
  • 배열은 복수형(users, products), 객체는 목적을 반영한 명확한 이름(userProfile) 사용
  • 단위가 명시된 수치 변수는 timeoutInMs, maxItemsCount처럼 명확하게 작성

섹션별 세부 요약

1. 변수명 규칙: camelCase 사용

  • 자바스크립트 표준은 camelCase (예: userName, totalPrice)
  • snake_casePascalCase는 클래스/상수에만 사용 (예: 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 구분, 불리언 접두사, 복수형 배열 등 규칙을 철저히 준수해야 한다.
  • 예외 상황도 존재하나, 대부분의 경우 명확성과 유지보수성을 위해 규칙을 적용하는 것이 실무적이다.