Мои Best Practices — JavaScript

1. Отключите кеш

Firefox:
Открыть инструменты разработчика -> Открыть настройки (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Открыть DevTools -> Открыть настройки (F1) -> "Disable cache (while DevTools is open)"

2. Держите консоль JS открытой

Откройте в DevTools вкладку «Консоль» и не закрывайте её: так шаг 1 продолжает действовать, а ошибки сети и JS не пройдут мимо вас.

Рекомендую также вот этот плагин: он показывает ошибки JS ещё нагляднее — на случай, если вы сами о консоли забудете:

3. JavaScript: обязательное чтение — «You Don't Know JS»

• You Don't Know JS (1st Edition)
• Объясняет, почему this лучше избегать
• Объясняет, почему в JS порой происходят на первый взгляд странные вещи (ключевые слова: лексическая область видимости, замыкания)

4. Точка с запятой

• Ставьте всегда
• Она не обязательна, но может, например, помочь обойти вот эту ловушку: Stack Overflow
• JavaScript автоматически вставляет точку с запятой:

// you want to return 5 and have ugly formatting:
return
5

// JavaScript Interpretation:
return;
5;

5. Логические операторы && и ||

• В Java a && b и a || b вычисляются по правилам булевой алгебры. a и b должны иметь тип boolean.
• В JavaScript:
  • при a && b возвращается b, если a истинно;
  • при a || b возвращается b, если a ложно.

Так можно связывать и выражения — получается самый короткий if на свете, синтаксический сахар:

• isAdmin && showDeleteButton();
• (Строго говоря, это уже не инструкция)

Этим часто пользуются и для значений по умолчанию:

• let sendNewsletter = form.getNewsletterOptIn() || false;

6. Как JavaScript передаёт аргументы: по ссылке или по значению?

В JavaScript здесь всё интересно. Пример:

function changeStuff(a, b, c) {
    a = a * 10;
    b.item = "changed";
    c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

Результат будет таким:

10
changed
unchanged

Если бы obj1 вообще не был ссылкой, то изменение obj1.item никак не повлияло бы на obj1 за пределами функции.

Будь аргумент настоящей ссылкой, изменилось бы всё: num стало бы равно 100, а obj2.item содержало бы «changed». Вместо этого num остаётся равным 10, а obj2.item — «unchanged».

На самом деле элемент передаётся по значению. Однако то, что передаётся по значению, само является ссылкой. Технически это называется call-by-sharing («вызов по соиспользованию»).

На практике это означает: если вы изменяете сам параметр (как с num и obj2), это никак не затрагивает исходный объект, переданный в функцию. Если же изменить внутренние значения параметра, эти изменения сохранятся (как с obj1).