minstudio

코딩 컨벤션과 스타일 가이드 (Naming & Style)

여러 명이 함께 코드를 작성하는 실무 환경에서 '코드를 읽기 쉽게 작성하는 규칙'은 문법을 아는 것만큼 중요합니다. 자바스크립트 생태계에서 전 세계적으로 가장 널리 사용되는 네이밍 표기법과 변수명 짓기(Naming) 규칙을 알아봅니다.

자바스크립트 케이스 표기법 (Case)

변수 / 함수
카멜 케이스 (camelCase)

첫 단어는 소문자, 두 번째부터는 대문자로 시작합니다. (예: userName)

클래스 / 컴포넌트
파스칼 케이스 (PascalCase)

모든 단어의 첫 글자를 대문자로 시작합니다. (예: UserAccount)

환경변수 / 상수
어퍼 스네이크 (UPPER)

모두 대문자로 쓰되 단어를 밑줄(_)로 연결합니다. (예: MAX_USERS)

읽기 좋은 변수명 짓기 4계명

불린(Boolean)은 의문문으로

참/거짓을 담는 변수는 is, has, can 등으로 시작하여 질문하듯 짓습니다.
ex) let isOpen = true; / let hasError = false;

배열(Array)은 복수형으로

여러 개가 담긴 컬렉션 변수는 ~s나 ~List를 붙여 여러 개임을 명확히 합니다.
ex) let users = []; / let itemList = [];

함수(Function)는 동사로 시작

함수는 '행동'을 하므로 동사원형으로 시작합니다. get, set, update 등.
ex) function getUser() {} / function calcTotal() {}

구체적인 영단어 사용

a, data, value 같은 애매한 이름보다는 구체적이고 명확한 영단어를 사용합니다.
ex) let t = 10; (X) -> let timeoutSec = 10; (O)

절대 사용하면 안 되는 변수명 (에러 발생)

  • 숫자로 시작할 수 없습니다: let 1stUser (X) ➔ let firstUser (O)
  • 공백이나 하이픈(-)을 포함할 수 없습니다: let user name, let user-name (X)
  • 특수문자는 _와 $만 허용됩니다: let user@name (X)
  • 예약어(Reserved Word)는 사용할 수 없습니다: let class, let return (X)

이 외에도 문장 끝에 세미콜론(;)을 적는 습관, 들여쓰기 맞추기 등 팀마다 정하는 규칙이 있습니다. 처음부터 Prettier 같은 코드 포맷터를 활용하여 일관된 코딩 습관을 들이는 것이 좋습니다.

// ❌ 에러가 발생하는 변수명 (문법 오류)
// let 1stUser = "John";  // 숫자로 시작 불가
// let user name = "Tom"; // 공백 포함 불가
// let my-var = 10;       // 하이픈(-) 포함 불가
// let class = "A";       // 예약어 사용 불가

// ❌ 나쁜 변수명 (무엇을 의미하는지 알기 어려움)
let a = 'John';        // 이름인데 a?
let isopen = true;     // 카멜케이스 위반
let user = ['A', 'B']; // 배열인데 단수형?
function data(x) {     // 함수인데 명사?
    return x * 10; 
}

// ✅ 좋은 변수명: 카멜 케이스 + 구체적 단어
let userName = 'John';
let timeoutSecond = 10;

// ✅ 좋은 변수명: 불린은 is, has 로 시작
let isOpen = true;
let hasError = false;

// ✅ 좋은 변수명: 배열은 복수형(s) 또는 List
let users = ['John', 'Mike'];
let productList = [];

// ✅ 좋은 변수명: 함수는 동사로 시작
function calculateDiscount(price) { 
    return price * 0.1; 
}
코딩 컨벤션과 스타일 가이드 (Naming & Style) | Minstudio