JavaScript Кращі практики
Уникайте глобальних змінних, уникайте new, уникайте ==, уникайте eval()
Уникайте глобальних змінних
Зведіть до мінімуму використання глобальних змінних.
Сюди входять всі типи даних, об’єкти та функції.
Глобальні змінні та функції можуть бути перезаписані іншими скриптами.
Замість цього використовуйте локальні змінні та дізнайтесь, як використовувати замикання.
Завжди оголошуйте локальні змінні
Всі змінні, що використовуються в функції, мають бути оголошені як локальні змінні.
Локальні змінні мають бути оголошені за допомогою ключового слова var або ключового слова let, інакше вони стануть глобальними змінними.
Строгий режим не допускає неоголошених змінних.
Оголошення зверху
Гарна практика програмування - розміщувати всі оголошення зверху кожного скрипту або функції.
Це дає:
- Більш чистий код
- Забезпечує єдине місце для пошуку локальних змінних
- Спрощує уникання небажаних (що маються на увазі) глобальних змінних
- Зменшує вірогідність небажаного повторного оголошення
// Оголосити на початку
let firstName, lastName, price, discount, fullPrice;
// Оголосити після
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
Це також стосується змінних циклу:
for (let i = 0; i < 5; i++) {
Ініціалізація змінних
Рекомендується ініціалізувати змінні при їх оголошенні.
Це дає:
- Більш чистий код
- Забезпечує єдине місце для ініціалізації змінних
- Уникання невизначених значень
// Оголосити та ініціювати на початку
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
Ініціалізація змінних дає представлення про можливе використання (та можливий тип даних).
Оголосити об’єкти за допомогою const
Оголошення об’єктів за допомогою const попередить випадкову зміну типу:
Приклад
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Змінює об’єкт на рядок
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Не можливо
Оголосити масиви за допомогою const
Оголошення масивів за допомогою const попередить випадкову зміну типа:
Приклад
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Змінює масив на число
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Не можливо
Не використовуйте new Object()
- Використовуйте
""замістьnew String() - Використовуйте
0замістьnew Number() - Використовуйте
falseзамістьnew Boolean() - Використовуйте
{}замістьnew Object() - Використовуйте
[]замістьnew Array() - Використовуйте
/()/замістьnew RegExp() - Використовуйте
function (){}замістьnew Function()
Приклад
let x1 = ""; // новий примітивний рядок
let x2 = 0; // нове примітивне число
let x3 = false; // нове примітивне булеве значення
const x4 = {}; // новий об’єкт
const x5 = []; // новий об’єкт масиву
const x6 = /()/; // новий об’єкт regexp
const x7 = function(){}; // новий об’єкт функції
Спробуйте самі »
Стережіться автоматичного перетворення типів
Код JavaScript не дуже типізований.
Змінні можуть містити всі типи даних.
Змінна може змінювати свій тип даних:
Пам’ятайте, що числа можуть випадково бути перетворені в рядки або NaN (Not a Number - Не число).
При виконанні математичних операцій JavaScript може конвертувати числа в рядки:
Приклад
let x = 5 + 7; // x.valueOf() дорівнює 12, typeof x - це число
let x = 5 + "7"; // x.valueOf() дорівнює 57, typeof x - це рядок
let x = "5" + 7; // x.valueOf() дорівнює 57, typeof x - це рядок
let x = 5 - 7; // x.valueOf() дорівнює -2, typeof x - це число
let x = 5 - "7"; // x.valueOf() дорівнює -2, typeof x - це число
let x = "5" - 7; // x.valueOf() дорівнює -2, typeof x - це число
let x = 5 - "x"; // x.valueOf() дорівнює NaN, typeof x - це число
Спробуйте самі »
Віднімання рядка із рядка не викликає помилки, але повертає NaN (Not a Number / Не число):
Використовуйте === Порівняння
Оператор порівняння == завжди перетворює (у відповідні типи) перед порівнянням.
Оператор === примусово порівнює значення й тип:
Приклад
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
Спробуйте самі »
Використовуйте значення параметрів за замовчуванням
Якщо функція викликається з відсутнім аргументом, значення відсутнього аргумента встановлюється на undefined (невизначено).
Undefined (невизначено) значення можуть порушити ваш код. Присвоювати аргументам значення за замовчуванням - гарна звичка.
ECMAScript 2015 дозволяє використовувати параметри за замовчуванням у визначенні функції:
function (a=1, b=1) { /*код функції*/ }
Додаткові відомості про параметри та аргументи функції див. в розділі Параметри функції
Завершіть switch налаштуваннями за замовчуванням
Завжди завершуйте інструкції switch за допомогою default (значення за замовчуванням). Навіть якщо ви думаєте, що в цьому немає потреби.
Приклад
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day = "Unknown";
}
Спробуйте самі »
Уникайте числових, рядкових та булевих значень як об’єктів
Завжди ставтесь до чисел, рядків або булевим значенням як до примітивних значень. Не як до об’єктів.
Оголошення цих типів як об’єктів знижує швидкість виконання та викликає неприємні побічні ефекти:
Приклад
let x = "John";
let y = new String("John");
(x === y) // є false, тому що x - це рядок, а y - об’єкт
Спробуйте самі »
Або навіть гірше:
Приклад
let x = new String("John");
let y = new String("John");
(x == y) // є false, тому що не можна порівнювати об’єкти
Спробуйте самі »
Уникайте використання eval()
Функція eval() використовується для запуску тексту як коду. Практично в усіх випадках немає потреби використовувати це.
Оскільки це дозволяє запускати будь-який код, це також представляє проблему безпеки.
