변수 네이밍 기술

적절하게 변수명을 붙이는 것은 참으로 어려울 수 있지만, 적절하게 이름을 붙이는 것에 대한 보상은 그만한 가치가 있습니다. 다음과 같은 코드를 본 적이 있습니까?

const convertObj = (x, y, z) => {
  const k = Object.keys(x)
  
  return k.map((key) => {
    return {
      [y]: key,
      [z]: x[key],
    }
  });
}

 

한 줄씩 읽으면 알아낼 수 있지만 변수의 이름을 적절하게 지정했다면 삶이 더 쉬웠을 것입니다.

특히 동적 타입 언어에서 좋은 변수 이름이 중요합니다. 정적으로 유형이 지정된 언어라도 좋은 명명 규칙을 사용하면 가독성이 향상된다는 이점이 있습니다.

몇 년 동안 제가 정한 이름 지정에 대한 몇 가지 일반적인 규칙을 공유할 것입니다.

유형별로 몇 가지 예를 분석하겠습니다. 배열부터 시작하겠습니다.

 

Array

배열은 일반적으로 동일한 유형의 반복 가능한 항목 목록입니다. 여러 값을 보유하므로 변수 이름을 복수화하는 것이 좋습니다.

const fruit = ['apple', 'banana', 'cucumber']; // bad

const fruitArr = ['apple', 'banana', 'cucumber']; // okay

const fruits = ['apple', 'banana', 'cucumber']; // good

const fruitNames = ['apple', 'banana', 'cucumber']; // great - "names" implies strings

const fruits = [
  {
    name: 'apple',
    genus: 'malus'
  },
  {
    name: 'banana',
    genus: 'musa'
  },
  {
    name: 'cucumber',
    genus: 'cucumis'
  }
]; // great

Booleans

Boolean은 참 또는 거짓의 2개 값만 보유할 수 있습니다. 이를 감안할 때 "is", "has" 및 "can"과 같은 접두사를 사용하면 독자가 변수의 유형을 유추하는 데 도움이 됩니다.

const open = true; // bad
const write = true; // bad
const fruit = true; // bad

const isOpen = true; // good
const canWrite = true; // good
const hasFruit = true; // good

조건자 함수(Boolean을 반환하는 함수)는 어떻습니까? 함수 이름을 지정한 후 값 이름을 지정하는 것이 까다로울 수 있습니다.

const user = {fruits: ['apple']}
const hasFruit = (user, fruitName) => (user.fruits.includes(fruitName));
const x = hasFruit(user, 'apple'); // 이 Boolean의 이름은 무엇입니까?

hasProjectPermission의 이름을 지정할 수 없습니다. 이미 해당 이름을 함수에 지정했기 때문입니다. 이 경우 술어 앞에 check 또는 get을 붙이고 싶습니다.

const checkHasFruit = (user, fruitName) => (user.fruits.includes(fruitName));
const hasFruit = checkHasFruit(user, 'apple');

Numbers

숫자의 경우 숫자를 설명하는 단어를 생각해 보십시오. (maximum, minimum, total과 같은 단어.)

const pugs = 3; // bad
const minPugs = 1; // good
const maxPugs = 5; // good
const totalPugs = 3; // good

Functions

함수는 동사와 명사를 사용하여 이름을 지정해야 합니다. 함수가 리소스에 대해 어떤 유형의 작업을 수행할 때 해당 이름은 이를 반영해야 합니다. 따라야 할 좋은 형식은 actionResource입니다. 예를 들어 getUser입니다.

userData(userId); // bad
userDataFunc(userId); // bad
totalOfItems(items); // bad

getUser(userId); // good
calculateTotal(items); // good

값을 변환하는 데 사용되는 일반적인 규칙은 함수 이름 앞에 to를 붙이는 것입니다.

toDollars('euros', 20);
toUppercase('a string');

내가 좋아하는 또 다른 일반적인 명명 패턴은 항목을 반복할 때입니다.

함수 내에서 인수를 받을 때 단일 버전의 배열 이름을 사용하십시오.

const newFruits = fruits.map(x => {
  return doSomething(x);
}); // bad

const newFruits = fruits.map(fruit => {
  return doSomething(fruit);
}); // good

정리

에누리해서 이러한 명명 규칙을 따르십시오. 변수 이름을 지정하는 방법은 일관되게 이름을 지정하는 것보다 덜 중요합니다. 일관된 이름 지정 패턴을 유지하면 코드베이스를 추론하기가 더 쉬워지고 다음 개발자는 생각을 덜 할 수 있습니다.

 

참고자료: https://hackernoon.com/the-art-of-naming-variables-52f44de00aad