JavaScript

  • Use "modern" JavaScript approaches (aka ES5, ES6 & newer)

    • variables: const & let (instead of var) [1][2]

      • try to use const when possible [1][2]

        • If you must use let for your implementation, it may be a sign of "code smell". Consider alternate implementations that allow you to use const

        • When "reassigning the variable" makes the most sense, use let + switch statement (vs const + nested ternary operators)

Example (const vs let -- immutable vs mutable vs reassignable)
// Variables -- const vs let

// IMMUTABLE / READ-ONLY / CONSTANT VALUES
// - const, UPPER_CASE
// - cannot be reassigned or mutated

// (1) primitive values
const SERVER_URL = "https://api.example.com";

// (2) object values (JS objects, arrays, functions, ...)
const BRANDS_WE_WORK_WITH = Object.freeze(["Apple", "Google", "Microsoft"]);


// MUTABLE / CONSTANT REFERENCES
// - const, camelCase
// - cannot be reassigned (constant references), CAN be mutated (e.g. array.push())
const brands = [...BRANDS_WE_WORK_WITH];


// REASSIGNABLE / VARIABLE REFERENCES
// - let, camelCase
// - CAN be reassigned, CAN be mutated
let count = 0;
Example (const vs let -- let + switch statement)
// let + switch statement (preferred)
let chip = null;
switch (hasReviewedSection) {
  case null:
    chip = <Chip label="Not reviewed" color="default" />;
    break;
  case "changed":
    chip = <Chip label="Changes" color="warning" />;
    break;
  default:
    chip = (
      <Chip
        label={hasReviewedSection ? "Reviewed" : "Reviewing"}
        color={hasReviewedSection ? "success" : "primary"}
      />
    );
    break;
}

// const + nested ternary operators
const chip =
  hasReviewedSection === null ? (
    <Chip label="Not reviewed" color="default" />
  ) : hasReviewedSection === "changed" ? (
    <Chip label="Changes" color="warning" />
  ) : (
    <Chip
      label={hasReviewedSection ? "Reviewed" : "Reviewing"}
      color={hasReviewedSection ? "success" : "primary"}
    />
  );
  • array methods [1]

    • forEach, map, filter, reduce, sort, some, every, ...

  • ...

Last updated