Типичные ошибки начинающих веб-разработчиков на JavaScript



JavaScript один из самых популярных языков программирования. Согласно индексу TIOBE за последние 2 года занимает стабильное 7 место, а вот количество пулреквестов в GitHub – JavaScript уверенно лидирует (более 20%).


Именно поэтому многие начинающие специалисты отдают предпочтение именно JS. Но достаточно часто студенты, на старте своей карьеры, сталкиваются со сложными задачами, ответы на которые могут дать только профессиональные разработчики с огромным опытом за плечами.




Александр Малиновский, ведущий Frontend-разработчик Usetech, в блоге онлайн-школы Loftschool рассказал о типичных ошибках начинающих веб-разработчиков на JavaScript, а также показал примеры конкретных ошибок в коде, которые допускают новички.
Подробнее читайте в статье.
— Не интересуются историей того инструмента, на котором они пишут.
Это приводит к непониманию основного функционала.Когда я собеседую джунов, вижу, что большинство из них не знают принципов работы JavaScript, мало того они не понимают зачем им нужно это знать. Потому что базовые вещи, которые от них требуют – это работать на Фреймворке.
Бывает так, что джуну не нужно понимать как это работает «под капотом», какой там язык, как он развивался. Это не ошибка, а простой путь развития джуна, изучающего любой язык программирования, так сказать, в поле.
— Не понимают, как работает V8 движок, под который они пишут код. Что такое функция (из функционального программирования, неблокируемость, асинхронность). Не разбираются в видах типизации (динамическая, строгая).
— Не умеют отлаживать свой продукт. Меня учили, чтобы я умел отлаживать пошагово то, что разрабатываю. Это возможность в любой момент остановить процесс, выяснить, что находится внутри, как это работает и из чего складывается.
— Думают, что callback работает как синхронная функция:
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
Распространенная ошибка разработчиков – неверно истолковывать callback как синхронную функцию. Например, callback, возвращающий значение, которое будет использоваться для других операций.
function addTwoNumbers() {
let firstNumber = 5;
let secondNumber;
setTimeout(function () {
secondNumber = 10;
}, 200);
console.log(firstNumber + secondNumber);
}
addTwoNumbers();
// NaN
При вызове функции addTwoNumbers() произойдёт вычислительная ошибка (NaN)),потому что во время вычисления выражения firstNumber + secondNumber значение переменной secondNumber будет не определено (undefined). Ведь функция, заключенная в setTimeout, выполнится только через 200ms.
Корректным решением здесь будет:
function addTwoNumbers() {
let firstNumber = 5;
let secondNumber;
setTimeout(function () {
secondNumber = 10;
console.log(firstNumber + secondNumber);
}, 200);
}
addTwoNumbers();
// 15
— Неверное использование указателя this:
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, потому что this.name указывает на конкретное поле объекта. Во втором случае будет выведено undefined, так как this потеряло ссылку как на сам объект, так и на поле объекта.
Это связано с тем, что указатель this напрямую зависит объекта вызова, в контексте которого была вызвана функция.
В нашем случае this в obj.printName() явно указывает на obj. Указатель this в obj.printNameIn2Secs() также указкает на obj. Но this в контексте callback-функции внутри setTimeout не будет.
Чтобы явно указать контекст this, под которым мы хотим вызвать функции в рамках setTimeout, нужно использовать методы bind, call, apply или стрелочную функцию. Классическая анонимная функция не создает свой собственный указатель this, а вместо этого использует глобальный контекст:
const obj = {
name: «JavaScript»,
printName: function () {
console.log(this.name);
},
printNameIn2Secs: function () {
setTimeout(() => {
console.log(this.name);
}, 2000);
},
};
obj.printName();
// JavaScript
obj.printNameIn2Secs();
// JavaScript




Поднимаем стенд Spring микросервисов в Kubernetes



Исследовательские сценарии как метод раскрытия преступления (Часть вторая и заключительная) — свежая...



Исследовательские сценарии как метод раскрытия преступления — статья на Habr



Повышение уровня observability на примере Django + Celery с помощью Kibana, Elastic APM, Prometheus




Идеальная IT-команда глазами Quality Assurance


