Мої найкращі практики – JavaScript

1. Вимкнути кеш

Firefox:
Відкрити Developer Tools -> Відкрити налаштування (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Відкрити Developer Tools -> Відкрити налаштування (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 мають бути булевими значеннями.
• У 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).