きれいなJavaScriptコードの書き方を教える記事

// しないでください❌
const foo = "[email protected]";
const バー = "ジョン";
定数年齢 = 23;
定数qux = true;

// ✅を実行します
const メールアドレス = "[email protected]";
const firstName = "ジョン";
定数年齢 = 23;
定数isActive = true

// しないでください❌
定数ユーザー = {
  ユーザーID: "296e2589-7b33-400a-b762-007b730c8e6d",
  ユーザーメール: "[email protected]",
  ユーザー名: "ジョン",
  ユーザ名: "Doe",
  ユーザー年齢: 23,
};

ユーザー.ユーザーID;

// ✅を実行します
定数ユーザー = {
  id: "296e2589-7b33-400a-b762-007b730c8e6d",
  メールアドレス: "[email protected]",
  ファーストネーム: "ジョン",
  姓: "Doe",
  年齢: 23歳
};

ユーザーID;

// しないでください❌
タイムアウトを設定します(セッションデータをクリアします、900000);

// ✅を実行します
定数SESSION_DURATION_MS = 15 * 60 * 1000;

タイムアウトを設定します(セッションデータをクリアし、SESSION_DURATION_MS);

// しないでください❌
関数トグル() {
  // ...
}

関数は同意しました(ユーザー) {
  // ...
}

// ✅を実行します
関数トグルテーマスイッチャー() {
  // ...
}

関数didAgreeToAllTerms(ユーザー) {
  // ...
}

// しないでください❌
関数 printAllFilesInDirectory(dir) {
  const ディレクトリ = dir || "./";
  // ...
}

// ✅を実行します
関数 printAllFilesInDirectory(dir = "./") {
  // ...
}

// しないでください❌
関数 sendPushNotification(タイトル、メッセージ、画像、isSilent、delayMs) {
  // ...
}

sendPushNotification("新しいメッセージ", "...", "http://...", false, 1000);

// ✅を実行します
関数 sendPushNotification({ タイトル、メッセージ、画像、isSilent、delayMs }) {
  // ...
}

定数通知設定 = {
  タイトル:「新しいメッセージ」、
  メッセージ： "..."、
  画像: "http://...",
  isSilent: false、
  遅延時間: 1000,
};

プッシュ通知を送信します(通知設定);

/ しないでください❌
関数pingUsers(ユーザー) {
  users.forEach((ユーザー) => {
    定数userRecord = database.lookup(user);
    if (!userRecord.isActive()) {
      ping(ユーザー);
    }
  });
}

// ✅を実行します
関数 pingInactiveUsers(ユーザー) {
  users.filter(!isUserActive).forEach(ping);
}

関数 isUserActive(ユーザー) {
  定数userRecord = database.lookup(user);
  userRecord.isActive() を返します。
}

// しないでください❌
関数createFile(name, isPublic) {
  パブリックの場合
    fs.create(`./public/${name}`);
  } それ以外 {
    fs.create(名前);
  }
}

// ✅を実行します
関数createFile(名前) {
  fs.create(名前);
}

関数createPublicFile(名前) {
  ファイルを作成します(`./public/${name}`);
}

// しないでください❌
関数 renderCarsList(車) {
  cars.forEach((車) => {
    const 価格 = car.getPrice();
    車を作る
    const ブランド = car.getBrand();
    const nbOfDoors = car.getNbOfDoors();

    render({ 価格, メーカー, ブランド, ドアの数 });
  });
}

関数 renderMotorcyclesList(オートバイ) {
  オートバイ.forEach((オートバイ) => {
    価格 = オートバイ.getPrice();
    定数 make = オートバイ.getMake();
    const ブランド = オートバイ.getBrand();
    シートの高さを取得します。

    render({ 価格, メーカー, ブランド, ドアの数 });
  });
}

// ✅を実行します
関数 renderVehiclesList(車両) {
  車両.forEach((車両) => {
    定数価格 = 車両.getPrice();
    定数 make = 車両.getMake();
    const ブランド = 車両.getBrand();

    const data = { 価格、メーカー、ブランド };

    スイッチ（車両タイプ）{
      ケース「車」:
        data.nbOfDoors = 車両.getNbOfDoors();
        壊す;
      「オートバイ」の場合:
        車両シートの高さを取得します。
        壊す;
    }

    レンダリング(データ);
  });
}

// しないでください❌
日付を "21-8-2021" とします。

関数splitIntoDayMonthYear() {
  日付 = date.split("-");
}

日月年に分割します();

// 別の関数では日付を文字列として受け取る可能性があります
console.log(日付); // ['21', '8', '2021'];

// ✅を実行します
関数splitIntoDayMonthYear(日付) {
  date.split("-"); を返します。
}

定数日付 = "21-8-2021";
日付を分割します。

// 元の値はそのままです
console.log(日付); // '21-8-2021';
console.log(newDate); // ['21', '8', '2021'];

// しないでください❌
関数enrollStudentInCourse(コース, 学生) {
  course.push({ 学生、登録日: Date.now() });
}

// ✅を実行します
関数enrollStudentInCourse(コース, 学生) {
  [...course, { student, enrollmentDate: Date.now() }] を返します。
}

// しないでください❌
関数 isUserNotVerified(ユーザー) {
  // ...
}

if (!isUserNotVerified(ユーザー)) {
  // ...
}

// ✅を実行します
関数 isUserVerified(ユーザー) {
  // ...
}

if (isUserVerified(ユーザー)) {
  // ...
}

// しないでください❌
if (isActive === true) {
  // ...
}

firstName !== "" && firstName !== null && firstName !== 未定義の場合 {
  // ...
}

const isUserEligible = user.isVerified() && user.didSubscribe() ? true : false;

// ✅を実行します
if (isActive) {
  // ...
}

if (!!firstName) {
  // ...
}

const isUserEligible = user.isVerified() && user.didSubscribe();

// しないでください❌
関数 addUserService(db, user) {
  もし(!db){
    db.isConnected() の場合 {
      if (!ユーザー) {
        db.insert("users", user) を返します。
      } それ以外 {
        新しいエラーをスローします("ユーザーがいません");
      }
    } それ以外 {
      新しいエラーをスローします("データベース接続がありません");
    }
  } それ以外 {
    新しいエラーをスローします("データベースがありません");
  }
}

// ✅を実行します
関数 addUserService(db, user) {
  if (!db) throw new Error("データベースがありません");
  if (!db.isConnected()) throw new Error("データベース接続がありません");
  if (!user) throw new Error("ユーザーがいません");

  db.insert("users", user) を返します。
}

// しないでください❌
const getColorByStatus = (ステータス) => {
  スイッチ（ステータス）{
    ケース「成功」:
      「緑」を返します。
    ケース「失敗」:
      「赤」を返します。
    ケース「警告」:
      「黄色」を返します。
    ケース「ロード中」:
    デフォルト：
      「青」を返します。
  }
};

// ✅を実行します
const ステータスカラー = {
  成功:「緑」、
  失敗:「赤」、
  警告:「黄色」、
  読み込み中: "青",
};

const getColorByStatus = (status) => statusColors[status] || "青";

定数ユーザー = {
  メールアドレス: "[email protected]",
  請求する：
    イバン語: "...",
    スウィフト: "...",
    住所：
      street: "通りの名前",
      州:「CA」、
    },
  },
};

// しないでください❌
const email = (user && user.email) || "該当なし";
定数ストリート =
  （ユーザー&&
    ユーザー.請求 &&
    ユーザー.請求先住所 &&
    ユーザー請求先住所ストリート) ||
  「該当なし」;
定数状態 =
  （ユーザー&&
    ユーザー.請求 &&
    ユーザー.請求先住所 &&
    ユーザー請求先住所州) ||
  「該当なし」;

// ✅を実行します
const email = user?.email ?? "N/A";
const street = user?.billing?.address?.street ?? "N/A";
const street = user?.billing?.address?.state ?? "N/A";

// しないでください❌
getUser(関数(err, user) {
  getProfile(ユーザー、関数(err、プロファイル) {
    getAccount(プロファイル、関数(err、アカウント) {
      getReports(アカウント、関数(err、レポート) {
        sendStatistics(レポート、関数(err) {
          コンソールエラー(err);
        });
      });
    });
  });
});

// ✅を実行します
ユーザー取得()
  .then(プロファイルを取得)
  .then(アカウントを取得)
  .then(レポートを取得)
  .then(統計を送信)
  .catch((err) => console.error(err));

// または Async/Await を使用する ✅✅

非同期関数sendUserStatistics() {
  試す {
    const user = getUser() を待機します。
    const プロファイル = getProfile(user) を待機します。
    const アカウント = getAccount(profile) を待機します。
    const レポート = getReports(アカウント) を待機します。
    sendStatistics(レポート)を返します。
  } キャッチ (e) {
    コンソールエラー(err);
  }
}

/ しないでください❌
試す {
  // 誤りの可能性があるコード
} キャッチ (e) {
  コンソールログ(e);
}

// ✅を実行します
試す {
  // 誤りの可能性があるコード
} キャッチ (e) {
  // 最も適切なもの（またはすべて）に従ってください:
  // 1- console.log よりも適している
  コンソールエラー(e);

  // 2- 該当する場合はユーザーに通知する
  アラートユーザーエラー(e);

  // 3- サーバーに報告
  エラーをサーバに報告します(e);

  // 4- カスタムエラーハンドラを使用する
  新しい CustomError(e) をスローします。
}

// しないでください❌
関数generateHash(str) {
  // ハッシュ変数
  ハッシュを 0 にします。

  // 文字列の長さを取得します
  length = str.length;とします。

  // 文字列が空の場合は戻り値
  長さが等しい場合
    ハッシュを返します。
  }

  // 文字列内のすべての文字をループします
  (i = 0; i < 長さ; i++) の場合 {
    // 文字コードを取得します。
    char を str.charCodeAt(i) に格納します。

    // ハッシュを作成する
    ハッシュ = (ハッシュ << 5) - ハッシュ + 文字;

    // 32ビット整数に変換
    ハッシュ &= ハッシュ;
  }
}

// ✅を実行します
関数generateHash(str) {
  ハッシュを 0 にします。
  length = str.length;とします。
  長さが等しい場合
    ハッシュを返します。
  }

  (i = 0; i < 長さ; i++) の場合 {
    char を str.charCodeAt(i) に格納します。
    ハッシュ = (ハッシュ << 5) - ハッシュ + 文字;
    hash = hash & hash; // 32ビット整数に変換
  }
  ハッシュを返します。
}

// しないでください❌
/**
 * 2021-7-21: コーナーケースを修正
 * 2021-7-15: パフォーマンスの改善
 * 2021-7-10: 複数のユーザータイプに対応
 */
関数generateCanonicalLink(user) {
  // 定数セッション = getUserSession(ユーザー)
  定数セッション = user.getSession();
  // ...
}

// ✅を実行します
関数generateCanonicalLink(user) {
  定数セッション = user.getSession();
  // ...
}