이름을 지정하는 것은 어렵습니다. 이 시트는 더 쉽게 만들려고 합니다.

https://github.com/kettanaito/naming-cheatsheet

이러한 제안은 모든 프로그래밍 언어에 적용될 수 있지만 실제로는 JavaScript를 사용하여 설명합니다.

English language 

변수와 함수의 이름을 지정할 때 영어를 사용하십시오.

/* Bad */
const primerNombre = 'Gustavo'
const amigos = ['Kate', 'John']

/* Good */
const firstName = 'Gustavo'
const friends = ['Kate', 'John']

좋든 싫든 영어는 프로그래밍에서 지배적인 언어입니다. 모든 프로그래밍 언어의 구문은 영어 뿐만 아니라 수많은 문서와 교육 자료로 작성됩니다. 코드를 영어로 작성하면 응집력이 크게 향상됩니다.

Naming convention 

하나의 명명 규칙을 선택하고 따르십시오. camelCase 또는 snake_case 일 수 있습니다. 또는 아무튼 상관 없습니다. 중요한 것은 일관성을 유지하는 것입니다.

/* Bad */
const page_count = 5
const shouldUpdate = true

/* Good */
const pageCount = 5
const shouldUpdate = true

/* Good as well */
const page_count = 5
const should_update = true

S-I-D 

이름은 짧고 직관적이며 설명 적이어야 합니다.

• Short. 이름은 입력하는 데 오래 걸리지 않아야 하므로 기억하십시오.
• Intuitive. 이름은 가능한 한 일반적인 연설에 가깝게 자연스럽게 읽어야 합니다.
• Descriptive. 이름은 가장 효율적인 방식으로 수행 / 소유하는 것을 반영해야 합니다.

/* Bad */
const a = 5 // "a" could mean anything
const isPaginatable = a > 10 // "Paginatable" sounds extremely unnatural
const shouldPaginatize = a > 10 // Made up verbs are so much fun!

/* Good */
const postCount = 5
const hasPagination = postCount > 10
const shouldDisplayPagination = postCount > 10 // alternatively

Avoid contractions 

수축을 사용하지 마십시오. 그것들은 코드의 가독성을 떨어뜨리는 데만 기여합니다. 짧고 설명적인 이름을 찾는 것은 어려울 수 있지만 축약은 그렇게 하지 않는 것에 대한 변명이 아닙니다.

/* Bad */
const onItmClk = () => {}

/* Good */
const onItemClick = () => {}

Avoid context duplication 

이름은 정의 된 컨텍스트와 중복되지 않아야 합니다. 가독성을 떨어뜨리지 않는 경우 항상 이름에서 컨텍스트를 제거하십시오.

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

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

Reflect the expected result 

이름은 예상 된 결과를 반영해야 합니다.

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

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

Naming functions 

A/HC/LC Pattern 

함수 이름을 지정할 때 따라야 할 유용한 패턴이 있습니다.

prefix? + action (A) + high context (HC) + low context? (LC)

이 패턴이 아래 표에 어떻게 적용될 수 있는지 살펴보십시오.

참고 : 컨텍스트의 순서는 변수의 의미에 영향을 줍니다. 예를 들어 shouldUpdateComponent는 구성 요소를 업데이트하려고 함을 의미하고 shouldComponentUpdate는 구성 요소가 자체적으로 업데이트 되며 업데이트시기를 제어하고 있음을 알려줍니다. 즉, 높은 컨텍스트는 변수의 의미를 강조합니다.

Actions 

함수 이름의 동사 부분. 함수가 하는 일을 설명하는 가장 중요한 부분입니다.

get 

데이터에 즉시 액세스합니다 (예 : 속기 getter 또는 내부 데이터).

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

See also compose.

set 

값 A와 값 B를 사용하여 선언적 방식으로 변수를 설정합니다.

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

fetch 

불확실한 시간이 걸리는 일부 데이터 요청 (예 : 비동기 요청)

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

remove 

어딘가에서 무언가를 제거합니다.

당신이 콘텐츠 편집자이고 제거하고 싶은 악명 높은 게시물이 있다고 상상해보십시오. 반짝이는 "게시물 삭제"버튼을 클릭하면 CMS가 removePost가 아닌 deletePost 작업을 수행했습니다.

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

See also remove.

compose 

기존 데이터에서 새 데이터를 만듭니다. 대부분 문자열, 객체 또는 함수에 적용됩니다.

function composePageUrl(pageName, pageId) {
  return `${pageName.toLowerCase()}-${pageId}`
}

See also get.

handle 

작업을 처리합니다. 콜백 메서드의 이름을 지정할 때 자주 사용됩니다.

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

link.addEventListener('click', handleLinkClick)

Context 

함수가 작동하는 도메인입니다.

함수는 종종 무언가에 대한 작업입니다. 작동 가능한 도메인 또는 최소한 예상되는 데이터 유형을 명시하는 것이 중요합니다.

/* A pure function operating with primitives */
function filter(predicate, list) {
  return list.filter(predicate)
}

/* Function operating exactly on posts */
function getRecentPosts(posts) {
  return filter(posts, (post) => post.date === Date.now())
}

일부 언어 별 가정에서는 컨텍스트를 생략 할 수 있습니다. 예를 들어 JavaScript에서는 필터가 Array에서 작동하는 것이 일반적입니다. 명시적인 filterArray를 추가하는 것은 불필요합니다.

Prefixes 

접두사는 변수의 의미를 향상 시킵니다. 함수 이름에는 거의 사용되지 않습니다.

is 

현재 컨텍스트의 특성 또는 상태를 설명합니다 (일반적으로 부울).

const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state

if (isBlue && isPresent) {
  console.log('Blue is present!')
}

has 

현재 컨텍스트가 특정 값 또는 상태 (일반적으로 부울)를 소유하는지 여부를 설명합니다.

/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0

/* Good */
const hasProducts = productsCount > 0

should 

특정 작업과 결합 된 긍정적 인 조건문 (일반적으로 부울)을 반영합니다.

function shouldUpdateUrl(url, expectedUrl) {
  return url !== expectedUrl
}

min/max 

최소값 또는 최대 값을 나타냅니다. 경계 또는 한계를 설명 할 때 사용됩니다.

/**
 * Renders a random amount of posts within
 * the given min/max boundaries.
 */
function renderPosts(posts, minPosts, maxPosts) {
  return posts.slice(0, randomBetween(minPosts, maxPosts))
}

prev/next 

현재 컨텍스트에서 변수의 이전 또는 다음 상태를 나타냅니다. 상태 전환을 설명 할 때 사용됩니다.

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

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

  this.setState({ posts: nextPosts })
}

Singular and Plurals 

접두사와 마찬가지로 변수 이름은 단일 값을 보유하는지 또는 다중 값을 보유하는지에 따라 단수 또는 복수로 만들 수 있습니다.

/* Bad */
const friends = 'Bob'
const friend = ['Bob', 'Tony', 'Tanya']

/* Good */
const friend = 'Bob'
const friends = ['Bob', 'Tony', 'Tanya']