Примечание. Следующая статья поможет вам: что нужно знать перед тем, как начать
Нет никаких сомнений в том, что JavaScript — это обширный язык программирования с множеством вспомогательных библиотек, фреймворков, баз данных и других дополнительных функций. Накопление новой информации может пугать начинающего программиста. В качестве Кайл Симпсон говорит в «Вы не знаете JavaScript»: «
Я работал над проектами, созданными как на чистом JS, так и на C# в течение нескольких лет. В свободное время я также тренирую и обучаю новых разработчиков и выступаю с презентациями на ИТ-конференциях. И, основываясь на своем опыте, я собираюсь помочь вам понять, как этому научиться.
В этой статье я хотел бы выделить то, что начинающие изучающие JS должны знать в самом начале учебного процесса. Эти советы могут облегчить процесс обучения и даже могут сделать вас интересным для начала работы с JS.
Итак, давайте двигаться вперед.
Постепенно воспитывайте себя
На первый взгляд дорожная карта разработчика покажет вам, насколько обширна экосистема JS и как много вам нужно понять. Увидев такой массив информации, многие начинающие разработчики заманивают себя в ловушку и ошибочно думают, что нужно знать все сразу.
Они пытаются разобраться во всей экосистеме JS, не углубляясь в сам JS. В конечном итоге они понимают много вещей на поверхности, когда перескакивают с одной темы на другую. Эти разработчики не станут специалистами ни в одной области, если примут эту стратегию.
Несмотря на то, что JavaScript является быстро развивающимся и расширяющимся языком программирования, он основан на ряде фундаментальных идей и базовых тем. С помощью этих методов можно облегчить любой проект любой сложности.
С моей точки зрения, дорожная карта для нового JS-разработчика должна выглядеть так:
Это метод, который мы используем, чтобы понять основы:
Каждый этап этого процесса поддерживается огромным объемом данных. Определите различия между клиентом и сервером, погрузитесь в HTML и CSS и решите, какая среда JS (Angular, React или Vue) лучше всего соответствует вашим профессиональным целям, и начните учиться с умом.
Этот опыт повысит ваши шансы на получение работы. Кроме того, твердое владение основами JavaScript останется с вами на всю оставшуюся жизнь. В результате первое правило подходить к JavaScript методично, а не рассеивать внимание с целью изучения всего сразу.
Углубитесь в основные темы
Вы можете найти узкие места даже в базовых темах, которые не сразу заметны, но которые проявляются в коде вашего реального проекта. И в этот момент вам нужно понять, что происходит и как с этим бороться. Вот отличный пример вопроса для интервью для новичка:
константный результатA = 40 && 2 || 33; const resultB = (4 * 2) && (3 * 6); константный результатC = 0 && 2
Часто половина начинающих разработчиков ошибается, отвечая на вопрос, что будет с переменными a, b, c. Многие считают, что здесь должны возвращаться логические значения — true или false.
Но в этом коде, если все значения истинны, будет возвращено последнее истинное значение или первое ложное значение, если хотя бы одно из них ложно. В нашем случае 2, 18, 0 соответственно. Вот еще один пример самой популярной задачи из мира JS:
for (var i = 0; i Если вы полностью усвоите только концепции в этом примере, вы также поймете:
Это приводит ко второму правилу: интерпретируя такие случаи, исследуйте полученные ответы глубже.
Остерегайтесь «стандартов»
На разных ресурсах часто встречается различие между «старым стандартом JS» и «новым стандартом JS». Возможности ES6, ES7 и последующих версий JavaScript якобы являются новыми инструментами, которые можно освоить, став частью команды.
У начинающих программистов есть ошибочное мнение, что их можно выучить отдельно, однако это не так. Деструктуризация, стрелочные функции, операторы Spread, обещания и классы — все это функции, которые уже давно используются в качестве стандарта современного языка. Важно понимать, как с ними работать.
Без практики JS как лист на ветру
Предположим, вы успешно прошли свое первое собеседование на должность младшего разработчика JavaScript и продемонстрировали исключительное теоретическое понимание. Вас принимают на стажировку в команду и дают первое задание.
Затем вы обнаружите, что не можете написать ни строчки кода самостоятельно! Теперь самое время упомянуть о третьем важном правиле: всегда применяйте свои теоретические знания на практике. Вы не только научитесь быстро выполнять прикладные задачи, но и узнаете, как ориентироваться в основных принципах JavaScript благодаря тщательной практике. Это полезный навык для потенциальных клиентов.
Попробуйте решить задачу, с которой вы можете столкнуться в любом тестовом задании. Существует список объектов, каждый со своей уникальной ценой. Вывести пользователю окончательную сумму товаров в выбранной корзине.
постоянные товарыAddedToCart – [ {
name: ‘JavaScript’ ,
price: 20
} , {
name: ‘React’ ,
price: 30
} , {
name: ‘HTML/CSS’ ,
price: 202
} ] ;
Я уверен, что многие новички легко опишут решение, создав цикл for и переменную результата с присвоенным ей нулевым значением. Выглядит не очень элегантно, но ведь работает?
переменный результат = 0; for (i = 0; i Но как мы можем переиспользовать этот метод для другой последовательности выбранных товаров — видимо это все надо заворачивать в функцию, но зачем нам это делать, когда JS уже давно предоставляет инструменты для таких задач, вот пример с уменьшение:
goodsAddedToCart.reduce ( (аккумулятор, ( цена } ) => аккумулятор + цена, 0);
Еще один пример:
const getAllPeople = async () => { const response = await fetch(‘https://swapi.dev/api/people/’}; const result = await response.json(); return result.results; } ; const displayPersonData = (человек, elementToDisplay) => { const personWrapper = document.createElement (‘div’) ; elementToDisplay.appendChild (personWrapper) ; personWrapper.style.margin = ’10 px’ ; for (let [key, value] объекта. записи (человек)) { const personInfoField = personWrapper. appendChild (документ createElement(‘div’)); personInfoField.innerHTML = ‘S {key} : $ {value} : ‘ ; } const displayPeople = async() => { const people = await getAllPeople(); const documentBody = document.querySelector(‘тело’); документ.Body.innerHTML = ‘ ‘; люди. forEach ( (человек) => { displayPersonData(person, documentBody) ; } ) ; } ;
Конечно, этот код можно улучшить. Но даже в этом случае достаточно попрактиковаться в работе с поиском, массивами и объектами. В Интернете доступно множество бесплатных API, которые позволят вам попрактиковаться в работе с такими функциями. Например, рассмотрим следующие ресурсы:
Важность лаконичного и ясного кода
Еще одна ошибка, допущенная джуниорами, заключается в том, что они не называют переменные в своем коде. Главное требование для понимания другими программистами в вашей команде или после нескольких месяцев паузы, включая вас самих, — читабельность. В качестве примера рассмотрим массив пользователей, у каждого из которых есть имя и возраст:
постоянные пользователи = [ {
name: ‘John’ ,
age: 20
} , {
name: ‘Alex’ ,
age: 30
} , {
name: ‘Thanos’ ,
age: 32432
} ] ;
Представьте, что вы использовали метод обработки Map при работе с этим массивом, что имело бы смысл, но по какой-то причине вы назвали параметр анонимной функции как itm:
users.map ( (itm) => { // Имеется 100 строк кода } ) ;
Почему это должно считаться ошибкой в данном контексте, когда все будет работать с тем или иным именем переменной? Конечно, ошибка здесь логическая, а не программная. Почему бы не называть каждый элемент массива «пользователем», если вы работаете с массивом пользователей данных?
Таким образом, вы не получите гневных отзывов от других инженеров, которые просто не понимают, что делает та или иная переменная в вашем коде.
Вот еще один пример раздувания кода:
const getPersonAppearance = (object) => { const personShortDescription = object. имя + ” ” + объект. фамилия + “в своем” + объект. возраст + “выглядит потрясающе”; // 100 строк кода return { personShortDescription, … } };
Простым деструктурированием объектов массива (имя, фамилия, возраст) можно получить лаконичный и понятный каждому программисту текст:
const getPersonAppearance = (человек) => { const {имя, фамилия, возраст} = человек; const personShortDescription = ‘ S {имя} S {фамилия} в своем {возрасте} выглядит потрясающе’ ; // 100 строк кода return { personShortDescription, … } };
Итак, четвертое правило: выработав полезные привычки во время обучения, вам не придется корректировать их на рабочем месте.
Быть учеником
В программировании очень важно никогда не заканчиваться на этом. ИТ-индустрия стремительно развивается, появляются новые фреймворки и меры для работы с данными.
Если вы не освоите их постепенно, вы рискуете погрязнуть в повторяющихся и монотонных делах в течение длительного периода времени. Вы не поэтому пришли в профессию, не так ли?
Получив базовые навыки программирования JS, похлопайте себя по плечу, сделайте глубокий вдох и вернитесь к изучению полноценной дорожной карты JavaScript.
