Ошибки, которые не учат: на что обратить внимание при изучении JavaScript

💡 Усі статті, обговорення, новини для початківців — в одному місці. Приєднуйтесь до Junior спільноти!

Привет! Я — Алексей Потюкаев, Software Developer и спикер NIXMultiConf.

У меня есть опыт в проектах, написанных как на чистом JS, так и на различных его фреймворках. Также имеется несколько лет опыта в применении С#. В свободное время я занимаюсь менторством и обучением начинающих разработчиков и выступаю на IT-конференциях.

Мы с вами знаем, что JavaScript — очень объемный язык программирования с различными вспомогательными библиотеками, фреймворками, базами данных и дополнительным функционалом. Нагромождение новой информации может отпугнуть начинающего программиста. Но вспомним слова автора книги «‎Вы не знаете JavaScript» Кайла Симпсона: «‎На JS сначала пишут код, а уже потом выясняют, как он работает» — давайте разберемся, как же его учить.

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

Учитесь поступательно

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

Мое мнение: роадмап начинающего JS-разработчика должен выглядеть примерно так:

По такому плану мы учим основы основ:

• как работает интернет — думаю, тут не надо объяснять, зачем это знать :)
• верстку — да, этим тоже приходится регулярно заниматься JS-разработчику;
• базовый JS — надо не просто знать, как объявить переменную, а все тонкости языка;
• Git — незнание Git’а может отнимать драгоценное время на решение его проблем во время стажировки на проекте. Проверенный факт :)
• фреймворк JS — я бы для начала взял React, но советую посмотреть все доступные фреймворки и выбрать себе для старта наиболее привлекательный. А для всех остальных задачи всегда найдутся.

За каждым шагом здесь скрывается обширный массив данных. Разберитесь, чем отличается клиент от сервера, углубитесь в HTML и CSS и определитесь, какой JS-фреймворк (Angular, React или Vue) больше всего соответствует вашим ожиданиям от профессии, и приступайте к обучению вдумчиво. С этими знаниями у вас будет больше шансов успешно пройти первое собеседование. А глубокое понимание основ JavaScript останется с вами на всю жизнь. Отсюда вытекает первое правило: подходите к изучению JavaScript систематически, не распыляйте свое внимание в надежде изучить все и сразу.

Глубоко вникайте в базовые темы

Даже в них бывают такие подводные камни, которые изначально не очевидны, но потом они могут попасться вам в коде на реальных проектах. И в такой момент надо понимать, что там происходит, и знать, как с этим быть. Вот классический пример вопроса на интервью для новичка.

const resultA = 40 && 2 || 33;
const resultB = (4 * 2) && (3 * 6);
const resultС = 0 && 2

Зачастую половина начинающих разработчиков, отвечая на вопрос, что будет с переменными a, b, c, допускают ошибки. Многие считают, что тут должны возвращаться булевые значения — true или false. Но при таком коде, если все значения истинные, вернется последнее истинное значение или первое ложное, если хоть бы одно из них ложное. В нашем случае — 2, 18, 0 соответственно. Вот еще пример самой попсовой задачи из мира JS:

for (var i = 0; i < 10; i++)  {
setTimeout ( function ()   {
console.log(i);
} ,   1000)  ;                                                          

Полностью разобравшись лишь с одним этим примером, вы разберетесь и в таких концепциях, как

• области видимости;
• замыкания;
• разница в работе переменных;
• всплытие переменных;
• как работает setTimeout и асинхронный JS.

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

Не мыслите «‎стандартами»

Часто на разных ресурсах встречается разделение на «‎старый стандарт JS‎» и «‎‎новый стандарт JS». Якобы фичи из ES6, ES7 и последующих версий JavaScript — это дополнительные инструменты, которые можно выучить, устроившись в команду. У начинающих программистов складывается ошибочное впечатление, что можно учить их по отдельности, но это не так. Все фичи — деструктуризация, стрелочные функции, Spread-операторы, промисы, классы — уже давно используются, как современный стандарт языка. Знать, как с этим работать, крайне необходимо.

Теория без практики — JS на ветер

Допустим, вы прошли свое первое собеседование на вакансию Junior JavaScript Developer и показали потрясающее знание теории. Вас берут на стажировку в команду и доверяют первый таск. И тут вы понимаете, что не в состоянии самостоятельно написать ни строчки кода! Самое время упомянуть о третьем важном правиле: всегда укрепляйте свои теоретические знания на практике. Благодаря систематической практике вы научитесь не только быстро решать прикладные задачи, но и сможете ориентироваться в основных концепциях работы JavaScript. Для потенциальных заказчиков — это ценный скил.

Попытайтесь решить такую задачу, которая может повстречаться вам в любом тестовом задании. Существует массив объектов, у каждого из которых есть своя цена. Выведите пользователю конечную сумму выбранных им товаров в корзине.

const   goodsAddedToCart  -  [ {
name:   'JavaScript' ,
price:   20
}  ,   {

name:   'React' ,
price:   30
} ,   {

name: 'HTML/CSS' ,
price:   202

} ] ;

Уверен, многие новички легко распишут решение через создание цикла при помощи for и переменной result с присвоенным ей нулевым значением. Выглядит не очень изящно, но зато работает, верно?

var  result  =  0;
for   (i = 0;   i   <   goodsAddedToCart.length;   i++)   {
result = result +    goodsAddedToCart[i].price;
} ;

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

goodsAddedToCart.reduce ( (accumulator,  (  price  } )  =>  accumulator  +  price,   0);

Вот еще пример:

const   getAllPeople  =  async   ()  =>  {
   const  response  =  await   fetch( ‘https://swapi.dev/api/people/’} ;
   const  result = await   response.json(  );
   return  result.results;
} ;

const  displayPersonData = ( person, elementToDisplay) =>  {
const personWrapper  = document.createElement ( ‘div’) ; 
elementToDisplay. appendChild (personWrapper) ;
personWrapper. style. margin  = ‘10 px’ ;

for (let [key, value] of Object. entries (person))  {
   const personInfoField  = personWrapper. appendChild (document createElement( ‘div’)) ;
   personInfoField.innerHTML = ‘S { key}  : $ {value} : ‘ ;  
}

const  displayPeople   =   async   ( )  =>  {
   const   people   =   await   getAllPeople( ) ;
   const   documentBody   =   document.querySelector(  ‘body’  ) ;

document.Body.innerHTML   =   ‘  ‘ ;

people. forEach ( (person)   =>   {
      displayPersonData(person,   documentBody) ;
  } ) ;
} ;

Естественно, этот код можно и дальше улучшать. Однако даже его достаточно, чтобы попрактиковать работу с запросами, массивами, объектами. В интернете есть множество бесплатных API, которые позволяют отрабатывать навыки работы с подобным функционалом. Например, такие ресурсы:

• The Star Wars API: SWAPI;
• alexwohlbruck/cat-facts;
• jikan.docs.apiary.io;
• вездесущий Google :)

Почему код должен быть лаконичным и понятным

Пренебрежительное отношение к неймингу переменных в коде — еще одна ошибка джунов. Читабельность кода является основным критерием того, что вас поймут другие программисты из вашей команды, в том числе вы сами, вернувшись к коду через пару месяцев. Для примера разберем массив пользователей, каждому из которых присвоено значение имени и возраста:

const  users  = [ {
                                                                      name : ‘John ‘ , 
                                                                      age: 20
                                                                    } , { 
                                                                      name: ‘Alex ‘ , 
                                                                       age: 30
                                                                    } , { 
                                                                        name: ‘Thanos ‘ , 
                                                                         age: 32432
                                                                      } ] ; 
                                                                

Предположим, при работе с данным массивом вы использовали метод обработки Map, что логично, но почему-то вы назвали параметр анонимной функции вы назвали itm:

users.map ( (itm)  =>  {
               // Тут 100 строк кода 
           } ) ;

Почему здесь это следует воспринимать как ошибку, ведь с этим или другим названием переменной все будет работать? Ошибка здесь, конечно же, не программная, а логическая. Если вы работаете с массивом данных users, почему бы не назвать каждый элемент этого массива user? Таким образом вы не будете получать гневные фидбэки от других инженеров о том, что они попросту не понимают, за что отвечает и или иная переменная в коде.

Вот еще один пример ненужного нагромождения символов в коде:

const getPersonAppearance  =  (object) => { 
    const personShortDescription  =  object. name + “ “ +  object. surname + 
         “ in his “ + object. age + “looks awesome”;

         // Тут 100 строк кода 
 
         return { 
             personShortDescription, 
             … 
         } 
      }; 

С помощью простой деструктуризации объектов массива (name, surname, age) можно получить лаконичный и понятный каждому программисту текст:

const getPersonAppearance  = ( person ) => { 
                                   const { name, surname, age} = person;
                                   const personShortDescription  =  ‘ S {name} S {surname} in his {age} looks awesome ‘ ;

                                  // Тут 100 строк кода 
                                              return { 
                                                  personShortDescription, 
                                                   … 
                                               } 
                                              }; 

Так мы подошли к четвертому правилу: вырабатывайте хорошие привычки во время обучения, и вам не надо будет привыкать к этому во время работы.

Учитесь учиться

В программировании важно никогда не останавливаться на достигнутом. IT-сфера стремительно развивается: появляются новые фреймворки и метрики работы с данными. Если постепенно не осваивать их, вы рискуете надолго зависнуть в рутинных и однообразных задачах. А ведь вы не за этим пришли в профессию, верно? :) Обладая базовыми навыками программирования на JS, похвалите себя, переведите немного дух и возвращайтесь к изучению полноценного роадмапа по JavaScript.