エレガントなJSコードの書き方

// 間違った書き方 const yyyymmdstr = moment().format("YYYY/MM/DD");

// 良い書き方 const currentDate = moment().format("YYYY/MM/DD");

// getUserInfo() の書き方が間違っている
クライアントデータを取得します。
顧客レコードを取得します。

// getUser() を書く良い方法

// 悪い書き方 // 86400000 の目的は何ですか?
タイムアウトを設定します(blastOff、86400000);

// 良い書き方 const MILLISECONDS_IN_A_DAY = 86_400_000;
setTimeout(blastOff, 1日あたりミリ秒);

// 書き込みが間違っています const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\s]+(.+?)\s*(\d{5})?$/;
保存都市郵便番号(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);


// 適切な書き方 const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
CityZipCode を保存します(都市、郵便番号);

// 構文が間違っています const locations = ["Austin", "New York", "San Francisco"];
場所.forEach(l => {
  メソッド
  その他の操作を実行します。
  // ...
  // ...
  // ...
  // ちょっと待って、「l」って何ですか?
  ディスパッチ(l);

// 良い書き方 const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(場所 => {
  メソッド
  その他の操作を実行します。
  // ...
  // ...
  // ...
  ディスパッチ(場所);
});

// 間違った書き方 const Car = {
  車種:「ホンダ」
  車種:「アコード」、
  車の色:「青」
};

関数paintCar(車) {
  car.carColor = "赤";
}
// 良い書き方 const Car = {
  メーカー:「ホンダ」
  モデル:「アコード」、
  色: 「青」
};

関数paintCar(車) {
  car.color = "赤";
}

// 間違った書き方 function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}
// 良い実践例 function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

// 間違った書き方 function createMenu(title, body, buttonText, cancelable) {
  // ...
}

メニューを作成します("Foo", "Bar", "Baz", true);

// 良い書き方 function createMenu({ title, body, buttonText, cancelable }) {
  // ...
}

メニューを作成します({
  タイトル: 「Foo」、
  本文: "バー",
  ボタンテキスト: "Baz",
  キャンセル可能: true
});

// 間違った書き方 function emailClients(clients) {
  クライアント.forEach(クライアント => {
    const clientRecord = database.lookup(client);
    クライアントレコードがアクティブである場合
      電子メール(クライアント);
    }
  });
}

// 良い書き方 function emailActiveClients(clients) {
  クライアントのフィルターを(isActiveClient).forEach(メール);
}

関数isActiveClient(クライアント) {
  const clientRecord = database.lookup(client);
  clientRecord.isActive() を返します。
}

// 間違った書き方 function addToDate(date, month) {
  // ...
}

定数date = 新しいDate();

// 関数名から何を追加するのかわかりにくい addToDate(date, 1);

// 良い書き方 function addMonthToDate(month, date) {
  // ...
}

定数date = 新しいDate();
月を日付に追加します(1、日付);

// 関数の書き方の間違い parseBetterjsAlternative(code) {
  定数正規表現 = [
    // ...
  ];

  const ステートメント = code.split(" ");
  const トークン = [];
  REGEXES.forEach(REGEX => {
    ステートメント.forEach(ステートメント => {
      // ...
    });
  });

  定数ast = [];
  トークン.forEach(トークン => {
    // レックス...
  });

  ast.forEach(ノード => {
    // 解析...
  });
}

// 関数の書き方 parseBetterJSAlternative(code) {
  const トークン = tokenize(コード);
  const syntaxTree = parse(トークン);
  構文Tree.forEach(ノード => {
    // 解析...
  });
}

関数 tokenize(コード) {
  定数正規表現 = [
    // ...
  ];

  const ステートメント = code.split(" ");
  const トークン = [];
  REGEXES.forEach(REGEX => {
    ステートメント.forEach(ステートメント => {
      トークンをプッシュします(/* ... */);
    });
  });

  トークンを返します。
}

関数parse(トークン) {
  const 構文ツリー = [];
  トークン.forEach(トークン => {
    構文ツリーをプッシュします(/* ... */);
  });

  構文ツリーを返します。
}

関数 showDeveloperList(開発者) {
  開発者.forEach(開発者 => {
    予想される給与を計算します。
    定数 experience = developer.getExperience();
    GithubLink を getGithubLink() に追加します。
    定数データ = {
      希望給与、
      経験、
      githubリンク
    };

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

関数 showManagerList(マネージャー) {
  マネージャー.forEach(マネージャー => {
    const 期待給与 = manager.calculateExpectedSalary();
    定数エクスペリエンス = manager.getExperience();
    const ポートフォリオ = manager.getMBAProjects();
    定数データ = {
      希望給与、
      経験、
      ポートフォリオ
    };

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

関数 showEmployeeList(従業員) {
  従業員.forEach(従業員 => {
    期待される給与を計算します。
    定数の経験 = 従業員.getExperience();

    定数データ = {
      希望給与、
      経験
    };

    スイッチ（従業員タイプ）{
      ケース「マネージャー」:
        data.portfolio = 従業員.getMBAProjects();
        壊す;
      ケース「開発者」:
        データ.githubLink = employee.getGithubLink();
        壊す;
    }

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

const メニュー構成 = {
  タイトル: null、
  本文: "バー",
  ボタンテキスト: null、
  キャンセル可能: true
};

関数createMenu(config) {
  config.title = config.title || "Foo";
  config.body = config.body || "バー";
  config.buttonText = config.buttonText || "バズ";
  config.cancellable =
    config.cancellable !== 未定義ですか? config.cancellable : true;
}

メニューを作成します(menuConfig);

const メニュー構成 = {
  タイトル: 「注文」、
  // ユーザーは 'body' キーを含めませんでした
  ボタンテキスト: "送信",
  キャンセル可能: true
};

関数createMenu(config) {
  config = オブジェクト.assign(
    {
      タイトル: 「Foo」、
      本文: "バー",
      ボタンテキスト: "Baz",
      キャンセル可能: true
    },
    設定
  );

  // 設定は次のようになります: {title: "Order", body: "Bar", buttonText: "Send", cancelable: true}
  // ...
}

メニューを作成します(menuConfig);

// 書き込みエラー function createFile(name, temp) {
  （一時）の場合{
    fs.create(`./temp/${name}`);
  } それ以外 {
    fs.create(名前);
  }
}

// 良い書き方 function createFile(name) {
  fs.create(名前);
}

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

名前を「ライアン・マクダーモット」にします。

関数splitIntoFirstAndLastName() {
  名前 = 名前.split(" ");
}

姓と名を分割します();

console.log(name); // ['Ryan', 'McDermott'];

関数splitIntoFirstAndLastName(名前) {
  name.split(" "); を返します。
}

const name = "ライアン・マクダーモット";
const newName = splitIntoFirstAndLastName(名前);

console.log(name); // 'ライアン・マクダーモット';
console.log(newName); // ['Ryan', 'McDermott'];

// 間違った書き方 const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

// 良い書き方 const addItemToCart = (cart, item) => {
  [...cart、{item、date: Date.now() }] を返します。
};

// 間違った書き方 Array.prototype.diff = function diff(comparisonArray) {
  const ハッシュ = 新しい Set(比較配列);
  this.filter(elem => !hash.has(elem)) を返します。
};

// 良い書き方 class SuperArray extends Array {
  diff(比較配列) {
    const ハッシュ = 新しい Set(比較配列);
    this.filter(elem => !hash.has(elem)) を返します。
  }
}

const プログラマ出力 = [
  {
    名前: 「ボビーおじさん」
    コード行数: 500
  },
  {
    名前:「スージーQ」
    コード行数: 1500
  },
  {
    名前: 「ジミー・ゴスリング」
    コード行数: 150
  },
  {
    名前:「グレイシー・ホッパー」
    コード行数: 1000
  }
];

合計出力を 0 にします。

(i = 0 とします; i < programmerOutput.length; i++) {
  合計出力 += プログラマー出力[i].コード行;
}

const プログラマ出力 = [
  {
    名前: 「ボビーおじさん」
    コード行数: 500
  },
  {
    名前:「スージーQ」
    コード行数: 1500
  },
  {
    名前: 「ジミー・ゴスリング」
    コード行数: 150
  },
  {
    名前: 「グレイシー・ホッパー」
    コード行数: 1000
  }
];

const totalOutput = プログラマー出力.reduce(
  (totalLines, output) => totalLines + output.linesOfCode、
  0
);

// 悪い書き方 if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}

// 良い書き方 function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}

// 書き込みが間違っている function isDOMNodeNotPresent(node) {
  // ...
}

DOMNodeが存在しない(ノード)の場合
  // ...
}

// 良い書き方 function isDOMNodePresent(node) {
  // ...
}

DOMNodePresent(ノード) の場合
  // ...
}

クラス飛行機{
  // ...
  巡航高度を取得する() {
    スイッチ (this.type) {
      ケース「777」:
        this.getMaxAltitude() - this.getPassengerCount() を返します。
      「エアフォースワン」の場合：
        this.getMaxAltitude() を返します。
      ケース「セスナ」：
        this.getMaxAltitude() - this.getFuelExpenditure() を返します。
    }
  }
}

クラス飛行機{
  // ...
}

クラス Boeing777 は Airplane を拡張します {
  // ...
  巡航高度を取得する() {
    this.getMaxAltitude() - this.getPassengerCount() を返します。
  }
}

クラスAirForceOneはAirplaneを拡張します{
  // ...
  巡航高度を取得する() {
    this.getMaxAltitude() を返します。
  }
}

クラス Cessna は Airplane を拡張します {
  // ...
  巡航高度を取得する() {
    this.getMaxAltitude() - this.getFuelExpenditure() を返します。
  }
}

// 間違った書き方 function travelToTexas(vehicle) {
  if (車両インスタンス自転車) {
    車両.ペダル(this.currentLocation、新しい場所("texas"));
  } そうでない場合 (車両インスタンス Car) {
    車両.ドライブ(this.currentLocation、新しい場所("texas"));
  }
}

// 良い書き方 function travelToTexas(vehicle) {
  車両を移動します(this.currentLocation、新しい場所("texas"));
}

// 悪い習慣 // 古いブラウザでは、キャッシュされていない 'list.length' の各反復はコストがかかります // 'list.length' が再計算されるためです。最近のブラウザでは、これは (let i = 0, len = list.length; i < len; i++) { に最適化されています。
  // ...
}

// 良い書き方 for (let i = 0; i < list.length; i++) {
  // ...
}