[변수,함수] 네이밍

 

멘토링을 받을때 지적을 많이 받았다 ㅜㅜ 그래서 예전에 비해서는 좋아 졌다고 이야기를 해주셨지만.
뭔가 찜찜함이 있어서 오늘 확실하게 하고, 이 글을 정리하게 되면 나만의 변수 컨벤션을 만들어 볼 생각이다!

 

회사마다 컨벤션이 있다는 이야기를 들어서 그때 들어가서 해도 늦지 않을꺼라 생각했지만.

이번에 포트폴리오 준비 과정에서 변수명도 잘 짓고 싶고, 마지막 프로젝트에 다른 프로젝트에서 겪으며 배운 모든 것을 쏟아 보고 싶어서, 이렇게 정리를 해봐야 겠다는 결심을 한것도 있다

 

내가 작성한 글을 무조건 이렇게 해야한다는 건 아닙니다. 이렇게 많이들 사용한다라는 정보를 가지고 온 것이라 적절히 참고로 사용하면 좋을 꺼 같습니다.

 

 

 

 

◼ 변수명의 길이는 어느정도?

변수명의 길이는 정해진 규칙이 없지만, 가독성과 이해도를 생각한다면 최대 20자 이내도 적은 것이 좋다고 합니다.

너무 짧아도 의미를 알수 없고, 너무 길어도 복잡해 지기 때문이죠,

20자 이내를 지키는것이 좋지만, 어쨋든 규칙은 아니기에 더 길어 진다 해도 명확성을 더 우선시 해서 지어야 합니다

 

 

 

◼ 의미있는 단어 사용

함수명의 의미가 명확해야 무슨 값을 담을 변수인지 목적이 명확하게 이해할수 있습니다.

 

예를 들어.

[의미없이 적은 단어]
const list = [...] // 목적: todo  값을 담는 변수
const stay =  0 // 목적: count 시작값
const modal = true // 목적: 모달 on, off 변수

[의미있게 적은 단어]
const todoList = [...] // 목적: todo  값을 담는 변수
const initializedCount =  0 // 목적: count 시작값
const isModalVisible = true // 목적: 모달 on, off 변수

 

 

 

 

 

◼ 일반 변수 네이밍

거의 대부분의 경우, 명사나 동사가 먼저 오고 뒤에 형용사가 오도록 짓는 경우가 많습니다. 

하지만 변수의 목적에 따라 형용사가 먼저 오는 경우도 있습니다.

변수명을 지을때 제일 중요한 것
- 목적성
- 가독성
- 명확성

 

1. 예를 들면. 카운트의 초기화 값을 변수명으로 짓는다고 가정해 보겠습니다.

const countInitialize = 0 // ❌

이렇게 적으면 명확하지 않아 헷갈릴 수 있는 변수명입니다. 

초기화된 카운트인지, 카운트된 횟수의 초기화 값인지, 초기화 작업의 횟수인지 정확히 알 수 없다는 게 문제입니다.

const initializedCount = 0 //  ✅

 

 

다른예시

// 타이머의 초기 시간 값
const timerStart = 0; // ❌
const initialTimerValue = 0 // ✅

// 페이지의 초기 번호
const pageStart = 0 // ❌
const initialPageNumber = 0 // ✅

// 버튼의 초기 상태:
cosnt buttonStart = 0 // ❌
const buttonInitialState =0 // ✅

// 세션의 초기 값
cosnt sessionStart = 0 // ❌
const sessionInitialValue = 0 // ✅

 

 

즉, 명사, 동사, 형용사 무엇이 먼저 와야 하는지가 중요한 게 아니라, 목적과 의미를 확실하게 전달하는게 중요합니다.

 

 

 

용도에 맞는 접두사 정리

is: 변수의 상태나 조건을 나타낼 때 사용합니다.
예시: isValid, isEmpty, isReady

has: 객체가 특정 속성을 가지고 있는지 여부를 나타낼 때 사용합니다.
예시: hasPermission, hasChildren, hasData

can: 특정 동작이 가능한지 여부를 나타낼 때 사용합니다.
예시: canEdit, canDelete, canAccess

get: 특정 속성이나 값을 저장하는 변수에 사용합니다.
예시: getName, getValue, getResults

set: 특정 값을 저장하거나 설정하는 변수에 사용합니다.
예시: setName, setValue, setActive

on: 이벤트나 조건과 관련된 변수를 나타낼 때 사용합니다.
예시: onClick, onChange, onLoad

 

 

 

 

 

 

 

◼ 함수 네이밍

일반 함수는 특정 작업이나 계산을 수행하기 위해 정의된 함수입니다. 주로 데이터 처리, 로직 구현, 유틸리티 기능 등을 수행합니다.

일반변수명 지을때와 비슷한 규칙을 따릅니다. 함수는 주로 특정 작업을 수행하므로, 동사로 시작하는것이 일반적이며, 목적과 수행하는 작업을 명확하게 나타냅니다.

 

동사 + 명사/형용사 : 함수명이 동사로 시작하고 필요한 경우 명사나 형용사가 뒤따라 옵니다. 이는 함수가 수행하는 작업을 명확히 나타내어 가독성을 높입니다.

getUserName (사용자 이름을 가져온다), setAccountBalance (계좌 잔액을 설정한다), 
updateUserProfile (사용자 프로필을 갱신한다), deleteAccount (계정을 삭제한다)

 

명사, 동사, 형용사 무엇이 먼저 와야 하는지가 중요한 게 아니라, 목적과 의미를 확실하게 전달하는게 중요합니다.

 

용도에 맞는 접두사 정리

get: 값을 가져오는 함수
예: getUserName, getAccountBalance

set: 값을 설정하는 함수
예: setUserName, setAccountBalance

is: 불리언 값을 반환하는 함수 (상태 확인)
예: isUserLoggedIn, isAccountActive

has: 특정 조건을 만족하는지 확인하는 함수
예: hasPermission, hasErrors

can: 특정 동작을 수행할 수 있는지 확인하는 함수
예: canEditDocument, canUserLogin

update: 값을 갱신하는 함수
예: updateUserProfile, updateOrderStatus

delete: 값을 삭제하는 함수
예: deleteUser, deleteAccount

create: 새로운 객체나 값을 생성하는 함수
예: createUser, createAccount

load: 데이터를 불러오는 함수
예: loadUserData, loadSettings

save: 데이터를 저장하는 함수
예: saveUserData, saveSettings

fetch: 외부 소스에서 데이터를 가져오는 함수
예: fetchUserData, fetchPosts

initialize: 초기화 작업을 수행하는 함수
예: initializeSettings, initializeDatabase

 

 

 

 

 

 

◼ 이벤트 핸들러 네이밍

이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수입니다. 주로 사용자 인터페이스(UI) 상에서 사용자의 동작(클릭, 입력 등)에 반응하거나 특정 시스템 이벤트(타이머, 네트워크 응답 등)에 반응합니다.

일반적으로 handle이라는 접두사가 붙습니다.

 

[예시]

handleClick: 클릭 이벤트를 처리하는 함수
handleMouseOver: 마우스 오버 이벤트를 처리하는 함수
handleFormSubmit: 폼 제출 이벤트를 처리하는 함수
handleUserLogin: 사용자 로그인 이벤트를 처리하는 함수

 

 

 

 

 

 

◼ 상수 네이밍

상수는 변하지 않을 원시타입(불변값)이기에 일반 변수와는 다른 규칙을 가집니다.
대문자와 언더스코어('_')를 혼합하여 일반 변수와의 차이를 둡니다.

 

[예시]

MAX_USER_COUNT: 최대 사용자 수를 나타내는 상수
DEFAULT_TIMEOUT: 기본 타임아웃 값을 나타내는 상수
API_ENDPOINT: API 엔드포인트 URL을 나타내는 상수
MIN_PASSWORD_LENGTH: 최소 비밀번호 길이를 나타내는 상수

 

 

 

 

◼ 타입별칭 네이밍

TypeScript에서 사용하는 타입별칭으로 보통 PacalCase를 사용한다고 합니다. PacalCase 각 단어의 첫글자를 대문자로 시작하게 적는 거죠. 그것을 제외하면 일반 변수네이밍 방식과 유사합니다.

 

[예시]

UserId: 사용자 ID를 나타내는 타입
ProductList: 제품 목록을 나타내는 타입
Coordinates: 좌표를 나타내는 타입
ResponseData: 응답 데이터를 나타내는 타입

 

 

 

 

 

◼ Interface 네이밍

TypeScript 에서 사용되며, 타입별칭과 같습니다. 첫글자는 대문자로 일반 변수네이밍 방식과 유사합니다.

예전에는 접두사로 'I(영어: 아이)' 를 붙였지만, 요즘에는 IDE를 통해 interface와 타입이 구분이 가능해지고, 명명규칙이 생겨 많이 사용하지 않은 것으로 알고있습니다.

 

IDE: 통합 개발 환경, 프로그래머가 소프트웨어를 개발 할때 사용하는 툴
(예시: vscode, eclipse 같은)

명명규칙: 카멜, 스네이크, 케밥 같은 표기법 등

 

[참고] I를 사용하지 않는 이유

 

 

 

 

 

◼ 주의점

1. 일관성 유지 : 프로젝트 내에서 일관된 네이밍 규칙을 유지하는 것이 중요합니다. 협업을 하는 과정에서 같은 팀원이 알아보기가 쉬워지기 때문이죠.

2. 약어 사용자제 : 표준처럼 사용하는 약어아 아닌 이상, 약어는 가독성을 떨어뜨릴 수 있습니다. 가능하면 약어를 사용하지 않는게 좋습니다.

예: btn 대신 button, usr 대신 user.

3. 명확한 스코프 표시 : 변수명이 전역, 지역, 혹은 클래스 멤버 등 어느 스코프에서 사용되는지 명확히 표시하는 것이 좋습니다.

예: 클래스 멤버 변수는 _로 시작 (userName), 전역 변수는 g 접두사 사용 (g_userCount).

 

 

 

 

◼ 변수명 지어주는 사이트

https://www.curioustore.com/#!/