개요

호출 엔지니어의 메모

통합 리더 코드의 Print 2

마지막 요약

지난번까지 표면적인 개선

코드상의 개선 조치

제어 프로세스를 읽기 쉽게 만듭니다

.

거대 공식 분할

읽기 쉬운 변수

읽기 제어 프로세스 용이성

조건식 매개 변수의 배열 순서

if의 조건

세 가지 연산자

함수에서 빠르게 되돌아오기

네스트를 얕게 만들기

우선'컨트롤 프로세스를 쉽게 읽을 수 있도록'하는 방법이다.이것에 관해서는 다음과 같은 다섯 가지 방법이 있다.
그럼 실제 코드를 보면서 하나하나 설명하고 싶어요.
참고로 자바스크립트에서 사용하지 않는'gooto문'과 사용 기회가 적은'do/while문'을 생략했습니다.

1. 조건식 매개 변수의 배열 순서

조건식 매개 변수의 배열 순서에는 하나의 법칙이 있다

왼쪽 ='조사 대상'변화

오른쪽=비교대상은그대로

조건식 매개 변수의 배열 순서에는 일정한 법칙이 있다
왼쪽 = 조사 대상 변경
오른쪽 = 객체 비교, 큰 변화 없음

2.if에 대한 조건

조건은 부정형식이 아니라 긍정형식을 사용한다

간단한 공식을 써라

다음은if/else에 대한 조건입니다.
조건은 부정형보다 긍정형을 사용하는 것이 직관적이라고 쓰여 있다.

if (a !== b) {}  // 否定形(瞬時の判断に迷う)
if (a === b) {}  // 肯定形(瞬時に判断しやすい)

그리고 여건이 많지 않으니 가능한 한 간단하게 노력해라.
아래와 같이 여건이 많으면 보기 힘들지만 노력이 간단하면 가독성이 증가한다.

// 条件が複数あり見ずらいパターン
if (num === 1 || num === 2 || num ===3) {
  // todo
} 

// シンプルで見やすいパターン
const array = [1, 2, 3];
if (array.includes(num)) {
  // todo
}

3. 삼원 연산자

세 가지 연산자에 대해 아직 토론이 남아 있다

지지자들은 여러 줄을 한 줄로 통일하는 것이 좋다고 생각한다

반대자는 읽기 어렵고 디버깅이 어렵다

다음은 삼원 연산자다.
이것은 의견이 엇갈리는 곳이니 찬성을 한 줄로 통일하면 좋은 의견이다.
반면 반대자들은 읽기, 디버깅, 고통 등의 의견 때문에 헤어진다.
나는 개인적으로 기본적으로if문을 사용하고 세 가지 연산자에 따라 간단하면 사용한다고 생각한다.

// 個人的に許せる三項演算子
const timeString = hour >= 12 ? 'pm' : 'am'

// 絶対NGな三項演算子
const id = variable
  ? undfined
  : params.id || query.id

// 三項演算子と短絡評価が混じっており、バグが混入しやすい

4. 함수에서 빠른 반환

다음은 초기 리턴입니다.
이는 그대로 유지되며, 다음 코드는 나이에 따라'성인'인지'미성년'인지 되돌아오는 함수다.
초기return을 통해else를 사용하지 않아 가독성과 끼워넣기성이 얕아졌다는 것을 알 수 있다.

function hoge(age) {
  if (age >= 20) {
    return '成人'
  }
  return '未成年'
}

5. 얕은 중첩

다음은 아까와도 관련이 있는데, 내용은 플러그를 얕게 하는 것이다.
예에서 언급한 코드만 보면 어색하다. 끼워 넣은 깊은 코드는 항상 자신이 어디에 있는지 의식해야 하고 괄호의 범위를 의식해야 하며 가독성이 현저히 낮아져 독자에게'정신적 스트레스'를 가져다 주어야 한다.
단언할 수 있는 것은 끼워 넣는 것은 좋지 않다는 것이다.
참고로 저는 개인적으로 논리를 추출하여 함수에 잘라내거나 전체적인 정보를 대상화하는 것이 매우 효과적이라고 생각합니다.

if (a === 1) {
  if (b === 2) {
    if (c === 3) {
      if (d === 4 {
        // こんなのがずっと続いたら。。。
      }
    }
  }
}

거대한 공식을 분할하다

설명 변수

개요 변수

도르건의 법칙 사용

단거리 평가 남용

와 복잡한 논리와의 싸움

DRY의 원칙

1. 변수 설명

// NG
if (line.split(':')[0].strip() === 'root') {}

// OK
userName = line.split(':')[0].strip();
if (userName === 'root') {}

우선'설명 변수'에 관한 것이다.
간단한 방법은 표현식을 나타내는 변수를 사용하여 표현식을 분할하는 것이다. 이런 변수를'설명 변수'라고 부른다.
첫 번째 코드는if의 조건 중,line입니다.split의 형식으로'식'을 기술하였다.
다른 한편, 아래의 코드는'설명 변수'를 사용하는 예이다.
line."username 변수"로 split의 처리를 잠시 받아들이고 이 변수를 바탕으로 조건을 기술하여 라인을 만듭니다.split~~의 값이 무엇인지 이해하기 쉽다.

2. 요약 변수

// NG
if (request.user.id === document.ownerDocument.id) {
  // ユーザはこの文章を編集できる
}
if (request.user.id !== document.ownerDocument.id) {
  // 文章は読み取り専用
}

// OK
const isOwnsDocument = request.user.id === document.ownerDocument.id;
if (isOwnsDocument) {
  // ユーザは文章を編集できる
}
if (!isOwnsDocument) {
  // 文章は読み取り専用
}

다음은 요약 변수입니다.
아까처럼 공식을 설명할 필요가 없어도 큰 코드 블록을 작은 이름으로 바꾸어 관리와 파악이 간단해지는 변수를'요약 변수'라고 할 수 있다.
이미지 코드는 "이 사용자가 글을 가지고 있습니까?"입니다.이런 내용.
위의 두 개의if는 변수를 직접 사용하고 아래의 두 개의if는 어떤 값을 비교했는지 대입을 통해 개괄적인 변수를 통해'함수 인용의 개념'을 미리 전달할 수 있다.

3. 도르곤의 법칙

다음은 도르건의 법칙이다.
드 몰건의 법칙에서 유명한 것은 그림에서 보듯이 원과 원으로'진과 가짜를 교체할 수 있다'는 것이다.
이 법칙을 사용하면 아래처럼 논리식을 쉽게 읽을 수 있다.

4. 단거리 평가의 남용

// PHP

// NG
if ((!(bucket = FindBucker(key))) || !bucket->IsOccupied());

// OK
bucket = FindBucket(key);
if (bucket != Null) {}

다음은 단거리 평가다.
단락 평가가 왼쪽이 진실이면 오른쪽은 평가하지 않지만 첫 번째if와 같은 코드는 가독성이 현저히 좋지 않다.
그에 비해 기술된 코드의 가독성이 높다는 점은 일목요연하다.
머리가 좋은 코드를 목표로 하지 말고 읽기 쉬운 코드에 주의해야 한다.

5. 복잡한 논리와 격투

다음은 복잡한 논리와의 싸움이다.
어떻게 해야만 복잡한 논리를 빠뜨리지 않고 간단하게 실현할 수 있습니까?그렇지만
복잡하고 기괴한 코드는 아무도 읽지 못하는데, 처음 보면 정말 정확한지 판단하기 어렵다.
이럴 때는 반대에서 문제를 해결해 볼 수 있다.
예를 들어 배열을 상반된 순서에 따라 균등하게 전달하거나 뒤에서 데이터를 삽입하는 등이다.
예를 들어'두 범위가 겹치나요'를 목적으로 할 때 그 반대는'두 범위가 겹치지 않습니다'이다.

6.DRY의 원칙

다음은 DRY의 원칙입니다.
DRY의 원칙은 Don't Repeat Yourself의 약칭으로'중복을 피하라'는 뜻이다.
중복된 코드를 추출하여 방법으로 잘라내지만, 중복되어 보이지만 실제로는 중복되지 않는 경우도 있으니 주의해야 한다.
예를 들어 기술코드는 기본적으로 같지만 던진 API가 완전히 다른 경우 등 API의 규격이 변경될 때 흡수가 되지 않아 중복된 것처럼 보이지만 실제로는 중복되지 않는다.

변수 및 가독성

변수가 많을 때 추적하기 어렵다

변수의 범위가 클수록 범위를 파악하는 시간이 길다

변수가 자주 바뀌면 현재치를 파악하기 어렵다

변수 삭제

첫 번째는 "작동하지 않는 임시 변수 삭제"입니다.
왜'거대한 공식을 분할한다'에 열거된'설명 변수'와'개요 변수'는 쉽게 읽을 수 있을까? 변수는 거대한 공식을 분할해 설명문의 역할을 하기 때문이다.
이번에'필요 없는 변수'를 사용했다면 오히려 읽기 어려울 수 있으니 삭제하자.

변수 범위 축소

글로벌 변수 방지

정의 위치 낮추기

변수는 한 번만 쓰기

총결산

읽기 쉬운 제어 프로세스

단순화

세 가지 연산자의 좋고 나쁨

초기return 등을 통해 얕게 끼워넣기

거대 공식 분할

설명 변수나 개요 변수 분할로 명칭을 바꾼다

논리를 간소화하기 위해'상반된'에서 문제를 해결해 본다

요약 반복 코드(DRY의 원칙)

읽기 쉬운 변수

복잡한 공식을 분할하지 않거나 이미 명확한 상황에서 임시 변수가 필요하지 않다

로고를 하고 졌어

변수 범위 줄이기