[지식루프 IT공부] 자바스크립트 변수 네이밍 가이드

자바스크립트 변수 네이밍 가이드

변수 이름은 코드 가독성과 유지보수에 중요한 역할을 합니다.
좋은 변수명은 직관적이며, 코드의 의도를 명확히 전달해야 합니다.
아래 가이드를 따르면, 더 깔끔하고 읽기 쉬운 코드를 작성할 수 있습니다.

---

1. 기본 원칙

✅ 의미 있는 이름 사용

• ❌ let a = 10; (X)
• ✅ let userAge = 10; (O)
• 목적이 분명한 이름을 선택해야 합니다.

✅ 카멜케이스(Camel Case) 사용

• ✅ let firstName = "Alice"; (O)
• ❌ let first_name = "Alice"; (X) (파이썬 스타일)
• 자바스크립트에서는 firstName처럼 소문자로 시작하고, 단어 연결 시 대문자를 사용하는 것이 일반적입니다.

✅ 예약어 사용 금지

• let function = 10; (X)
• let class = "JavaScript"; (X)
• JavaScript의 키워드(예약어)는 변수명으로 사용할 수 없습니다.

✅ 의미 없는 접두어, 불필요한 줄임말 지양

• ❌ let d = new Date(); (X) (의미 불분명)
• ✅ let currentDate = new Date(); (O)
• 변수명을 지나치게 짧게 만들면 가독성이 떨어질 수 있습니다.

---

2. 변수 유형에 따른 네이밍 규칙

📌 Boolean 값 (true/false) → is, has, can, should 접두어 사용

 

let isActive = true; // 활성화 여부

let hasPermission = false; // 권한 여부

let canEdit = true; // 수정 가능 여부

Boolean 변수는 참/거짓을 나타내므로, 질문형 네이밍을 사용하는 것이 좋습니다.

 

📌 배열(Array) → 복수형 사용

 

let users = ["Alice", "Bob", "Charlie"]; // 사용자 목록

let items = ["Apple", "Banana", "Orange"]; // 항목 리스트

배열 변수는 복수형(s)으로 끝나는 것이 일반적입니다.

 

📌 객체(Object) → 단수형 사용

 

let user = { name: "Alice", age: 25 }; //

단수형 let product = { name: "Laptop", price: 1000 }; // 단수형

객체는 단수형으로 명명하는 것이 일반적이며, 해당 데이터가 개별 엔티티를 의미하도록 합니다.

 

📌 함수(Function) → 동사 사용

 

function getUserName() { return "Alice"; } // "get" 동사 사용

function setAge(age) { user.age = age; } // "set" 동사 사용

function calculateTotal(price, tax) { return price + tax; } // "calculate" 사용

함수명은 동사로 시작하는 것이 일반적이며, 해당 기능이 무엇을 수행하는지 명확하게 표현해야 합니다.

---

3. 컨벤션 및 스타일 가이드

✅ 상수(Constant)는 대문자로 작성

 

const MAX_USERS = 100;

const API_URL = "https://example.com/api";

상수는 변하지 않는 값을 의미하므로, 모두 대문자로 작성하고 _로 구분하는 것이 일반적입니다.

 

✅ 약어(Acronym) 사용 시 일관성 유지

 

let htmlElement = document.getElementById("main"); // "HTML" 대신 "Html" 사용 (일관성 유지)

let apiResponse = fetch(API_URL); // "API"는 그대로 대문자로 사용

약어는 모든 문자를 대문자로 쓰거나, 첫 글자만 대문자로 유지하는 방식이 좋습니다.

 

✅ 접두어를 활용하여 변수 역할 명확히 하기

 

let userCount = 5; // "user" 관련된 숫자 데이터

let filePath = "/home/user/file.txt"; // 파일 경로 저장

변수명이 어떤 데이터를 담고 있는지 알 수 있도록 의미 있는 접두어를 사용하는 것이 좋습니다.

---

4. 피해야 할 변수명 스타일

❌ 의미 없는 변수명 사용 금지

 

let x = 10; // (X) 의미 없음

let data = "John"; // (X) 너무 일반적임

변수명은 변수의 역할을 명확하게 나타내야 합니다.

 

❌ 헝가리식 표기법 사용 지양

 

let strName = "Alice"; // (X) 불필요한 데이터 타입 접두어

let intAge = 25; // (X) 변수 타입을 명시할 필요 없음

JavaScript는 동적 타입 언어이므로, 타입을 변수명에 포함할 필요가 없습니다.

 

❌ 줄임말 사용 금지

 

let usrNm = "Alice"; // (X) 줄임말로 인해 가독성이 낮아짐

let cnt = 10; // (X) count를 명확히 적는 것이 좋음

변수명을 줄이면 가독성이 떨어지므로, 최대한 직관적으로 작성하는 것이 좋습니다.

---

📌 결론

✔️ 의미 있는 이름을 사용해야 합니다.
✔️ 변수 유형에 따라 네이밍 규칙을 적용해야 합니다.
✔️ 네이밍 컨벤션을 지켜 가독성을 높여야 합니다.
✔️ 상수는 대문자로, 함수는 동사로 시작하는 것이 좋습니다.

이 가이드를 따르면 더 가독성 좋고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 😊