Naming Convention

Before we go any further,

🐪 Camel Case

userName, userAge

• 첫 단어의 첫 글자는 소문자,
  그 이후에 연결된 각 단어의 첫 글자는 대문자로 표기
• 변수명, 함수명에 사용

👨‍🏫 Pascal Case

UserName, UserAge

• 모든 단어의 첫 글자는 대문자로 표기
• 주로 클래스명에 사용

🇭🇺 Hugurian Notation

strUserName, iUserAge

• 접두어에 자료형 붙이기
• Window API에서 사용하는 표기법

🐍 Snake Case

user_name, user_age

• 모든 단어가 소문자이거나 대문자
• 단어와 단어 사이에 underbar( _ )로 구분
• name spcace, data type, 변수명, 함수명, 파일명 등에 사용

🥙 Kebab Case

user-name, user-age

• 단어와 단어 사이에 dash( - )로 구분

Naming Convention

• camelCase, PascalCase, snake_case 등등 하나의 명명 규칙을 선택하고 사용해야 한다

S-I-D

• Short(짧은) : 기억하기 쉬워야 함
• Intuitive(직관적) : 일반적으로 사용하는 말에 가깝게 읽혀야 함
• Descriptive(설명) : 가장 효율적인 방식으로 수행/소유하는 것을 나타내야 함

단축어 사용 지양

되도록 중복 방지

• 클래스와 함수명, 함수명과 변수명 사이의 중복을 피한다

class MenuItem {
  /* Method name duplicates the context (which is "MenuItem") */
  handleMenuItemClick = (event) => { ... }

  /* Reads nicely as `MenuItem.handleClick()` */
  handleClick = (event) => { ... }
}

예상 결과 반영

// Bad
let isEnabled = itemCount > 3
return <Button disabled={!isEnabled} />

// Good
let isDisabled = itemCount <= 3
return <Button disabled={isDisabled} />

General Rules

• Variable : Camel Case
  • Constant Variable : Upper Case

let lastName = 'Kim';
const SECONDS = 60;

• Function(Method) : 동사 + Camel Case
  • Private Method : underbar( _ ), ex) _getUSerName()
• Class & Component : Pascal Case

class UserInformation {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getUserName = () => {
    return `${this.firstName} ${this.lastName}`;
  }
}

• Boolean Type : is/are/has로 시작

let isVisible = false;
let hasEncryption = true;

Naming Function

A/HC/LC Pattern은 아래와 같은 패턴으로 함수 이름을 명명하는 방법론이다. 쉽게 말해, 함수가 하는 일을 동사(Action) + 목적어(Context)로 구성한 것인데, 좀 더 명확한 표현을 위해 Context를 High Context와 Low Context로 나눌 수 있다.
prefix? + action (A) + high context (HC) + low context? (LC)

Name	Prefix	Action
getUser		get
getUserMessages		get
handleClickOutside		handle
shouldDisplayMessage	should	Display

Action

함수 이름의 동사 부분으로 함수가 수행하는 작업을 설명한다.

• get : Accesses data immediately

function getFruitCount() {
  return this.fruits.length
}

• fetch : get과 비슷한 역할을 가지지만 비동기 처리

function fetchPosts(postCount) {
  return fetch('https://api.dev/posts', {...})
}

• set : 선언적인 방식으로 변수 설정

let fruits = 0

function setFruits(nextFruits) {
  fruits = nextFruits
}

setFruits(5)
console.log(fruits) // 5

• reset : 변수를 초기 값 또는 상태로 다시 설정

const initialFruits = 5
let fruits = initialFruits
setFruits(10)
console.log(fruits) // 10

function resetFruits() {
  fruits = initialFruits
}

resetFruits()
console.log(fruits) // 5

• remove : Removes something from somewhere
  검색 서비스에서 검색 조건을 삭제하는 건 remove(not delete)

function removeFilter(filterName, filters) {
  return filters.filter((name) => name !== filterName)
}

const selectedFilters = ['price', 'availability', 'size']
removeFilter('price', selectedFilters)

• delete : 특정 영역에서 완전히 삭제, 콘텐츠에서 게시물 삭제

function deletePost(id) {
  return database.find({ id }).delete()
}

• compose : 기존으로부터 데이터 생성, 대부분 문자열/객체/함수에서 사용

function composePageUrl(pageName, pageId) {
  return (pageName.toLowerCase() + '-' + pageId)
}

• handle : 작업 처리, 주로 콜백 함수의 이름을 지정할 때 사용

function handleLinkClick() {
  console.log('Clicked a link!')
}

link.addEventListener('click', handleLinkClick)

Context : 함수가 작동하는 도메인

함수는 무언가에 대한 동작이기 때문에 함수가 작동 가능한 도메인이 무언지인지 적어도 예상되는 데이터형은 무엇인지 명시하는 것이 중요하다.

Prefixes(접두사)

• 변수의 의미를 향상하고 비교적 함수명에 사용하지 않는다.
• is : Context의 특성 또는 상태를 설명, 주로 boolean
• has : Context가 특정 value/state를 가지고 있는지 여부를 설명, 주로 boolean
• should : 특정 action과 결합된 긍정적인 조건문(주로 boolean)을 반영,
• max/min
• prev/next : 상태 전환을 설명할 때 사용

function fetchPosts() {
  let prevPosts = this.state.posts

  let fetchedPosts = fetch('...')
  let nextPosts = concat(prevPosts, fetchedPosts)

  this.setState({ posts: nextPosts })
}

• Singular(단수형)/Plurals복수(형) : 데이터가 단수인지 복수인지에 따라 변수 이름에 적용

---

참고문서,
https://skyksit.tistory.com/entry/Javascript-Naming-Convention-명명-규칙,
https://github.com/kettanaito/naming-cheatsheet#ahclc-pattern