50+ подсказок, которые должен знать разработчик JS(ES6+) (6 часть)

Привет, снова StormyTalent.
И я продолжаю свой блог о 50+ подсказках для JS.

Подъем
Декларации var поднимаются на вершину ближайшей к ним области видимости функции, а присваивание — нет. Декларации const и let наделены новой концепцией под названием Temporal Dead Zones (TDZ). Важно знать, почему typeof больше не является безопасным.

// we know this wouldn’t work (assuming there
// is no notDefined global variable)
function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// creating a variable declaration after you
// reference the variable will work due to
// variable hoisting. Note: the assignment
// value of `true` is not hoisted.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// the interpreter is hoisting the variable
// declaration to the top of the scope,
// which means our example could be rewritten as:
function example() {
  let declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

// using const and let
function example() {
  console.log(declaredButNotAssigned); // => throws a ReferenceError
  console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
  const declaredButNotAssigned = true;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Выражения анонимных функций поднимают имя своей переменной, но не назначение функции.

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function () {
    console.log('anonymous function expression');
  };
}
Войти в полноэкранный режим Выход из полноэкранного режима

Именованные функциональные выражения поднимают имя переменной, а не имя функции или тело функции.

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Flying');
  };
}

// the same is true when the function name
// is the same as the variable name.
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  };
}
Войти в полноэкранный режим Выход из полноэкранного режима

Объявления функций поднимают свое имя и тело функции.

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Операторы сравнения и равенства
Для булевых чисел используйте быстрые клавиши, а для строк и чисел — явное сравнение.

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Используйте скобки для создания блоков в предложениях case и default, содержащих лексические объявления (например, let, const, function и class).

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Тернары не должны быть вложенными и обычно представляют собой однострочные выражения.

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;

// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
Войти в полноэкранный режим Выход из полноэкранного режима

Избегайте ненужных троичных выражений.

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;
Войти в полноэкранный режим Выйти из полноэкранного режима

При смешивании операторов заключайте их в круглые скобки. Единственным исключением являются стандартные арифметические операторы: +, — и **, поскольку их старшинство широко известно. Мы рекомендуем заключать / и * в круглые скобки, поскольку их старшинство может быть неоднозначным, когда они смешиваются.

// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// bad
const bar = a ** b - 5 % d;

// bad
// one may be confused into thinking (a || b) && c
if (a || b && c) {
  return d;
}

// bad
const bar = a + b / c * d;

// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// good
const bar = a ** b - (5 % d);

// good
if (a || (b && c)) {
  return d;
}

// good
const bar = a + (b / c) * d;
Вход в полноэкранный режим Выход из полноэкранного режима

Блоки

Используйте скобки во всех многострочных блоках.

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

// bad
function foo() { return false; }

// good
function bar() {
  return false;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Если вы используете многострочные блоки с if и else, поместите else в ту же строку, что и закрывающую скобку блока if.

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}
Войти в полноэкранный режим Выход из полноэкранного режима

Если блок if всегда выполняет оператор возврата, то последующий блок else не нужен. Возврат в блоке else if, который следует за блоком if, содержащим возврат, может быть разделен на несколько блоков if.

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

// bad
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

// bad
function dogs() {
  if (x) {
    return x;
  } else {
    if (y) {
      return y;
    }
  }
}

// good
function foo() {
  if (x) {
    return x;
  }

  return y;
}

// good
function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

// good
function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Спасибо за ваше время.

Оцените статью
Procodings.ru
Добавить комментарий