Мы с вами знаем, что 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.