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

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

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

자바스크립트 케이스 표기법

변수 / 함수

카멜 케이스 (camelCase)

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

클래스 / 컴포넌트

파스칼 케이스 (PascalCase)

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

환경변수 / 상수

어퍼 스네이크 (UPPER_CASE)

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

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

불린(Boolean)은 의문문으로

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

배열(Array)은 복수형으로

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

함수(Function)는 동사로 시작

함수는 '행동'을 하므로 동사원형으로 시작합니다.
ex) function getUser() {}

구체적인 영단어 사용

a, data 보다는 구체적인 이름을 사용합니다.
ex) let timeoutSec = 10;

문법 에러가 발생하는 절대 금지 변수명

숫자로 시작 불가: let 1stUser (X) ➔ let firstUser (O)
공백 / 하이픈(-) 포함 불가: let user name, let user-name (X)
특수문자 제외 (_ 와 $ 만 허용): let user@name (X)
자바스크립트 예약어 불가: let class, let return (X)

// ❌ 나쁜 변수명 (무엇을 의미하는지 알기 어려움) 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; } console.log("코딩 컨벤션을 지키면 협업이 훨씬 편해집니다!");