변수 이름을 어떻게 하면 잘 지을까?
0. 들어가기 앞서서
❓ 다 아는 건데 왜 이 주제를 왜 가지고 왔냐
🅰️ 최근 인스타를 보다가 변수 명 관련해서 영상이 하나가 떴는데 처음 안 사실들이 있어서 신기해서 파고 있어서 이런 주제를 꺼내게 됐다.
❗주의할점
- js기준으로 문서가 정의되어있음.
- 다른언어를 공부하고 있는 사람에게는 2.1~2.10 방법 중 몇 개는 패스해도 좋다.
1. 변수란?
‘변수’는 어떤 공간에 어떤 값을 저장하기 위한 이름을 가진 공간이다.
2. 변수 이름을 잘 짓는 방법
2.1 명확한 이름 사용하기
영어 약어 사용 자제
이름만 봐도 어떤 역할을 하는지 확인 할 수 있어야 한다.
// 잘못된 예제: 축약어와 모호한 변수명 사용
const it = []; // it가 뭐지?
let tp = 0.0; // tp는 무슨 의미?
function al(i: string, p: number) { // al? 무슨 함수?
it.push(i);
tp += p;
}
function rl(i: string, p: number) { // rl? 무슨 동작?
// remove 로직
tp -= p;
}// 올바른 예제: 명확한 변수명 활용
const items: string[] = [];
let totalPrice = 0.0;
function addItem(item: string, price: number) {
items.push(item);
totalPrice += price;
}
function removeItem(item: string, price: number) {
const index = items.indexOf(item);
items.splice(index, 1);
totalPrice -= price;
}2.2 키워드에서 제공해주는 정보 중복으로 사용하지 않기
타입스크립트로 예를 들어보자
// 잘못된 예제: 타입 정보를 변수명에 중복
interface IUser {
name: string;
age: number;
}
let sUserName: string = "구성연";
let nUserAge: number = 25;// 올바른 예제: 타입 시스템이 이미 정보 제공
interface User {
name: string;
age: number;
}
let userName: string = "구성연";
let userAge: number = 25;이미 앞에 인터페이스를 적었는데 변수 앞에 I 를 붙일 이유가 없고, 문자열로 타입정의를 했다면 앞에 S를 붙이지 않아도 된다.
2.3 정확한 상속 관계를 보여주는 명칭 사용하기
// 잘못된 예제: 도대체 기본 값이 왜 필요함?
class BaseDog {}
class Dog extends BaseDog {}// 올바른 예제: 실제적인 상속 관계의 이름을 사용
class Dog {}
// 부모 클래스에 Base같은 애매한 명칭을 사용하지말고 차라리 자식 클래스를 상세히 정의
class Puddle extends Dog {}클래스 명만 봤을 때 BaseDog와 Dog 가 뭐하는건지 알 수가 없음.
부모 클래스는 간단하게 하고 자식 클래스를 상세하게 정의하자.
2.4 단위를 알 수 있는 변수 명 사용하기
// 잘못된 예제: 단위를 알 수 없음
let length: number = 100;
let width: number = 50.0;
let time: number = 50;
let speed: number = 99;// 올바른 예제: 정확한 단위를 알 수 있음
let lengthMeters: number = 100;
let widthPixels: number = 50.0;
let timeSeconds: number = 50;
let speedKph: number = 99;타입에서 정의할 수 없는 단위들 pixels , Meters 등 알 수 있게 정의하자.
2.5 일관된 네이밍 규칙 사용하기.
개발을 처음하는 사람들이 자주하는 실수
❓ 왜 실수하나요?
🅰️ 코드는 잘 돌아가니까…
// 잘못된 예제: 네이밍 규칙이 일관되지 않음
function user_manager(user_name: string, UserAge: number) {
// snake_case와 PascalCase 섞임
return {
user_name,
UserAge
};
}
function UpdateUserProfile(NewName: string, new_age: number) {
// 파라미터도 섞여있음
return {
user_name: NewName,
UserAge: new_age
};
}
const user = user_manager("Minji", 21);
UpdateUserProfile("Alice", 22);// 올바른 예제: 일관된 camelCase 사용
function createUser(userName: string, userAge: number) { // camelCase
return {
userName,
userAge
};
}
function updateUserProfile(newName: string, newAge: number) { // camelCase
return {
userName: newName,
userAge: newAge
};
}
const user = createUser("Minji", 21);
updateUserProfile("Alice", 22);2.6 함수 명에서는 동사 사용하기
영어가 약하신 분들이 자주 하는 실수
// 잘못된 예제: 함수명에 명사만 사용
function user(id: number) {
return database.find(id);
}
function profile(userId: number) {
return api.request(userId);
}// 올바른 예제: 함수명에 동사 사용
function getUser(id: number) {
return database.find(id);
}
function fetchProfile(userId: number) {
return api.request(userId);
}2.7 같은 개념에 여러 용어 혼동해 사용하지 않기
데이터를 가지고 오는 get, fetch
데이터를 지우는 delete, remove
데이터를 생성하는 create, add
이 중에 하나로 통일해서 사용하기.
// 잘못된 예제: 같은 동작에 다른 용어 혼용
function fetchUserData(userId: number) {
return database.query(userId);
}
function getUserPosts(userId: number) {
return database.query(userId);
}
function removeComment(commentId: number) {
database.delete(commentId);
}
function deletePost(postId: number) {
database.delete(postId);
}// 올바른 예제: 일관된 네이밍 사용
function getUserData(userId: number) {
return database.query(userId);
}
function getUserPosts(userId: number) {
return database.query(userId);
}
function deleteComment(commentId: number) {
database.delete(commentId);
}
function deletePost(postId: number) {
database.delete(postId);
}2.8 발음하기 쉬운 이름 사용하기
내가 영어 발음이 약하다 싶으면 약어를 사용하지 말자
예를들면 isAvailable 을 어떻게 발음해야할지도 모르겠는데 약어로 써놓으면 더 모르니까 영어를 모르겠다 싶으면 약어 말고 영어 원문 그대로 써놓는게 좋다
// 잘못된 예제: 축약어 사용
function chkUsrAge(usrAge: number): boolean {
return usrAge >= 18;
}
const isVld = chkUsrAge(20); // Valid 축약// 올바른 예제: 읽기 쉬운 변수명
function checkUserAge(userAge: number): boolean {
return userAge >= 18;
}
const isValid = checkUserAge(20);2.9 검색 가능한 이름 사용하기
예를 들어보자
시간이라는 이름을 영어로 검색하고 싶은데 어떤 블로그에서는 시간을 t로 줄여서 말하면 검색하기 까다로울 것이다. 그러면 블로그를 작성한 사람도 t가 어떤걸 말하는지 햇갈릴것이다.
// 잘못된 예제: 의미 없는 짧은 변수명
function calculateDuration(t: number): number {
return t * 60; // t가 뭐지? 초? 분? 시간?
}// 올바른 예제: 검색하기 쉬운 명확한 변수명
function calculateDuration(timeMinutes: number): number {
return timeMinutes * 60; // IDE에서 'time' 검색하면 바로 찾을 수 있음
}2.10 언어별 스타일 가이드 준수하기
언어별 가이드 라인이 있으면 가이드라인을 준수하는게 좋다.
A언어에서 사용하는 가이드라인을 B라는 언어에 접목시키지 말라는 소리이다.
- JS/TS/Java/C++/C#:
camelCase - Python/C:
snake_case
// JavaScript
const userName = "Alice";
const isActive = true;
const userAge = 25;// TypeScript
const userName: string = "Alice";
const isActive: boolean = true;
const userAge: number = 25;// Java
String userName = "Alice";
boolean isActive = true;
int userAge = 25;// C++
string userName = "Alice";
bool isActive = true;
int userAge = 25;// C#
string userName = "Alice";
bool isActive = true;
int userAge = 25;# Python
user_name = "Alice"
is_active = True
user_age = 25// C
char user_name[] = "Alice";
int is_active = 1;
int user_age = 25;💡 참고사이트
front-end를 꿈꿉니다