Лучшие практики JavaScript

Избегайте глобальных переменных

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

Сюда входят все типы данных, объекты и функции.

Глобальные переменные и функции могут быть перезаписаны другими скриптами.

Вместо этого используйте локальные переменные и научитесь использовать закрытия.

Всегда объявляйте локальные переменные

Все переменные, используемые в функции, должны быть объявлены как локальные переменные.

Локальные переменные должны быть объявлены с помощью var, ключевое слово let или ключевое слово const, в противном случае они станут глобальными переменными.

Строгий режим не допускает необъявленных переменных.

Декларации сверху

Хорошей практикой кодирования является размещение всех объявлений в начале каждого скрипта. или функция.

Это будет:

Дайте более чистый код
Предоставьте единое место для поиска локальных переменных.
Упростите избежание нежелательных (подразумеваемых) глобальных переменных.
Уменьшите вероятность нежелательных повторных деклараций

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
 
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;

Это также относится к переменным цикла:

for (let i = 0; i < 5; i++) 
 {

Инициализировать переменные

Хорошей практикой программирования является инициализация переменных при их объявлении.

Это будет:

Дайте более чистый код
Предоставьте единое место для инициализации переменных.
Избегайте неопределенных значений

// Declare and initiate at the beginning
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";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Объявляйте массивы с помощью const

Объявление массивов с помощью const предотвратит случайное изменение типа:

Пример

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Не используйте новый объект()

Используйте "" вместо new String()
Используйте 0 вместо new Number()
Используйте false вместо new Boolean()
Используйте {} вместо new Object()
Используйте [] вместо new Array()
Используйте /()/ вместо new RegExp()
Используйте function(){} вместо new Function()

Пример

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Literal Constructors</h2>
<p id="demo"></p>

<script>
let x1 = "";
let x2 = 0;
let x3 = false;
const x4 = {};
const x5 = [];
const x6 = /()/;
const x7 = function(){};

document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Остерегайтесь автоматического преобразования типов

JavaScript свободно типизирован.

Переменная может содержать все типы данных.

Переменная может изменить свой тип данных:

Пример

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable can chang its type. In this example x is first a string then a number:</p>

<p id="demo"></p>

<script>
let x = "Hello";
x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

Помните, что числа могут быть случайно преобразованы в строки или NaN (не Число).

При выполнении математических операций JavaScript может преобразовывать числа в строки:

Пример

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Remove the comment (at the beginning of the lines) to test each case:</p>

<p id="demo"></p>

<script>
let x = 5;
//x = 5 + 7;    // x.valueOf() is 12, typeof x is a number
//x = 5 + "7";  // x.valueOf() is 57, typeof x is a string
//x = "5" + 7;  // x.valueOf() is 57, typeof x is a string
//x = 5 - 7;    // x.valueOf() is -2, typeof x is a number
//x = 5 - "7";  // x.valueOf() is -2, typeof x is a number
//x = "5" - 7;  // x.valueOf() is -2, typeof x is a number
//x = 5 - "x";  // x.valueOf() is NaN, typeof x is a number

document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>

</body>
</html>

Вычитание строки из строки не приводит к генерирует ошибку, но возвращает NaN (не число):

Пример

"Hello" - "Dolly"    // returns NaN

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>

</body>
</html>

Используйте === сравнение

Оператор сравнения == всегда преобразует (в соответствующие типы) перед сравнение.

Оператор === принудительно сравнивает значения и типы:

Пример

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     
// false

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>Remove the comment (at the beginning of each line) to test each case:</p>

<p id="demo"></p>

<script>
let x;
//x = (0 == "");   // true
//x = (1 == "1");  // true
//x = (1 == true);   // true
//x = (0 === "");  // false
//x = (1 === "1");   // false
//x = (1 === true);  // false
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Использовать параметры по умолчанию

Если функция вызывается с отсутствующим аргументом, значение отсутствующего аргумента аргумент установлен в не определено.

Неопределенные значения могут сломать ваш код. Это хорошая привычка — назначать значения по умолчанию. значения аргументам.

Пример

function myFunction(x, y) {
    if (y === undefined) {
      y = 0;
     }
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>

<script>
function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }  
  return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

ECMAScript 2015 допускает параметры по умолчанию в определении функции:

function (a=1, b=1) { /*function code*/  }

Подробнее о параметрах и аргументах функций читайте в разделе «Параметры функций».

Завершите свои коммутаторы настройками по умолчанию

Всегда заканчивайте операторы 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";
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let day;
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";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Избегайте числа, строки и логического значения в качестве объектов

Всегда рассматривайте числа, строки или логические значения как примитивные значения. Не так, как объекты.

Объявление этих типов как объектов замедляет скорость выполнения, и вызывает неприятные побочные эффекты:

Пример

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x === y);
</script>

</body>
</html>

Или еще хуже:

Пример

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>JavaScript cannot compare objects.</p>

<p id="demo"></p>

<script>
let x = new String("John"); 
let y = new String("John");
document.getElementById("demo").innerHTML = (x == y);
</script>

</body>
</html>

Избегайте использования eval()

Функция eval() используется для запуска текста как кода. Почти во всех случаях это не должно быть необходимости использовать его.

Поскольку он позволяет запускать произвольный код, он также представляет собой проблема.

Лучшие практики JavaScript

Оглавление

Избегайте глобальных переменных

Всегда объявляйте локальные переменные

Декларации сверху

Инициализировать переменные

Объявляйте объекты с помощью const

Пример

Объявляйте массивы с помощью const

Пример

Не используйте новый объект()

Пример

Остерегайтесь автоматического преобразования типов

Пример

Пример

Пример

Используйте === сравнение

Пример

Использовать параметры по умолчанию

Пример

Завершите свои коммутаторы настройками по умолчанию

Пример

Избегайте числа, строки и логического значения в качестве объектов

Пример

Пример

Избегайте использования eval()