Типичные ошибки начинающих веб-разработчиков на 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

​