알고리즘 문제를 풀다 보면 가독성 있고 간결하게 작성된 다른 사람들의 풀이를 자주 접하게 됩니다.
그럴때 마다 “어떻게 저렇게 간결하게 쓸 수 있을까?“ 라는 생각과 함께 조용히 감탄했습니다.
이후 메서드를 활용하는 방법들은 문제를 반복적으로 풀면서 점차 익히게 되었지만, 변수명을 간결하고 명확하게 짓는 일은 여전히 어려운 과제로 남아 있었습니다.
그래서 이 글에서 좋은 변수명 짓는 방법에 대해 정리해보겠습니다
1. 좋은 변수명이 왜 필요한가?
다양한 이유가 있지만, 가장 중요한 이유는 “기능을 명확하고 간결하게 표현” 하기 위해서 라고 생각합니다.
개발을 처음 배울 때는 단순히 기능을 구현하는 것이 전부라고 여겼던 적이 있습니다. 하지만 현업에서는 다양한 이유로 끊임 없는 기능의 수정이 필요했습니다. 그때마다, 오래전에 작성한 코드를 다시 보거나, 다른 사람이 만든 코드를 수정해야 하는 상황도 빈번히 발생했고, 코드를 읽고 이해하는 데 많은 시간이 소모 되는 것을 경험했습니다.
즉, 코드를 읽고 이해하는 데 걸리는 시간을 최소화하려면 기능을 명확하고 간결하게 표현하는 것이 필수적입니다.이는 가독성 좋은 코드를 작성하기 위한 기본 원칙이자 출발점이라 할 수 있습니다.
2. 좋은 변수 작성 가이드
좋은 변수명을 짓는 방법에 대해 많은 글에서 공통적으로 강조하는 점은, 변수명에 코드의 의도와 의미를 명확히 담아야 한다는 것입니다.
하지만 코드 스타일은 사람마다 주관적으로 생각하는 부분도 많기 때문에, 다양한 사례를 정리하여 참고할 수 있도록 하는 데 의의를 두고자 합니다.
2-0. 공통 사항
Javascript
1. CamelCase 사용
2. 클래스명은 대문자 시작
3. 상수는 대문자 표기
4. 로직이 끝날시 줄바꿈
5. element 앞에는 $ 붙이기, 여러개 호출시는 $$2-1. 문맥 중복을 피하기
변수나 메서드 이름에서 이미 해당 컨텍스트가 의도를 전달하고 있다면, 불필요한 반복은 제거
class MenuItem {
// 중복된 문맥 표현
handleMenuItemClick = (event) => { ... }
// 간결한 표현
handleClick = (event) = { ... }
}2-2. 예상 결과 반영하기
변수명은 결과를 직관적으로 전달해야함, 혼동을 줄 수 있는 변수명은 자제
// 부정 표현임으로 한번더 논리적으로 생각이 필요
const isEnabled = itemCount > 3
return <Button disabled={!isEnabled} />
// 직관적으로 이해됨
const isDisabled = itemCount <= 3
return <Button disabled={isDisabled} />2-3. 의미 없는 단어 피하기
변수명이 해당 해당 값의 역할을 명확히 들어내는 표현으로 작성
// 보편적으로 쓰이는 무의미한 변수명
function add(a, b) {
return a + b;
}
// 명확한 변수명
function add(num1, num2) {
return num1 + num2;
}2-4. 과도한 축약어 사용 피하기
변수명은 오해할 여지를 최소화해야한다. 잘못된 ㅇ
// 과도한 축약어 사용으로 의미 파악이 어려움
const onItmClk = () => {}
// 명확한 이름
const onItemClick = () => {}
// 축약이 사용되는 경우도 있지만 협업시에는 자제하거나, 공통 규칙으로 만들자
const idx;
const count_num;2-5. 오해가 생기는 의미는 피하기
변수명은 직관적인 이름으로 만들기, 오해할 여지가 있는 변수명은 의도를 제대로 전달하기 어려움
// 오해를 부를 수 있는 변수 이름
const ON_GOING = true; // 뜻: 진행중, 실제 의미 : 유효함 (validate)
const IS_VALID = true; // 명확한 이름 사용2-6. 블리언 변수에 이름 붙이기
블리언 변수의 경우, is, has, can, should, use 와 같은 접두사를 붙여 불리언임을 표시
const valid = true; // 의미는 유효성을 나타내지만, 불리언임이 명확하지 않음
const isValid = true; // 유효성을 나타내며 불리언임을 명확히 알 수 있음
const clicked = false; // 클릭 여부를 나타내지만 불리언임이 명확하지 않음
const isClicked = false; // 클릭 여부를 명확히 표현3. 좋은 변수명을 짓기 위한 방법들
3-1. SMART
- easy to Search : 검색하기 쉽고
- easy to Mix : 조합하기 쉽고
- easy to Agree : 동의하기 쉽고
- easy to Remember : 기억하기 쉽고
- easy to Type : 입력하기 쉽고
1. 검색하기 쉽게 이름짓기
공통된 상위 범주의 개념을 앞의 이름으로 정하기
// 개별 검색
const SERVER_TIMEOUT;
const NO_RESULT;
// ERROR 로 빠르게 검색
const ERROR_SERVER_TIMEOUT;
const ERROR_NO_RESULT;2. 조합하기 쉽게 이름 짓기
같은 주제나 카테고리에 속한 이름들이 쉽게 조합될 수 있도록 규칙적이고 체계적으로 이름을 사용하기
// 비체계적인 이름: 조합이나 검색 어려움
const BTN_PRIMARY = 'btn-primary';
const HIGHLIGHT_COLOR = '#ff0';
const ICON_DELETE = 'icon-delete';
// 조합하기 쉬운 체계적인 이름
const BUTTON_PRIMARY = 'btn-primary';
const BUTTON_SECONDARY = 'btn-secondary';
const COLOR_HIGHLIGHT = '#ff0';
const COLOR_BACKGROUND = '#f0f0f0';
const ICON_TRASH = 'icon-trash';
const ICON_SAVE = 'icon-save';3. 동의하기 쉽게 이름 짓기
변수명은 팀원들이 직관적으로 이해할 수 있는 단어를 사용해야한다. 상황에 따라 다르지만 search 라는 일반적인 단어 대신 inquiry 라는 단어를 사용할 필요는 없음
// 이해하기 어려운 변수 이름
const inquiryData = () => {
// 실제로는 검색 기능을 수행
...
};
// 자연스럽고 직관적인 변수 이름
const searchData = () => {
// 검색 기능임을 명확히 표현
...
};4. 기억하기 쉽게 이름 짓기
변수명은 기억하기 쉬운 이름으로 지어야 쉽게 기억할 수 있음
Amazon S3 : Simple Storage Service 이지만 S3 라는 간결한 이름으로 쉽게 기억 가능
MVC 패턴 : model view controller 의 약자로, 역활과 의미를 쉽게 이해 할 수 있음5. 입력하기 쉽게 이름 짓기
공통적으로 많이 사용되는 단축어를 사용해 변수명 짓기
success => ok
address => addr
index => idx
array => arr
number => num
count => cnt
rm => remove
delete => del
textToImg => txt2Img
등등 다양한거같음 상황에 맞게 쓰자
이름 긴것도, IDE 를 활용하기 때문에 효율적으로 작성 할 수 있음 4. 결론
좋은 변수명을 만드는 방법을 정리해 보았지만, 오히려 더 모호해졌다는 느낌이 듭니다. 다양한 방법이 존재하지만, 서로의 주장과 의도가 주관적이고 다르게 느껴지기 때문입니다.
물론 공통적으로 동의할 수 있는 개념들이 존재하지만, 그것조차도 명확하게 정의되지 않고 다소 추상적으로 느껴집니다. 결국, 좋은 변수명은 경험을 통해 하나씩 찾아가는 과정이 필요하다는 생각이 듭니다.
그럼에도 불구하고, 기본적인 네이밍 원칙과 큰 틀을 통해 방향을 잡을 수 있는 시간이었습니다.
참고자료
github[naming-cheatsheet]
Naming Conventions Every Developer Should Know in Javascript
Naming as a Process (영문이라 아직 다 못읽어봄)
[좋은 코딩 습관] 깔끔하게 코드 짜는 10가지 규칙
변수명을 잘 짓기 위한 몸부림
추천 도서
개발자의 글쓰기(아직 안읽음)
읽기 좋은 코드가 좋은 코드다 (아직 안읽음)
