무엇이 당신의 코드를 더욱 읽을 수 있게 하는가

당신은 변수를 너무 마음대로 명명합니까? 아니면 코드를 작성할 때 심사자의 느낌을 고려하지 않습니까?
내가 이라는 책에서 이해한 바에 의하면 본고는 몇 장으로 나뉘고 어떻게 코드를 더욱 읽기 쉽게 하는지 예를 들어 설명한다.
(Boswell,D.,Foucher,T.(2012).코드를 읽을 수 있는 예술.올레리.)

카탈로그

이름에 정보 패키지
1-1. 특정 단어 선택
1-2. tmp 및 val과 같은 일반적인 이름은 사용하지 마십시오.
1-3. 범위

의 범위에 따라 가변 길이를 확정하다

명확한 변수를 명명하여 오해를 피하다
2-1. 애매모호한 단어의 사용을 피하다
2-2. min 및 max으로 제한
2-3. 브리 변수

에 대해 is과 has이라는 단어를 사용한다

왜 읽을 수 있는 코드가 중요합니까

나는 네가 알고 있는 모든 코드는 읽을 수 있어야 한다고 생각한다. 그러나 너는 읽을 수 있는 코드의 구체적인 장점을 생각해 본 적이 있니?
이것은 이해하기 쉽고 코드도 검사하기 쉽다.설령 네가 스스로 응용 프로그램을 개발한다 하더라도 1년 후의 평론가는 너일 수도 있다.
읽기 가능한 코드의 장점은 다음과 같습니다.

디버깅

소요 시간 감소

은 심사위원에게 이해하기 쉽다

서비스 용이성

확장이 쉬운 새로운 기능

이제 당신이 무엇을 할 수 있는지, 그리고 코드를 어떻게 더 읽을 수 있는지 봅시다.

1. 정보를 명칭으로 포장

변수를 명명할 때 값에 대한 정보를 포함해야 합니다.그러나 값과 관련된 모든 내용을 사용할 수 있을 뿐만 아니라, 그것들을 어떻게 명명하는지에 대한 힌트도 있다.

1-1. 특정 단어 선택

변수에 대해 당신은 무엇을 생각하고 어디에 있는지, 어떤 때는 특정한 단어를 어떻게 선택해야 하는지를 생각해야 한다.
예를 들어, "get"이라는 단어가 명확하지 않은 경우도 있습니다.

❎
const getFiles = ()=>{...}

소형 응용 프로그램에 있어서는 이해할 수 있지만 대형 응용 프로그램에 대해서는 다양한 장면에서 파일을 검색해야 할 수도 있다.
그래서

✅
const downloadFiles = ()=>{...};
const fetchFiles = ()=>{...};

독자는 함수의 작용을 알고 되돌아오는 값을 이해하기 쉬워 읽기 쉽다.
또 다른 예는

❎
let size; 

✅
let areaSize;
let height;
let memoryBytes;

이렇게 하면 변수 이름에 특정한 정보를 포함함으로써 변수의 용도를 이해하기 쉽다.

1-2. tmp 및 val과 같은 일반적인 이름은 사용하지 마십시오.

tmp과 val과 같은 이름은 거의 의미가 없기 때문에 취할 수 없다.평론가는 그것의 내용을 추적해야 한다.
예를 들어,

❎
function averageScore(participants) {
  // you need to track what it is
  let val;
  participants.map((participant) => {
    val += participant.score;
  });

  return val / participants.length;
}

상기 예시에서 val은 정보가 많지 않기 때문에 코드를 볼 때마다 val의 값을 추적해야 한다.
따라서 이 예에서 sumScore과 같은 특정 명칭을 사용하는 것이 val에서 tmp을 사용하는 것보다 훨씬 낫다.

✅
function averageScore(participants) {
  // you know what it will have
  let sumScore;
  participants.map((participant) => {
    sumScore += participant.score;
  });

  return sumScore / participants.length;
}

그러나 특정 상황에서는 특히 단기 스토리지에 tmp 또는 val을 사용할 수 있습니다.
예를 들어 교환 중,

✅
function swap(left, right) {
  let tmp = left;
  left = right;
  right = tmp;
}

tmp은 함수 중 3줄에서만 사용하기 때문에 좋다.

1-3. 범위의 크기에 따라 가변 길이가 결정됩니다.

변수의 길이는 사용 범위에 따라 정해야 한다.
5줄과 같은 짧은 범위는 변수의 용도를 쉽게 검사할 수 있기 때문에 짧은 이름을 사용하는 것이 좋다.
다른 한편, 변수의 사용 범위가 넓다면 언제 어디서나 이해할 수 있도록 필요한 정보로 변수를 명명하는 것이 좋다.

❎
function eatFood() {
  let amountOfFoodPersonCanEat = 0;
  for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
      amountOfFoodPersonCanEat++;
    }
    console.log('Eat ' + amountOfFoodPersonCanEat + ' apples');
   return
  }

위의 예에서 amountOfFoodPersonCanEat은 단접되어 한 번 사용된다.이런 상황에서 더 짧은 변수명은 충분히 가능하다.

✅
function eatFood() {
  let amount = 0;
  for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
      amount ++;
    }
    console.log('Eat ' + amount + ' apples');
   return
  }

amount은 이 짧은 범위 코드의 내용을 충분히 이해할 수 있다.
그러나 다른 함수에서 이 변수를 사용하거나 함수에서 이 변수를 계속 사용하면 amountOfFoodPersonCanEat이라고 명명해야 할 수도 있다.

✅
let amountOfFoodPersonCanEat = 0;
function eatFood() {
  for (let i = 0; i < Math.floor(Math.random() * 10); i++) {
    amountOfFoodPersonCanEat++;
  }
}
amountOfFoodPersonCanEat = eatFood();
.
.
.

2. 오해를 피하기 위해 명확한 변수를 명명한다

"이 이름의 뜻을 오해하는 사람이 있나요?"이것이 바로 네가 이름을 선택할 때 고려해야 할 것이다.

2-1. 애매모호한 단어의 사용을 피하다

여과

filteredArray 또는 filteredObj을 필터에 사용할 수 있는 그룹이나 대상을 원할 수도 있습니다.앞서 언급한 바와 같이 단기 변수에 있어서 이것은 매우 좋다.그러나 filteredArray이 선택한 그룹인지 삭제된 그룹인지 오해하거나 헷갈릴 수 있습니다.따라서 변수에 select out array을 지정하려면 selectedArray을 사용하는 것이 좋습니다.그 밖에 removedArray은 제거를 나타내는 그룹에 적용된다.

❎
const filteredArray = (arr)=>{...}

✅
// These are crystal clear what the arrays are
const selectedArray = (arr)=>{...}
const removedArray = (arr)=>{...}

슬라이스조립...,짧게 자르다.기다린다

여과와 같다...모든 말은 오해를 받을 수 있다.그래서 slicedResultArr과 excludedArr 같은 걸 쓰고 싶을 수도 있어요.

❎
// It may cause misunderstanding
const slicedArray = (arr)=>{...}
const splicedArray = (arr)=>{...}
const clippedArray = (arr)=>{...}

✅
const slicedResultArr = (arr)=>{...}
const excludedArr = (arr)=>{...}

2-2. 최소값과 최대값을 제한으로 사용하다

최대치나 최소치를 제한의 앞에 두는 것은 제한을 나타내는 좋은 방법이다.
예를 들어 어떤 경우 limitNum = 5은 오해를 초래할 수 있다.최소값일 수도 있고 최대값일 수도 있습니다.

❎
let limitNum = 5;
if (boxSelected < limitNum) {
  console.log('Not enough');
}
// or
if (boxSelected > limitNum) {
  console.log('Too much');
}

위의 예에서 limitNum이 최소치나 최대치를 대표한다는 것을 알기 어렵다.
따라서 접두어로 min 또는 max을 추가하면 됩니다.

✅
let minLimit = 5;
if (boxSelected < minLimit) {
  console.log('Not enough');
}

let maxLimit = 5;
if (boxSelected > maxLimit) {
  console.log('Too much');
}

이제 변수가 무엇인지 알고 코드가 간단명료합니다.

2-3. 브리 변수에 is와has 등의 단어를 사용하다

이것은 흔히 볼 수 있는 규칙 중의 하나이지만, 내가 간단하게 설명해 보겠다.
일반적으로 적어도 영어에서는'this~~~?'로 시작하는 문제가 이렇다그리고 "너...",너는 "예/아니오"라고 대답해라.이렇게 하면 볼 변수도 is~, can~ 또는 has~(has은 흔히 볼 수 있는 것이지 do이 아니다)으로 물어봐야 한다.
예를 들어 다음 변수에 부울 값이 있는지 추측하기 어렵다.

❎
let dragOver = false;
let updatable = true;
let itemsExist = false;

이것들이 아니라, 너는 키워드를 사용하여 "예/아니오"를 쉽게 추측해야 한다

✅
let isDragOver = false;
let canUpdate = true;
let hasItems = false;

요약

본문의 제1장에서 나는 코드를 읽을 수 있도록 하는 기본 기교를 총결하였다.

이름에 정보 패키지
1-1. 특정 단어 선택
1-2. tmp 및 val과 같은 일반적인 이름은 사용하지 마십시오.
1-3. 범위

의 범위에 따라 가변 길이를 확정하다

명확한 변수를 명명하여 오해를 피하다
2-1. 애매모호한 단어의 사용을 피하다
2-2. min 및 max으로 제한
2-3. 브리 변수

에 대해 is과 has이라는 단어를 사용한다
변수를 명명할 때 조심해야 한다. 이렇게 하면 코드를 읽는 사람이 너의 의도를 쉽게 이해할 수 있다.개발자로서 당신은 항상 오해의 가능성을 고려해야 합니다.
나는 네가 어떻게 너의 코드의 가독성을 높일 수 있는지 계속 쓸 것이다.
참조:
보스웰, D., 포처, T.(2012).코드를 읽을 수 있는 예술.오레리.