[javascript] 변수명, 함수명 잘 짓는 법

 

📌1. 변수명을 잘 지어야하는 이유?

1. 가독성 및 이해성: 변수와 함수를 의미있는 이름으로 지으면 목적과 사용법이 한 눈에 보이기때문에 코드를 빠르게 파악하고 이해하기가 쉽습니다.

2. 유지보수성: 변수와 함수의 이름이 명확하지 않은 경우, 유지보수하는 개발자는 코드를 이해하는데 더 많은 시간을 쏟아야하기때문에 버그를 수정하고 기능을 추가하는데 불필요한 에너지가 소모됩니다.

3. 문서화:  명확하고 설명적인 이름은 이름만으로도 코드의 의도를 전달합니다. 이렇게 하면 과도한 주석의 필요성이 줄어들고 시간이 지남에 따라 코드가 발전하더라도 코드가 정확하게 유지됩니다.

4. 디버깅:  예상치 못한 동작이나 오류가 발생할 경우, 의미있는 이름은 개발자가 문제의 원인을 신속하게 식별하고 추적하는데 단서를 제공하여 디버깅하는데 도움을 줍니다.

5. 확장성: 프로젝트의 규모와 복잡성이 커짐에 따라 명확하고 일관된 명명 규칙을 사용하면 개발자는 오류를 줄이고 효율성을 높이면서 대규모 프로젝트를 관리할 수 있습니다.

6. 혼란 및 오류 방지:  모호하거나 오해의 소지가 있는 이름은 개발자가 코드의 의도를 잘못 해석하거나 잘못 사용할 수 있게하여 코드에 버그를 발생시킬 소지가 큽니다.

 

 

📌 2. Naming Convention

1. 카멜 케이스 (camelCase)
: 복합어를 서로 연결하여 구성하며, 첫 번째 단어 이후의 각 단어는 대문자로 시작 ex) userName, totalNumber

2. 스네이크 케이스 (snake_case) 
: 밑줄(_)을 사용하여 단어를 구분하며, 모든 문자는 일반적으로 소문자ex) user_name, total_number

3. 파스칼 케이스 (PascalCase)
: 각 단어의 첫 글자를 대문자로 표기하고, 이후 단어도 대문자로 시작ex) UserName, TotalNumber

4. 케밥 케이스 (kebab-case)
: 대소문자는 하이픈(-)을 사용하여 단어를 구분하며 모든 문자는 일반적으로 소문자ex) user-name, total-number

5. 헝가리안 표기법(strName)
: 변수 이름 앞에 변수의 유형이나 목적을 나타내는 데이터타입을 명시함.ex) strName, intNumber

 

 

📌 3. 특정 언어 및 프레임워크에서 권장되는 Naming convention

(내가 주로 사용하는 것들만 모아보았다)

1. JavaScript : 카멜 케이스 (Camel Case)**ex) userName, totalAmount, numberOfStudents

2. Go : 카멜 케이스 (Camel Case) or 파스칼 케이스 (Pascal Case)**ex) userName, TotalAmount, NumberOfStudents

3. C++ :  카멜 케이스 ex) userName, totalAmount, numberOfStudents

4. SQL : 스네이크 케이스 (Snake Case)**ex)  user_name, total_amount, number_of_students

5. JSON :  카멜 케이스 (Camel Case)가 사용되지만, 다른 케이스도 허용 ex) userName, totalAmount, numberOfStudents

6. Vue.js 프레임워크 -카멜 케이스 (Camel Case), 컴포넌트 이름 및 프로퍼티 등에 사용 ex) myComponent, propName, computedValue

일반적으로 사용되는 규칙은 다음과 같으나 더 중요한 것은 프로젝트 내에서 일관성을 유지하는 것입니다🙂
프로젝트 팀의 코딩 스타일 가이드를 따르는 것이 가장 바람직합니다.

 

 

📌 4. javascript에서 변수명, 함수명 잘 짓는 요령

 

💡1. 변수 유형별

① 상수 : 대문자와 언더스코어 사용  ‘MAX_SIZE’, ‘PI’ 
② 불린 변수 : “is”, “has” 등의 접두사 사용
③ 반복자 : “i”, “j”, “k” 등 간단한 이름 사용

 

💡 2.  Array, Object - 단수, 복수 표현하기

사실 변수명을 단수로 할지 복수로 할지에 대한 엄격한 가이드라인은 없습니다. 
① 단수 형태 : 단수 형태의 변수명은 하나의 항목이나 객체를 나타냅니다.- 해당 변수가 단일 항목을 나타내는 경우에 적합합니다.
② 복수형태 :  복수 형태의 변수명은 여러 항목이나 객체를 나타냅니다.- 해당 변수가 여러 항목을 포함하는 컬렉션을 나타내는 경우에 적합 합니다.

// Object (단수)const user = {
    username: 'john_doe',
    email: 'john@example.com',
    age: 30
};

// Object (복수)const users = [
    { username: 'john_doe', email: 'john@example.com', age: 30 },
    { username: 'jane_doe', email: 'jane@example.com', age: 25 },
    { username: 'alex_smith', email: 'alex@example.com', age: 35 }
];

Array의 경우에는 딱히 구분 없는 것같았음~~

const item = [
    { name: 'apple', price: 1.99 },
    { name: 'banana', price: 0.99 },
    { name: 'orange', price: 1.49 }
];

const items = [
    { name: 'apple', price: 1.99 },
    { name: 'banana', price: 0.99 },
    { name: 'orange', price: 1.49 }
];

💡 3. 함수명 생성규칙

1. 동작을 설명하는 이름 사용: 함수명은 함수가 수행하는 동작이나 작업을 잘 설명해야 코드를 읽는 사람이 함수가 어떤 일을 수행하는지 쉽게 이해할 수 있습니다.
   • displayErrorMessage(message) → 화면에 오류 메시지를 표시하는 동작을 하는 함수
   • updateUserProfile(userData) → 사용자 프로필을 업데이트하는 동작을 하는 함수
2. 동사를 사용하여 함수의 동작을 표현: 함수명은 주로 함수가 수행하는 동작을 설명하는 동사로 시작하는 것이 일반적입니다. 이는 함수가 어떤 동작을 수행하는지 명확하게 나타내며, 코드의 가독성을 높일 수 있습니다.
   • validateInput(inputData) → 입력된 데이터가 유효한지를 확인하는 동작을 수행하는 함수
   • deleteItemFromCart(itemID) → 장바구니에서 특정 상품을 삭제하는 동작을 수행하는 함수
   • calculateItem(items) → 아이템을 계산하는 동작을 수행하는 함수
3. get, set을 사용하여 접근자 함수 표시: 객체의 속성을 읽거나 쓰는 함수인 경우, get이나 set을 함수명에 포함하여 의미를 명확히 할 수 있습니다.
   1. get을 사용한 접근자 함수: 해당 속성을 반환하거나, 속성을 읽기 전에 특정한 로직을 수행할
      • getUsername() → 사용자 객체의 username 속성을 반환
   2. set을 사용한 접근자 함수: 해당 속성에 값을 할당하거나, 값을 설정하기 전에 특정한 로직을 수행
      • setEmail() → 사용자 객체의 email 속성을 설정
4. is, has, can을 사용하여 불리언 반환 함수 표시: 함수가 어떤 조건을 만족하는지 확인하거나 특정 속성이 있는지 확인하는 경우, 함수명에 is, has, can를 사용합니다
   • isValidEmail(email) → 이메일이 유효한지 확인하는 함수로, is 접두사를 사용하여 불리언 값을 반환한다는 것을 명시
   • hasPermission(user, permission) → 특정 사용자가 특정 권한을 가지고 있는지 확인하는 함수
   • 만약 함수의 return 값이 boolean이라면? → 함수명을 check나 get으로 시작checkTodoData();`
   • `const user = { fruits: ['apple'] }; const checkHasFruit = (user, fruitName) => user.fruits.includes(fruitName); const hasFruit = checkHasFruit(user, 'apple');
5. 그릇된 정보 피하기: List라는 단어는 특수한 의미로, 계정을 담는 컨테이너가 List가 아니라면 그릇된 정보를 제공하는 셈입니다. List가 아닌 경우 accountGroup, accounts 등으로 명명합니다. ex) accountList → accountGroup
6. 반복문 안에서도 의미있는 이름 사용하기

intersectionGroup.forEach(el => {
	el.Group.forEach(el2 =>{
		this.camera = el2.camera;
	})
})

intersectionGroup.forEach(intersection => {
	el.Group.forEach(camera =>{
		this.camera = el2.camera;
	})
})

7. 한 개념에 하나의 단어를 사용하기: 추상적인 개념 하나에 단어 하나를 선택해 이를 고수합니다.
ex) fetch, retrieve, get으로 제각각 부르면 혼란 api를 부르는건 fetch 이런식으로 정합ㄴ디ㅏ.

8. 말장난 하지 않기: 한 단어를 두 가지 목적으로 사용하면 안 됩니다.
ex) 같은 맥락이 아닌데도 일관성을 고려해 add라는 단어를 선택할 때
addItems() : 기존 값 두 개를 더하거나 이어서 새로운 값
addPencil() : 집합에 값 하나를 추가

💡 4. 특별한 함수명 

1. 이벤트처리함수: 이벤트 처리 함수에는 주로 on이나 handler를 붙입니다. 주로 이벤트 리스너를 등록하는 역할, 특정 이벤트에 대한 동작을 나타내는 것이 주 목적입니다.

1. 클릭 이벤트 처리 함수: handleClick, onClick
2. 입력 이벤트 처리 함수 (예: 텍스트 필드 입력): handleInputChange, onInputChange
3. 제출 이벤트 처리 함수 (예: 폼 제출): handleSubmit, onFormSubmit
4. 마우스 호버 이벤트 처리 함수: handleMouseHover, onMouseHover

 

2. 통신과 관련된 함수명

2-1) 웹 소켓 통신 함수

1. 웹 소켓 연결 관련: 
   - connectWebSocket: 웹 소켓 연결을 설정하는 함수
   - disconnectWebSocket: 웹 소켓 연결을 해제하는 함수
2. 메시지 송수신 관련:
   - onWebSocketMessage: 웹 소켓으로부터 메시지를 수신할 때 호출되는 이벤트 리스너 함수
   - sendWebSocketMessage: 웹 소켓을 통해 메시지를 보내는 함수
3. 에러 처리:
   - onWebSocketError: 웹 소켓 통신 중 발생한 에러를 처리하는 함수
   - handleWebSocketError: 웹 소켓 통신 중 발생한 에러를 처리하는 함수

2-2) REST API 통신 함수명 예시

1. GET 요청:
   - getUser: 사용자 정보를 가져오는 GET 요청을 처리하는 함수
   - getPosts: 포스트 목록을 가져오는 GET 요청을 처리하는 함수
2. POST 요청:
   - createUser: 새로운 사용자를 생성하는 POST 요청을 처리하는 함수
   - createPost: 새로운 포스트를 생성하는 POST 요청을 처리하는 함수
3. PUT 요청:
   - updateUser: 사용자 정보를 업데이트하는 PUT 요청을 처리하는 함수
   - updatePost: 포스트 정보를 업데이트하는 PUT 요청을 처리하는 함수
4. DELETE 요청:
   - deleteUser: 사용자를 삭제하는 DELETE 요청을 처리하는 함수
   - deletePost: 포스트를 삭제하는 DELETE 요청을 처리하는 함수
5. 기타: 
   - handleAPICallback: REST API 호출 결과를 처리하는 콜백 함수
   - parseAPIResponse: REST API 응답을 파싱하는 함수