вернуться назад

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

Usetech
Александр Малиновский
Ведущий разработчик

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

1123.png

445.png

Именно поэтому многие начинающие специалисты отдают предпочтение именно 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

​ 

Loading

Мы обрабатываем файлы cookie для корректной работы сайта и персонализации сервисов, в т.ч. с использованием метрических программ и систем аналитик. Продолжая пользоваться сайтом, Вы соглашаетесь с использованием файлов cookie. Если вы не хотите, чтобы ваши данные обрабатывались, пожалуйста, ограничьте использование файлов cookie в настройках браузера. Более подробная информация на странице Политика конфиденциальности.
Принять
Мы обрабатываем файлы cookie для корректной работы сайта и персонализации сервисов, в т.ч. с использованием метрических программ и систем аналитик. Продолжая пользоваться сайтом, Вы соглашаетесь с использованием файлов cookie. Если вы не хотите, чтобы ваши данные обрабатывались, пожалуйста, ограничьте использование файлов cookie в настройках браузера. Более подробная информация на странице Политика конфиденциальности.
Принять