Мы с вами знаем, что JavaScript — очень объемный язык программирования с различными вспомогательными библиотеками, фреймворками, базами данных и дополнительным функционалом. Нагромождение новой информации может отпугнуть начинающего программиста. Но вспомним слова автора книги «Вы не знаете JavaScript» Кайла Симпсона: «На JS сначала пишут код, а уже потом выясняют, как он работает» — давайте разберемся, как же его учить.
В этой статье я предлагаю пройтись по основным ошибкам, которые допускают новички при изучении JS. Читайте и запоминайте, на что обратить внимание во время самообучения и на собеседовании.
Учитесь поступательно
Достаточно взглянуть на роадмап разработчика, чтобы убедиться, насколько обширна экосистема JS и как много на первый взгляд надо выучить. Увидев такой массив информации, многие начинающие разработчики сами загоняют себя в ловушку и ошибочно думают, что это все необходимо знать сразу. Они пытаются разобраться со всей около JS экосистемой, не углубляясь в сам JS. Перескакивая между темами, они в итоге знают многое поверхностно. Такой подход не сделает их экспертами ни в одной из областей. Несмотря на то, что JavaScript быстро изменяющийся и растущий язык программирования, он имеет ряд фундаментальных принципов и базовых тем. Они используются и будут использоваться в будущем на проектах любой сложности.
Мое мнение: роадмап начинающего JS-разработчика должен выглядеть примерно так:
По такому плану мы учим основы основ:
как работает интернет — думаю, тут не надо объяснять, зачем это знать :)
верстку — да, этим тоже приходится регулярно заниматься JS-разработчику;
базовый JS — надо не просто знать, как объявить переменную, а все тонкости языка;
Git — незнание Git’а может отнимать драгоценное время на решение его проблем во время стажировки на проекте. Проверенный факт :)
фреймворк JS — я бы для начала взял React, но советую посмотреть все доступные фреймворки и выбрать себе для старта наиболее привлекательный. А для всех остальных задачи всегда найдутся.
За каждым шагом здесь скрывается обширный массив данных. Разберитесь, чем отличается клиент от сервера, углубитесь в HTML и CSS и определитесь, какой JS-фреймворк (Angular, React или Vue) больше всего соответствует вашим ожиданиям от профессии, и приступайте к обучению вдумчиво. С этими знаниями у вас будет больше шансов успешно пройти первое собеседование. А глубокое понимание основ JavaScript останется с вами на всю жизнь. Отсюда вытекает первое правило: подходите к изучению JavaScript систематически, не распыляйте свое внимание в надежде изучить все и сразу.
Глубоко вникайте в базовые темы
Даже в них бывают такие подводные камни, которые изначально не очевидны, но потом они могут попасться вам в коде на реальных проектах. И в такой момент надо понимать, что там происходит, и знать, как с этим быть. Вот классический пример вопроса на интервью для новичка
Зачастую половина начинающих разработчиков, отвечая на вопрос, что будет с переменными a, b, c, допускают ошибки. Многие считают, что тут должны возвращаться булевые значения — true или false. Но при таком коде, если все значения истинные, вернется последнее истинное значение или первое ложное, если хоть бы одно из них ложное. В нашем случае — 2, 18, 0 соответственно. Вот еще пример самой попсовой задачи из мира JS:
Полностью разобравшись лишь с одним этим примером, вы разберетесь и в таких концепциях, как
области видимости;
замыкания;
разница в работе переменных;
всплытие переменных;
как работает setTimeout и асинхронный JS.
Из этого следует второе правило: разбирая такие примеры, глубже вникайте в решения, которые предлагаются.
Не мыслите «стандартами»
Часто на разных ресурсах встречается разделение на «старый стандарт JS» и «новый стандарт JS». Якобы фичи из ES6, ES7 и последующих версий JavaScript — это дополнительные инструменты, которые можно выучить, устроившись в команду. У начинающих программистов складывается ошибочное впечатление, что можно учить их по отдельности, но это не так. Все фичи — деструктуризация, стрелочные функции, Spread-операторы, промисы, классы — уже давно используются, как современный стандарт языка. Знать, как с этим работать, крайне необходимо.
Теория без практики — JS на ветер
Допустим, вы прошли свое первое собеседование на вакансию Junior JavaScript Developer и показали потрясающее знание теории. Вас берут на стажировку в команду и доверяют первый таск. И тут вы понимаете, что не в состоянии самостоятельно написать ни строчки кода! Самое время упомянуть о третьем важном правиле: всегда укрепляйте свои теоретические знания на практике. Благодаря систематической практике вы научитесь не только быстро решать прикладные задачи, но и сможете ориентироваться в основных концепциях работы JavaScript. Для потенциальных заказчиков — это ценный скил.
Попытайтесь решить такую задачу, которая может повстречаться вам в любом тестовом задании. Существует массив объектов, у каждого из которых есть своя цена. Выведите пользователю конечную сумму выбранных им товаров в корзине.
Уверен, многие новички легко распишут решение через создание цикла при помощи for и переменной result с присвоенным ей нулевым значением. Выглядит не очень изящно, но зато работает, верно?
Но как можно переиспользовать этот метод для другой последовательности выбранных товаров — видимо оборачивать это все в функцию, но зачем нам это делать, если JS давно уже предоставляет инструменты для таких задач, вот пример с reduce:
Вот еще пример:
Естественно, этот код можно и дальше улучшать. Однако даже его достаточно, чтобы попрактиковать работу с запросами, массивами, объектами. В интернете есть множество бесплатных API, которые позволяют отрабатывать навыки работы с подобным функционалом. Например, такие ресурсы:
API «Звездных войн»: SWAPI ;alexwohlbruck/cat-facts ;
jikan.docs.apiary.io;
вездесущий гугл :)
Почему код должен быть лаконичным и понятным
Пренебрежительное отношение к неймингу переменных в коде — еще одна ошибка джунов. Читабельность кода является основным критерием того, что вас поймут другие программисты из вашей команды, в том числе вы сами, вернувшись к коду через пару месяцев. Для примера разберем массив пользователей, каждому из которых присвоено значение имени и возраста:
Предположим, при работе с данным массивом вы использовали метод обработки Map, что логично, но почему-то вы назвали параметр анонимной функции вы назвали itm:
Почему здесь это следует воспринимать как ошибку, ведь с этим или другим названием переменной все будет работать? Ошибка здесь, конечно же, не программная, а логическая. Если вы работаете с массивом данных users, почему бы не назвать каждый элемент этого массива user? Таким образом вы не будете получать гневные фидбэки от других инженеров о том, что они попросту не понимают, за что отвечает и или иная переменная в коде.
Вот еще один пример ненужного нагромождения символов в коде:
С помощью простой деструктуризации объектов массива (name, surname, age) можно получить лаконичный и понятный каждому программисту текст:
Так мы подошли к четвертому правилу: вырабатывайте хорошие привычки во время обучения, и вам не надо будет привыкать к этому во время работы.
Учитесь учиться
В программировании важно никогда не останавливаться на достигнутом. IT-сфера стремительно развивается: появляются новые фреймворки и метрики работы с данными. Если постепенно не осваивать их, вы рискуете надолго зависнуть в рутинных и однообразных задачах. А ведь вы не за этим пришли в профессию, верно? :) Обладая базовыми навыками программирования на JS, похвалите себя, переведите немного дух и возвращайтесь к изучению полноценного роадмапа по JavaScript.