Javascript Naming Convention

Posted on Edited on In , Word count in article: 812 Reading time ≈ 3 mins.

변수명과 함수명은 영어를 사용하자

변수나 함수명은 영어로 사용한다

1
2
3
4
5
6
7
/* Bad */
let primerNombre = 'Gustavo'
let amigos = ['Kate', 'John']

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

Naming convention 을 통일시킨다

camelCase, PascalCase 어떤걸 사용하던지 통일 시키자

1
2
3
4
5
6
7
8
/* Bad */
let page_count = 5
let shouldUpdate = true

/* Good
camelCase 를 사용하던지 */
let pageCount = 5
let shouldUpdate = true

변수명은 camelCase

1
2
3
4
5
6
// bad
var firstname = 'gp';
var first_name = 'gp';

// good
var firstName = 'gp';

Constant 변수명은 UPPERCASE 로 작성한다

1
2
3
4
5
const SECONDS = 60;
const MINUTES = 60;
const HOURS = 24;
 
const DAY = SECONDS * MINUTES * HOURS;

boolean 명은 is, are, has 로 시작한다

1
2
3
4
5
6
7
8
9
// bad
var visible = true;
var equal = false;
var encryption = true;
 
// good
var isVisible = true;
var areEqual = false;
var hasEncryption = true;

function 은 camelCase, 동사로 작성한다

1
2
3
4
5
6
7
8
9
// bad
function name(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
 
// good
function getName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

Class 는 PascalCase 로 작성한다

1
2
3
4
5
6
class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

Component 는 PascalCase 로 작성한다

1
2
3
4
5
6
7
8
9
// good
function UserProfile(user) {
  return (
    <div>
      <span>First Name: {user.firstName}</span>
      <span>Last Name: {user.lastName}</span>
    </div>
  );
}

Method 는 camelCase 로 작성한다

1
2
3
4
5
6
7
8
9
10
class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
 
  getName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Private Method 는 underscore (_) 로 작성한다

1
2
3
4
5
6
7
8
9
10
11
class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.name = _getName(firstName, lastName);
  }
 
  _getName(firstName, lastName) {
    return `${firstName} ${lastName}`;
  }
}

S-I-D

  • Short. 짧게
  • Intuitive. 직관적으로
  • Descriptive. 설명할 수 있게
1
2
3
4
5
6
7
8
9
/* Bad */
let a = 5 // "a" 는 뜻이 없다
let isPaginatable = a > 10 // "Paginatable" 이 많이 사용하는 단어도 아니다
let shouldPaginatize = a > 10 // 일반적으로 많이 사용하는 동사를 사용하자

/* Good */
let postCount = 5
let hasPagination = postCount > 10
let shouldPaginate = postCount > 10 // alternatively

단축어를 사용하지 말자

모음을 없애고 단축어 많이 사용했었는데 이렇게 작성 후에 나중에 보면 작성자도 뭐라고 적은 의미인지 모를 때가 많다. 그냥 full 로 사용하자

1
2
3
4
5
/* Bad */
let onItmClk = () => {}

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

context 명과 중복을 피한다

되도록이면 중복을 피해준다. 어차피 MenuItem 인지 class 를 보고 알 수 있다.
public 이라면 중복을 사용해도 된다.

1
2
3
4
5
6
7
class MenuItem {
  /* Method name duplicates the context (which is "MenuItem") */
  handleMenuItemClick = (event) => { ... }

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

결과랑 맞추자

이름과 예상되는 결과가 틀리면 변수명 때문에 로직의 예상결과가 헷갈린다

1
2
3
4
5
6
7
/* Bad */
let isEnabled = itemCount > 3
return <Button disabled={!isEnabled} />

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

Naming functions

A/HC/LC Pattern

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

요건 참 좋은 패턴인 것 같다

Name Prefix Action (A) High context (HC) Low context (LC)
getUser get User
getUserMessages get User Messages
handleClickOutside handle Click Outside
shouldDisplayMessage should Display Message

Note: High context 와 Low context 는 High context 가 주체적인 의미를 가진다
ComponentUpdate 와 UpdateComponent 의 차이를 생각하자

Actions

함수가 하는 일을 표현한다

get

데이터를 바로 가져온다. fetch 와 다른 의미

1
2
3
function getFruitCount() {
  return this.fruits.length
}

See also compose.

set

데이터를 설정한다

1
2
3
4
5
6
7
8
let fruits = 0

function setFruits(nextFruits) {
  fruits = nextFruits
}

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

reset

데이터를 초기화 하거나 원복 시킨다

1
2
3
4
5
6
7
8
9
10
11
const INITIALFRUITS = 5
let fruits = INITIALFRUITS
setFruits(10)
console.log(fruits) // 10

function resetFruits() {
  fruits = INITIALFRUITS
}

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

fetch

get 과는 다르게 데이터를 가져오는 데 시간이 걸린다 (비동기처리)

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

remove

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

검색 서비스에서 검색조건을 건 필터를 삭제하는 건 delete 가 아니라 remove 이다

1
2
3
4
5
6
function removeFilter(filterName, filters) {
  return filters.filter((name) => name !== filterName)
}

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

delete

지운다. 계시물을 지우는 건 delete 이지 remove 가 아니다.

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

compose

기존 것으로 부터 데이터를 만든다. 문자, 객체, 함수에서 사용한다

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

handle

작업을 수행한다. 콜백 함수에서 많이 사용한다.

1
2
3
4
5
function handleLinkClick() {
  console.log('Clicked a link!')
}

link.addEventListener('click', handleLinkClick)

Context

도메인 이라고 생각하면 된다.

1
2
3
4
5
6
7
8
9
/* A pure function operating with primitives */
function filter(list, predicate) {
  return list.filter(predicate)
}

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

Prefixes

변수에서 많이 사용한다. 함수에서는 잘 사용하지 않는다.

is

컨텍스트의 특성 또는 상태를 설명한다. boolean 값을 많이 사용한다.

1
2
3
4
5
6
7
let color = 'blue'
let isBlue = color === 'blue' // characteristic
let isPresent = true // state

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

has

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

1
2
3
4
5
6
/* Bad */
let isProductsExist = productsCount > 0
let areProductsPresent = productsCount > 0

/* Good */
let hasProducts = productsCount > 0

should

긍정적인 조건문 (일반적으로 boolean)을 의미한다

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

min/max

최소값 또는 최대 값을 나타낸다

1
2
3
4
5
6
7
/**
 * 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

변수의 이전 또는 다음 상태를 나타냅니다. 상태 전환을 설명 할 때 사용된다.

1
2
3
4
5
6
7
8
function fetchPosts() {
  let prevPosts = this.state.posts

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

  this.setState({ posts: nextPosts })
}

단수 / 복수

데이터가 단수인지 복수인지에 맞춰서 이름을 정한다

1
2
3
4
5
6
7
/* Bad */
let friends = 'Bob'
let friend = ['Bob', 'Tony', 'Tanya']

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