10 вещей, которые нужно изучить всем начинающим разработчикам JavaScript

В 1995 году, больше 20 лет назад, на свет появился язык программирования JavaScript (кстати, первое его название было Mocha). Сегодня JavaScript применяется во всех WEB-проектах, именно он мгновенно обрабатывает все события, инициируемые пользователями и обменивается информацией с сервером без перезагрузки страницы. Без JavaScript мы не смогли бы даже поставить «лайк» без перезагрузки страницы, не говоря уже об остальных элементарных действиях. Для всех тех, кому интересна эта тема, Rubrain.com подготовил перевод статьи «10 вещей, которые необходимо знать, чтобы стать разработчиком JavaScript», которая будет весьма полезна как начинающим, так и опытным разработчикам. С оригиналом статьи можно ознакомиться по ссылке.

Предположу, что вы – веб-разработчик. Надеюсь, у вас все хорошо, есть отличная работа, может быть вы фрилансер или работаете на себя. Возможно, вы только начинаете как веб-разработчик, или работаете программистом уже долгое время.

Как бы комфортно вы себя не чувствовали при работе с JavaScript, всегда полезно освежить в памяти те темы, которые могут быть полезны вам в первую очередь. Ниже 10 вещей, которые вы обязательно должны изучить, прежде чем вы сможете назвать себя мастером в JavaScript.

Вероятно, самая основная тема во всем списке. Одна из самых важных, может быть, самая важная. Если вы не знаете, как действовать со своим кодом, вам будет трудновато. Знание входов и выходов из основного потока управления, безусловно, необходимо.

if else – если вы не знаете что это, как вы писали код раньше?

switch – по сути это тоже самое, что “if else”, но красноречивее, используйте его при работе с несколькими кейсами сразу.

for – не повторяйтесь, для этого придуманы циклы. Кроме стандартного цикла “for” вам также очень пригодятся циклы “for of”` и “for in”. Большим преимуществом for-циклов является то, что они блочные, поэтому вы можете использовать в них async/await. Расширенные условия проверки (conditionals) – использование условных (тернарных) операторов и логических операторов может значительно облегчить вашу жизнь, особенно когда вы пытаетесь что-то встроить, а значит вы не хотите сохранять значения, чтобы использовать их в дальнейшем.

Пример:

// ternary

console.log(new Date().getHours() < 12 ? ‘Good Morning!’ : ‘Time for a siesta’)

// logical operators

const isJsMaster = prompt(‘Are you a JavaScript master?’) === ‘true’

console.log(isJsMaster && ‘proficient coder’)

У меня это заняло немало времени. Неважно, работаете ли вы в фронтэнде или бэкэнде первый год или около того, вы, вероятно, по умолчанию используете console.log или, возможно, console.error для обработки ошибок. Чтобы создавать хорошие приложения, вам определенно нужно заменить “ленивые логи” на качественно обработанные ошибки. Возможно, вы захотите узнать, как создать свой собственный конструктор ошибок для “перехватывания” ошибок и наглядной демонстрации пользователю в чем именно проблема.

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

Пример:

const calcShape = (width, height, depth, color, angle) => {…}

const calcShape = ({width, height, depth, color, angle}) => {…}

Это очень важный аспект JavaScript. Либо вы извлекаете данные из бэкенда, либо вы обрабатываете запросы асинхронно непосредственно в бэкенде. Практически во всех случаях использования вы столкнетесь с асинхронностью и ее предупреждениями. Если вы не знаете, что это такое, вы, вероятно, просто увидите странную ошибку, которую попытаетесь исправить, потратив на это несколько часов. Если вы все-таки знаете, что это такое, но на самом деле не представляете, что с этим делать, вы попадете в “ад обратных вызовов”. Лучшим решением будет использование промисов и/или async/await в ваших приложениях.

Это очень интересная тема. Обычно она не принимается в расчет современными разработчиками. Возможно, вы изучали jQuery и перед вами никогда не вставала необходимость учиться навыкам работы с DOM, может быть, вы просто используете фреймворк фронтэнда, где редко требуются пользовательские манипуляции с DOM.Тем не менее, я думаю, что это важная часть понимания JavaScript, по крайней мере, во фронтэнде. Знание того, как работает DOM и как получить доступ к его элементам, дает вам глубинное понимание того, как работают веб-сайты. Кроме того, момент, когда вам нужно будет выполнить действия с DOM все равно рано или поздно наступит, даже если вы используете современные интегрированные фреймворки, и вы определенно не хотите добавлять jQuery в ваш package.json всего лишь для доступа к элементу.

Даже будучи разработчиком фронтэнда, вы должны знать основы node.js. В идеале вы также должны понимать, как подготовить простой Express-сервер, добавить несколько маршрутов или изменить существующие. JavaScript отлично подходит для написания скриптов, которые помогут вам автоматизировать множество задач. Следовательно, умение читать файлы, работать с файловыми путями или буферами дает вам хороший набор инструментов для создания всего что угодно.

Дискуссии вокруг функционального и объектно-ориентированного программирования никогда не заканчиваются. Вы, вероятно, можете достичь одного и того же, используя любой из этих подходов. В JavaScript это еще проще, в вашем распоряжении есть сразу оба подхода. Такие библиотеки, как Lodash, предоставляют вам действительно хороший набор инструментов для создания приложений с функциональным подходом. В настоящее уже даже нет необходимости использовать внешние библиотеки. Многие из наиболее важных функций были реализованы в официальной спецификации JavaScript. Вы определенно должны знать, как использовать map “reduce”, фильтр “forEach” и “find”.

Подобно функциональному подходу, вы также должны ознакомиться с объектно-ориентированным JavaScript, если вы действительно планируете стать профи. Я пренебрегал этой частью в течение долгого времени в своей карьере, используя обходные пути, но иногда определенно гораздо лучше использовать объекты / классы и экземпляры класса для реализации определенных функций. Классы широко используются в React, MobX и кастомных конструкторах.

Большая тройка – это React.js, Angular и Vue.js. Если вы сейчас находитесь в поиске работы, то совершенно точно, что знание одного из перечисленных будет в качестве обязательного условия при приеме. Даже несмотря на то, что они постоянно меняются, важно изучить общую концепцию, чтобы понять, как работают приложения. Кроме того, так намного проще писать приложения. Если вы еще не решили, в какой поезд вы хотите сесть, я предлагаю React.js. Я работал с ним последние пару лет и не пожалел о своем решении.

К сожалению, это большая часть веб-разработки. С одной стороны, я не должен говорить “к сожалению”, потому что это круто – иметь возможность писать код, используя все новейшие функции. С другой стороны, мы всегда должны помнить, что есть старые браузеры, которые могут не поддерживать эти функции, поэтому мы должны перенести наш код в нечто другое, что понимают старые браузеры. Если вы работаете с node.js, вы, вероятно, будете меньше заниматься транспиляцией кода. Фактическим стандартом для транспиляции является babel.js, так что изучите его обязательно. Что касается пакетирования вашего кода и связывания всего вместе, у вас есть несколько вариантов. Webpack долгое время был доминирующим игроком для этих целей. Некоторое время назад Parcel выскочил из ниоткуда и теперь я пользуюсь в основном им, так как он невероятно эффективен и прост в настройке, хотя и не идеален.

БОНУС: Регулярные выражения

Это не относится к JavaScript, но невероятно полезно во многих случаях использования. Вместе с тем – может вас запутать. Знакомство с синтаксисом регулярных выражений определенно займет у вас некоторое время, а запомнить все различные варианты уж точно невозможно.

Update: Тестирование

Как отметил Пол Камма, тестирование является действительно важной частью разработки программного обеспечения, JavaScript не является исключением. При написании кода, вы (надеюсь) тестируете его, прежде чем запускать функцию, даже если она мануальная. Лучшим подходом является использование автоматических тестов, и для этого существуют различные типы тестов – это модульное тестирование, сквозное тестирование, нагрузочное тестирование, тесты безопасности или тесты фронтэнда (например, установлен компонент или нет). Существует множество различных тестовых сред – enzyme, jasmine, mocha, chai и т. д. На данный момент мое любимое решение – ava.js, посмотрите его, если до сих пор не работали с автоматизированными тестами.

Надеюсь, вы уже изучаете все темы, перечисленные выше. Если нет, начинайте работать и попытайтесь стать мастером в JavaScript! Это определенно стоит того. Помните, что практика – это все, что вам нужно. Поэтому даже если вы никогда не работали с этими инструментами или что-то знаете о них, но толком не понимаете, как ими пользоваться, эти знания придут к вам с практикой в ближайшем будущем.