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

Эту статью в блоге написал Рупеш Шарма, также известный как @hackyrupesh.

1. Непреднамеренные глобальные переменные

Проблема

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

Пример

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

В приведенном выше примере userName объявляется без var, let или const, поэтому оно автоматически становится глобальной переменной. Это может привести к неожиданному поведению, особенно если имя пользователя позже используется в другом месте кода.

Решение

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

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

Ссылки

• Сеть разработчиков Mozilla (MDN): переменные JavaScript

2. Неправильное использование этого ключевого слова

Проблема

Значение this в JavaScript может меняться в зависимости от контекста, в котором вызывается функция. Это может привести к неожиданному поведению, особенно при использовании обратных вызовов или обработчиков событий.

Пример

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

В этом примере ключевое слово this внутри приветствия относится к глобальному объекту (или неопределенному в строгом режиме), когда оно передается в качестве обратного вызова в setTimeout, а не к пользовательскому объекту.

Решение

Используйте функции стрелок или функцию связывания(), чтобы гарантировать, что объект остается привязанным к правильному объекту.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

В качестве альтернативы, использование стрелочных функций также может решить проблему, поскольку у них нет собственного контекста this.

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

Ссылки

• MDN: это на JavaScript

3. Неопределенная и нулевая путаница

Проблема

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

Пример

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

Здесь user.age имеет значение null, но условие if считает его ложным. Это может вызвать проблемы, если значение null должно быть допустимым состоянием.

Решение

Всегда явно проверяйте наличие неопределенного и нулевого значений, если оба являются допустимыми значениями в вашем приложении.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

Использование строгого равенства (===) также может помочь отличить неопределенное значение от значения null.

Ссылки

• MDN: ноль
• MDN: Не определено

4. Ад обратного вызова

Проблема

Функции обратного вызова — это распространенный способ обработки асинхронных операций в JavaScript. Однако когда они вложены друг в друга, они могут создавать глубоко вложенные структуры, часто называемые «адом обратных вызовов». Это затрудняет чтение, поддержку и отладку кода.

Пример

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

Эту глубоко вложенную структуру сложно отслеживать и еще труднее отлаживать.

Решение

Используйте Promises или async/await, чтобы сгладить структуру и сделать код более читабельным.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Или, используя async/await:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

Ссылки

• MDN: Обещания
• MDN: асинхронный/ожидание

5. Проблемы с точностью чисел с плавающей запятой

Проблема

JavaScript использует стандарт IEEE 754 для представления чисел, что может привести к проблемам с точностью, особенно при арифметике с плавающей запятой. Это может привести к неожиданным результатам вычислений.

Пример

console.log(0.1   0.2); // Outputs: 0.30000000000000004
console.log(0.1   0.2 === 0.3); // Outputs: false

Результат 0,1 0,2 не совсем равен 0,3 из-за ошибок точности чисел с плавающей запятой.

Решение

Чтобы избежать этого, можно округлить результат до фиксированного количества десятичных знаков.

function isEqual(a, b) {
    return Math.abs(a - b) 



Альтернативно работайте с целыми числами, масштабируя числа перед выполнением операций, а затем уменьшая их обратно.



console.log((0.1 * 10   0.2 * 10) / 10); // Outputs: 0.3





  
  
  Ссылки

• MDN: Номер.ЭПСИЛОН
• Проблема с арифметикой с плавающей запятой

Заключение

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

этот блог написан Chatgpt ??