Девять наиболее распространенных ошибок разработчиков делают в JavaScript (и как их исправить)

JavaScript это Язык сценариев Используется в веб-страницах, чтобы добавить функциональность и интерактивность. Для новичка, исходящего с другого языка программирования, JavaScript довольно легко понять. С несколькими учебниками вы должны быть в состоянии начать с ним сразу.

Тем не менее, есть несколько распространенных ошибок, которые делают многие начинающие программисты. В этой статье мы рассмотрим девять распространенных ошибок (или плохих практик) и их решения, которые помогут вам стать лучшим разработчиком JS.

Сбивает с толку задания (=) и равенства (==, ===) операторов

Как его название подразумевает, Оператор назначения (=) используется для назначения значений переменным. Разработчики часто путают его с оператором равенства.

Вот пример:

const name = "javascript";
if ((name = "nodejs")) {
    console.log(name);
}
// output - nodejs

Переменная имени и строка «NODEJS» не сравниваются в этом случае. Вместо этого «NODEJS» назначается на имя и «NODEJS» напечатано на консоли.

В JavaScript два равных знака (==) и тройной равный знак (===) называются операторами сравнения.

Для кода выше, это соответствующий способ сравнения значений:

const name = "javascript";
if (name == "nodejs") {
    console.log(name);
}
// no output
// OR
if (name === "nodejs") {
    console.log(name);
}
// no output

Разница между этими операторами сравнения заключается в том, что двойная равна выполняет свободный Сравнение, в то время как Triple равен выполняет строгий сравнение.

В свободном сравнении только значения сравниваются только значения. Но в строгом сравнении значения и значения данных сравниваются.

Следующий код объясняет это лучше:

const number = "1";
console.log(number == 1);
// true
console.log(number === 1);
// false

Переменное число было присвоено строковое значение 1. По сравнению с 1 (типа числа) с использованием двойного равенства, он возвращает True, поскольку оба значения являются 1.

Но по сравнению с использованием Triple равна, он возвращает false, потому что каждое значение имеет другой тип данных.

Ожидание обратных вызовов, чтобы быть синхронным

Обратные вызовы – это так, как JavaScript обрабатывает асинхронные операции. Однако обещания и Async/ждут, являются предпочтительными методами для обработки асинхронных операций, потому что несколько обратных вызовов приводят к обратный ад .

Обратные вызовы не Синхронный Отказ Они используются в качестве функции, которая должна называться после операции, когда задержка выполнения завершена.

Пример глобальный Setimeate Функция, которая принимает функцию обратного вызова в качестве первого аргумента и продолжительность (в MS) в качестве второго аргумента, как:

function callback() {
    console.log("I am the first");
}
setTimeout(callback, 300);
console.log("I am the last");
// output
// I am the last
// I am the first

После 300 миллисекунд вызывается функция обратного вызова. Но до того, как он завершится, остальная часть кода работает. Это причина, по которой последний Console.log был запущен первым.

Общая ошибка разработчиков, – это неверно истолковывать обратные вызовы как синхронные. Например, обратный вызов, который возвращает значение, которое будет использоваться для других операций.

Вот эта ошибка:

function addTwoNumbers() {
    let firstNumber = 5;
    let secondNumber;
    setTimeout(function () {
        secondNumber = 10;
    }, 200);
    console.log(firstNumber + secondNumber);
}
addTwoNumbers();
// NaN

Нан Это выход, потому что второе количество не определен. На момент работы FIRSNUMER + WIFTNUMER , второе количество все еще неопределен, потому что Setimeate Функция выполнит обратный вызов после 200 мс. .

Лучший способ подойти к этому для выполнения остальной части кода в функции обратного вызова:

function addTwoNumbers() {
    let firstNumber = 5;
    let secondNumber;
    setTimeout(function () {
        secondNumber = 10;
        console.log(firstNumber + secondNumber);
    }, 200);
}
addTwoNumbers();
// 15

Неправильные ссылки на это

Это это обычно Концепция неправильно понятия в JavaScript. Использовать Это В JavaScript вам действительно нужно понимать, как он работает, потому что он работает немного по-разному по сравнению с другими языками.

Вот пример распространенной ошибки при использовании Это :

const obj = {
    name: "JavaScript",
    printName: function () {
        console.log(this.name);
    },
    printNameIn2Secs: function () {
        setTimeout(function () {
            console.log(this.name);
        }, 2000);
    },
};
obj.printName();
// JavaScript
obj.printNameIn2Secs();
// undefined

Первый результат – JavaScript потому что Это. Немейте Правильно указывает на объект имени свойства. Второй результат – undefined потому что Это потерял ссылку на свойства объекта (включая имя).

Это потому, что Это Зависит от объекта, вызывающего функцию, в которой она живет. Есть Это Переменная в каждой функции, но Объект, который он указывает, определяется объектом, вызывающим его.

Это в obj.printname () Очки прямо в obj Отказ Это В obj.printnamein2Secs Очки прямо в obj Отказ Но Это В функции обратного вызова Setimeate Не указывает на любой объект, потому что ни один объект не назвал его.

Для объекта, чтобы позвонить совокупность что-то вроде obj.settimeout ... будет выполнен. Поскольку используется объекта, вызывающего эту функцию, используется объект по умолчанию (который является окно ).

имя Не существует в окне, что приводит к undefined Отказ

Лучшие способы сохранить ссылку на Это В совокупность это использовать связывать , Звоните , Применить Или функции стрелки (введены в ES6). В отличие от нормальных функций, функции стрелки не создают свои собственные Это Отказ

Итак, следующее сохранит свою ссылку на Это :

const obj = {
    name: "JavaScript",
    printName: function () {
        console.log(this.name);
    },
    printNameIn2Secs: function () {
        setTimeout(() => {
            console.log(this.name);
        }, 2000);
    },
};
obj.printName();
// JavaScript
obj.printNameIn2Secs();
// JavaScript

Игнорировать объективную мутумамность

В отличие от примитивных типов данных, таких как строка, номер и т. Д. В объектах JavaScript представляет собой ссылочные типы данных. Например в объектах ключа-значений:

const obj1 = {
    name: "JavaScript",
};
const obj2 = obj1;
obj2.name = "programming";
console.log(obj1.name);
// programming

obj1 и obj2. Обладайте той же ссылкой на местоположение в памяти, когда объект сохраняется.

В массивах:

const arr1 = [2, 3, 4];
const arr2 = arr1;
arr2[0] = "javascript";
console.log(arr1);
// ['javascript', 3, 4]

Обычная ошибка разработчиков заключается в том, что они игнорируют эту природу JavaScript и это приводит к неожиданным ошибкам. Например, если 5 объектов имеют одинаковую ссылку на тот же объект, один из объектов может вмешиваться в свойства в широкомасштабной кодовой базе.

Когда это произойдет, любая попытка доступа к исходным свойствам вернет не определенную или, возможно, бросить ошибку.

Лучшая практика для этого – всегда создавать новые ссылки на новые объекты, когда вы хотите дублировать объект. Для этого оператор остальных ( ... Введенные в ES6) – идеальное решение.

Например, в объектах ключа-значений:

const obj1 = {
    name: "JavaScript",
};
const obj2 = { ...obj1 };
console.log(obj2);
// {name: 'JavaScript' }
obj2.name = "programming";
console.log(obj.name);
// 'JavaScript'

В массивах:

const arr1 = [2, 3, 4];
const arr2 = [...arr1];
console.log(arr2);
// [2,3,4]
arr2[0] = "javascript";
console.log(arr1);
// [2, 3, 4]

Сохранение массивов и объектов для хранения браузера

Иногда, работая с JavaScript, разработчики могут захотеть воспользоваться LocalStorage для сохранения ценностей. Но распространенная ошибка пытается сохранить Массивы и объекты как есть в LocalStorage Отказ LocalStorage только принимает строки.

В попытке сохранить объекты, JavaScript преобразует объект в строку. Результатом является [Объект объекта] Для объектов и строки, разделенную запятую для элементов массива.

Например:

const obj = { name: "JavaScript" };
window.localStorage.setItem("test-object", obj);
console.log(window.localStorage.getItem("test-object"));
// [Object Object]
const arr = ["JavaScript", "programming", 45];
window.localStorage.setItem("test-array", arr);
console.log(window.localStorage.getItem("test-array"));
// JavaScript, programming, 45

Когда объекты сохраняются, как это становится трудно получить доступ к ним. Для примера объекта доступа к объекту, как .name приведет к ошибке. Это потому, что [Объект объекта] Это строка сейчас, без Имя имущество.

Лучший способ сохранить объекты и массивы в местном хранилище, используя JSON.Stringify (для преобразования объектов на строки) и Json.parse (для преобразования строк на объекты). Таким образом, доступ к объектам становится легким.

Правильная версия кода выше будет:

const obj = { name: "JavaScript" };
window.localStorage.setItem("test-object", JSON.stringify(obj));
const objInStorage = window.localStorage.getItem("test-object");
console.log(JSON.parse(objInStorage));
// {name: 'JavaScript'}
const arr = ["JavaScript", "programming", 45];
window.localStorage.setItem("test-array", JSON.stringify(arr));
const arrInStorage = window.localStorage.getItem("test-array");
console.log(JSON.parse(arrInStorage));
// JavaScript, programming, 45

Не использует значения по умолчанию

Настройка Значения по умолчанию В динамических переменных очень хорошая практика для предотвращения неожиданных ошибок. Вот пример распространенной ошибки:

function addTwoNumbers(a, b) {
    console.log(a + b);
}
addTwoNumbers();
// NaN

Результатом является Нан потому что А Это undefined И B Это undefined . Используя значения по умолчанию, подобные ошибки могут быть предотвращены. Например:

function addTwoNumbers(a, b) {
    if (!a) a = 0;
    if (!b) b = 0;
    console.log(a + b);
}
addTwoNumbers();
// 0

Альтернативно, функция значения по умолчанию, введенная в ES6, может использоваться так:

function addTwoNumbers(a = 0, b = 0) {
    console.log(a + b);
}
addTwoNumbers();
// 0

Этот пример, хотя и минимальный, подчеркивает важность значений по умолчанию. Кроме того, разработчики могут предоставлять ошибки или предупреждающие сообщения, когда ожидаемые значения не предусмотрены.

Неправильное название переменных

Да, разработчики все еще делают эту ошибку. Наименование сложно, но разработчики действительно нет выбора. Комментарии – это хорошая практика в программировании, и так называется переменные .

Например:

function total(discount, p) {
    return p * discount
}

Переменная скидка В порядке, но как насчет P Или Всего ? Всего что? Лучшая практика для вышесказанного будет:

function totalPrice(discount, price) {
    return discount * price
}

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

Переменные именования правильно позволит вкладчикам легко понять, как работает проект.

Проверка для логических ценностей

const isRaining = false
if(isRaining) {
    console.log('It is raining')
} else {
    console.log('It is not raining')
}
// It is not raining

Это обычная практика для проверки Логические ценности Как видно в вышеуказанном коде. Хотя это в порядке, ошибки, установленные при тестировании некоторых значений.

В JavaScript, свободное сравнение 0 и ложь Возвращает правда и 1 И правда Возвращает правда Отказ Это означает, что если Испруги Был 1 , Испруги Будет правда Отказ

Это также ошибка, часто производимая в объектах. Например:

const obj = {
    name: 'JavaScript',
    number: 0
}
if(obj.number) {
    console.log('number property exists')
} else {
    console.log('number property does not exist')
}
// number property does not exist

Хотя Номер Собственность существует, obj.number Возвращает 0 , что является Falsy Значение, поэтому еще блок выполнен.

Поэтому, если вы не уверены в диапазоне значений, которые будут использоваться, логические значения и свойства в объектах должны быть проверены следующим образом:

if(a === false)...
if(object.hasOwnProperty(property))...

Запутанное дополнение и конкатенация

Знак плюс (+) Имеет две функции в JavaScript: добавление и конкатенация. Дополнение для цифр и конкатенации для строк. Некоторые разработчики часто злоупотребляют этим оператором.

Например:

const num1 = 30;
const num2 = "20";
const num3 = 30;
const word1 = "Java"
const word2 = "Script"
console.log(num1 + num2);
// 3020
console.log(num1 + num3);
// 60
console.log(word1 + word2);
// JavaScript

При добавлении строк и цифр JavaScript преобразует номера на строки и объединяет все значения. Для добавления чисел выполняется математическая операция.

Заключение

Есть, конечно, больше ошибок (некоторые тривиальные, некоторые серьезные), чем перечисленные выше. Так что просто убедитесь, что вы остаетесь в курсе событий на языке.

Изучение и избегание этих ошибок поможет вам построить лучшие и надежные веб-приложения и инструменты.

Оригинал: “https://www.freecodecamp.org/news/nine-most-common-mistakes-developers-make-in-javascript/”

Сбивает с толку задания (=) и равенства (==, ===) операторов

Ожидание обратных вызовов, чтобы быть синхронным

Неправильные ссылки на это

Игнорировать объективную мутумамность

Сохранение массивов и объектов для хранения браузера

Не использует значения по умолчанию

Неправильное название переменных

Проверка для логических ценностей

Запутанное дополнение и конкатенация

Заключение

Читайте ещё по теме: