1. 이름.. 이름.. 이름을 뭘로 하지?
긴 이름을 작성해야 코드의 의도를 명확히 해서 가독성을 높일 수 있다!
VS
짧은 변수 이름이 코드 작성을 더욱 간결하게 만들어 준다!
- 개발에서 의외로 힘든 작업 중 하나는.. 변수/함수/클래스 등지에 적절한 '이름'을 지어주는 것.
이름 짓기는 너무 어려워..
totalNumberOfActiveUsersInTheSystemForAnalytics
// 너무 구체적인 변수 이름과 함수 이름
const totalNumberOfActiveUsersInTheSystemForAnalytics = 100;
function calculateTheTotalAmountOfProductPricesIncludingTaxesForTheCheckoutPage(cartItems) {
return cartItems.reduce((total, item) => total + item.price * 1.1, 0); // 10% 세금 포함
}
const shoppingCart = [
{ name: "Laptop", price: 1000 },
{ name: "Mouse", price: 50 },
];
// 함수 호출
const totalPrice = calculateTheTotalAmountOfProductPricesIncludingTaxesForTheCheckoutPage(shoppingCart);
console.log("Total Price:", totalPrice);-
무슨 역할을 하는지 명확하게 알긴 알겠는데.. 호출할 때마다 이게 뭐하는 짓이야..
-
코드는 장황해지고, 너무 길면 오히려 어떤 기능을 수행하는지도 모르겠고, 코드 작성이나 수정할 때 불편함이 너무 늘어난다.
auth
-
이게 Authentication를 뜻하는거야? 아니면 Authorization을 뜻하는거야? 그리고 이거 어디서 사용하는 녀석이야?
- Authentication(인증)과 Authorization(인가, 권한 부여)에 대하여 -
짧고 간결해서 좋긴 한데, 목적을 이해하기 어려워진다.
이름 짓기가 어려운 이유는..
-
너무 구체적인 이름은 코드가 변경될 때 적합하지 않게 되고, 너무 추상적인 이름은 의도를 모호하게 만든다.
calculateTotalPrice (명확)
calc (모호) -
해당 코드가 속한 문맥(도메인, 기능 등)을 반영해야 하기 때문에, 코드의 맥락과 도메인을 깊이 이해하는 이름을 만드는게 어렵다.
data → 맥락이 없어서 어떤 데이터를 다루는지 알 수 없음.
userData 또는 productData → 맥락이 명확. -
간결해야 하지만, 동시에 충분히 의미를 전달해야 하는 균형을 잡는게 어렵다.
getUserDataForDisplayingUserProfile (길고 장황)
getUserProfileData (간결하면서도 의미 전달 가능)
2. 이름 짓기의 기본 규칙
-
Javascript에서는 대략 아래와 같은 이름 짓기의 기본 규칙들이 존재한다.
-
단, 실무에서는 회사나 팀 / 혹은 프로젝트의 특성에 따라 각기 다른 규칙이 적용될 수도 있다.
1. 변수 및 함수
CamelCase (카멜 케이스)
- 변수명과 함수명은 소문자로 시작, 단어가 결합될 때는 두 번째 단어부터 대문자로 시작해야한다.
let userName = "Alice";
function getUserName() {
return userName;
}2. 상수
UPPER_SNAKE_CASE (대문자 + 언더스코어)
- 변하지 않는 상수는 대문자와 언더스코어로 표기해야한다.
const MAX_VALUE = 100;
const API_KEY = "abc123";3. 클래스
PascalCase (파스칼 케이스)
- 클래스명은 대문자로 시작하며, 각 단어의 첫 글자를 대문자로 작성한다.
class UserProfile {
constructor(name) {
this.name = name;
}
}4. 객체의 키
camelCase 또는 문자열
- 객체의 키는 일반적으로 camelCase를 사용하지만, 외부 API나 JSON 데이터와 호환해야 하는 경우 문자열로 표기해야한다.
const user = {
userName: "Alice",
"user-id": 101, // 외부 데이터에서 이런 형식이 올 수 있음
};5. 파일명
kebab-case (케밥 케이스) / Snake_case (스네이크 케이스)
-
파일명은 일반적으로 kebab-case를 사용하며, 소문자와 하이픈으로 단어를 구분해야한다.
-
혹은 Snake_case를 사용할 수도 있다.
-
어느 쪽이든 하나의 프로젝트에서는 하나의 케이스로 통일하면 된다.
user-profile.js
index.html
main_style.css6. 모듈 및 패키지
kebab-case 또는 단일 소문자 단어
- 패키지명은 kebab-case나 단일 소문자 단어를 사용해야한다.
express
body-parser
my-custom-library7. 이벤트 핸들러
handle + EventName
- 이벤트 핸들러 함수는 handle 또는 on 접두사를 붙이고 이벤트명을 PascalCase로 작성해야한다.
function handleClick() {
console.log("Button clicked!");
}
button.addEventListener("click", handleClick);8. 프라이빗 변수
Underscore Prefix (언더스코어 접두사)
- ES6 이전에는 클래스 내부에서 사용되는 프라이빗 변수에 언더스코어를 붙이는 관례가 있었다. 현재는 #(Private 필드)를 사용해야한다.
// 예전 방식
this._privateValue = 10;
// 최신 방식 (ES6+)
class MyClass {
#privateValue = 10;
}9. 네임스페이스
PascalCase
- 네임스페이스 객체는 PascalCase로 작성해야한다.
const MyApp = {
Utils: {},
Models: {},
};10. 일반적인 금지 사항
숫자로 시작하는 이름:
- 변수명은 숫자로 시작할 수 없다.
// 잘못된 예:
let 1user = "Alice"; // 에러 발생예약어 사용 금지:
- class, return 같은 예약어를 변수명으로 사용할 수 없다.
// 잘못된 예:
let return = 10; // 에러 발생의미 없는 이름:
- data, value 같은 추상적인 이름은 피하고, 구체적이고 의미 있는 이름을 사용해야한다.
let productPrice = 100; // 좋은 예
let data = 100; // 나쁜 예