6 функций нативного javascript, о которых вы не знали


Содержание материала:

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

События на элементах управления:

  • submit – пользователь отправил форму .
  • focus – пользователь фокусируется на элементе, например нажимает на .

Клавиатурные события:

  • keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

  • DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

  • transitionend – когда CSS-анимация завершена.

Существует множество других событий. Мы подробно разберём их в последующих главах.

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .

Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on .

К примеру, elem.onclick :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

Убрать обработчик можно назначением elem.onclick = null .

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде ниже button выводит своё содержимое, используя this.innerHTML :

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks , а не sayThanks() .

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .

Так что разметка генерирует такое свойство:

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте setAttribute для обработчиков.

Такой вызов работать не будет:

Регистр DOM-свойства имеет значение.

Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика –- невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.

Синтаксис добавления обработчика:

Для удаления обработчика следует использовать removeEventListener :

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Вот так правильно:

Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener .

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .

Например, таково событие transitionend , то есть окончание CSS-анимации.

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

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта event :

event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

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

При назначении обработчика в HTML, тоже можно использовать объект event , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .

Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.

Мы также можем использовать класс для этого:

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.

Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Итого

Есть три способа назначения обработчиков событий:

  1. Атрибут HTML: onclick=». » .
  2. DOM-свойство: elem.onclick = function .
  3. Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру transtionend и DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.

Мы изучим больше о событиях и их типах в следующих главах.

7 важных функций JavaScript

Я помню ранние дни JavaScript, когда почти для всего нужна была специальная функция, потому что браузеры реализовывали по своему не только новые, но и базовые функции, такие как addEventListener и attachEvent. Времена изменились, но есть несколько функций, которые каждый разработчик должен иметь в своем арсенале, чтобы повысить производительность работы.

debounce

Функция debounce крайне полезна, когда дело доходит до производительности обработчиков событий. Если вы не используете функцию debounce с событиями scroll, resize, key*, вы, вероятно, не правы. Вот функция debounce, которая сделает ваш код более эффективным:

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

Иногда у вас не будет возможности отследить событие наступления желаемого состояния — если события не существует, необходимо периодически проверять определенное состояние:

Такой подход периодического опрашивания уже давно используется в веб и будет использоваться в будущем!

Иногда необходимо, чтобы какая-то функция выполнилась только однажды, подобно событию onload. Код ниже позволит вам добавить такую функциональность:

Функция once гарантирует, что функция будет вызвана только один раз, тем самым позволяет избежать повторной инициализации!

getAbsoluteUrl

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

Обработка атрибута href элемента предоставляет надежный способ получения абсолютного URL.

isNative

Знание того, является ли функция встроенной или нет может быть полезно, если вы собираетесь ее переопределить. Следующий код может вам в этом помочь:

Эта функция выглядит не симпатично, но выполняет свою работу!

insertRule

Все мы знаем, что можно получить список элементов DOM по селектору (с помощью document.querySelectorAll) и для каждого из них добавить атрибут style, но более эффективным будет задать стиль для селектора (как это делается в CSS):

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

matchesSelector

Мы часто валидируем пользовательский ввод, проверяем, что все поля формы заполнены корректно, прежде, чем двигаться дальше. Но как часть мы проверяем элемент? Вы можете использовать функцию ниже для проверки, удовлетворяет ли элемент заданному селектору:

Я привел семь JavaScript-функций, которые каждый разработчик должен иметь в своем арсенале. Есть функции, которые я пропустил? Пожалуйста, поделитесь!

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

Стоит ли учить JavaScript: перспективы, ситуация на рынке труда, мнения экспертов

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

Экскурс в теорию: информация о JavaScript, сферах применения и особенностях языка

JavaScript (JS) — высокоуровневый язык программирования, который поддерживает императивный, функциональный и событийно-ориентированный стили. Относится к языкам с динамической типизацией, входит в группу интерпретируемых языков.

Справка: в разговорной речи специалисты употребляют названия «яваскрипт», «джейэс» и даже «жабаскрипт». Кстати, у нас есть мини-словарь профессионального сленга программистов.

В число основных особенностей JS входят:

  • Динамическая типизация — тип данных определяется в момент присваивания значения константе или переменной.
  • Интерпретируемый язык — код приложения интерпретируется при обращении, не требуется предварительная компиляция.
  • Функции как объекты первого класса, то есть функции в JavaScript можно возвращать из функций, передавать в качестве параметров в другие функции, присваивать переменным.
  • Поддержка прототипного и объектно-ориентированного подхода.
  • Универсальность — все популярные браузеры поддерживают JavaScript.

ES6, современная спецификация JavaScript, поддерживает синтаксис стрелочных функций, дестракчеринг, операторы spread и rest, модули и классы. Эти и другие инструменты делают JavaScript гибким и выразительным языком программирования.

Важная особенность JavaScript — развитая инфраструктура. Вокруг этого языка программирования сформировано многочисленное сообщество. Разработчикам доступны мощные инструменты, например:

  • Библиотеки и фреймворки для создания приложений (React, Vue).
  • Сборщики (Webpack, Gulp).
  • Вспомогательные библиотеки (Lodash, Underscore).
  • Генераторы статических сайтов (Gatsby.js, Next.js).


Сферы применения JavaScript

В первую очередь JavaScript широко используется во фронтенд-разработке. Этот язык вместе с HTML и CSS входит в базовый набор инструментов фронтендера. На JavaScript создаются приложения, которые исполняются в браузере на стороне клиента. Они обеспечивают интерактивность сайтов. Например, когда пользователь заполняет форму и нажимает кнопку «Подписаться», мгновенная реакция на это действие обычно обеспечивается кодом, написанным на JavaScript.

Сферы применения JavaScript не ограничиваются браузерами и веб-приложениями. С помощью этого языка решают такие задачи:

  • Разработка нативных приложений. Например, с помощью фреймворка React Native создаются приложения для Android и iOS.
  • Серверная разработка. Например, Node.js применяется для бэкенд-разработки. Об этом направлении в перспективе выйдет отдельная статья.
  • Разработка десктопных приложений. Например, JS применяется в офисных пакетах Microsoft и OpenOffice, в приложениях компании Adobe.
  • Программирование оборудования и бытовой техники, например, платёжных терминалов, телевизионных приставок.

В данной статье рассматривается перспектива изучения JavaScript для использования в разработке фронтенда.

Популярность, рейтинг и перспективы JavaScript

Как отмечалось выше, по состоянию на середину 2020 года JavaScript входит в число самых популярных языков программирования. JS занимает седьмое место в индексе TIOBE, который составляется на основе статистики поисковых запросов. Этот язык на данный момент популярнее, чем PHP, Swift, Objective-C, Ruby.

JavaScript занимает первое место по популярности в сообществе разработчиков на GitHub. Этот показатель рассчитывается по количеству репозиториев.

Как и PHP, JavaScript можно считать одним из способов быстро войти в разработку. JavaScript-программистов берут на работу веб-студии, которые есть как в крупнейших городах, так и в регионах.

О перспективах JavaScript подробно рассказывают эксперты в комментариях ниже. Стоит обратить внимание на два момента.

Первый: как отмечалось выше, JavaScript обеспечивает интерактивность сайтов и используется в популярных современных браузерах. Эти задачи можно решать и с помощью альтернативных технологий, например, WebAssembly, но это не вопрос краткосрочной перспективы. В ближайшем будущем с большой долей вероятности JS останется основным языком программирования фронтенд-приложений.

Второй момент: в настоящий момент растет популярность прогрессивных веб-приложений (PWA, progressive web apps). Эту технологию активно продвигает Google. Прогрессивные веб-приложения представляют собой гибрид сайта и мобильного приложения. В среднесрочной перспективе у PWA есть хорошие шансы отвоевать значительную долю рынка у нативных приложений.

Для разработки PWA применяется JavaScript. Например, сайты, созданные с помощью генератора Gatsby.js, поддерживают функциональность прогрессивного веб-приложения из коробки. Это ещё один плюс в пользу востребованности JS в ближайшей перспективе.

Сколько платят фронтендерам, или О зарплатах JavaScript-программистов

Заработок JavaScript-программиста зависит от уровня квалификации, региона проживания и работы, режима трудоустройства.

По данным trud.com на май 2020 года, средняя зарплата JavaScript-разработчика в России составляет 100 000 рублей. Больше всего вакансий на этом ресурсе с предложением зарплаты в диапазоне от 62 000 до 121 000 рублей (см. иллюстрацию). Чаще всего фронтенд-разработчики требуются в Москве, Санкт-Петербурге и Новосибирске.

По данным NewHR, вилка зарплат фронтенд-разработчиков уровня middle в июне 2020 года составляла от 160 000 до 190 000 рублей. По информации «Мой круг», медианная зарплата JavaScript-программиста в России во втором полугодии 2020 года составляла 85 000 рублей.

На сайте hh.ru по состоянию на конец июля 2020 года есть 81 вакансия для JavaScript-разработчиков в Казани (город взят для примера). Уровень зарплаты варьируется от 20 000 до 165 000 рублей.

Информацию по своему региону можно получить самостоятельно с помощью сайтов поиска работы.

Перспективы JavaScript: взгляд экспертов

Мы попросили известных в отрасли экспертов поделиться взглядами на перспективу изучения JS, ситуацию на рынке труда и востребованность JavaScript в будущем.

Сергей Рубанов: спрос на рынке труда JavaScript-разработчиков сильно превышает предложение

По вашему опыту, почему стоит изучать JS?

Несмотря на то, что JS имеет свои странности, он невероятно прост для изучения и терпим к ошибкам. Экосистема языка хорошо развита, так что если вы чувствуете в себе силы, то сможете легко настроить более строгие правила для написания кода, используя различные инструменты, позволяющие избегать популярных ошибок или даже добавить статическую типизацию. В данный момент JavaScript — единственный высокоуровневый динамический язык, доступный практически везде, в том числе (и в первую очередь) на веб-страницах. Это позволяет выучить один язык, частично переиспользовать готовые наработки для клиента, сервера, в роботостроении, для интернета вещей, даже для машинного обучения. А ещё у JavaScript огромное, невероятно классное и самое открытое комьюнити.

Какие перспективы у этого языка программирования по сравнению с другими языками?

JavaScript — один из самых распространенных языков в мире. В индексе TIOBE в данный момент он занимает 7 место (и индекс растет), а по количеству репозиториев на GitHub и популярности по результатам опроса Stack Overflow он находится на первом месте и является вторым желаемым языком после Python. Пакетный менеджер npm является самым крупным пакетным менеджером из всех существующих. Все это говорит о том, что перспективы у языка великолепные.

Будет ли он востребован в будущем?

Только недавно стали появляться технологии, которые в чём-то смогут заменить JavaScript в браузерах, но понадобится ещё очень долгое время, прежде чем эти технологии достигнут достаточного уровня развития и научатся всему тому, что может JavaScript. К тому же на сервере и во встраиваемых системах у JavaScript есть много альтернатив, но и там он имеет свою нишу. Многие компании вкладывали и вкладывают огромные деньги в развитие движков, в которых JavaScript исполняется, что позволяет делать язык всё эффективнее и не терять своей актуальности.

Каковы перспективы JS-разработчика на рынке труда?

Спрос на рынке труда JavaScript-разработчиков сильно превышает предложение, отсюда же и хорошие зарплаты. Компании ищут разработчиков любого уровня, в том числе начинающих.

Почему новичку стоит обратить внимание на этот язык?

количество информации, которую можно найти в интернете;

развитая экосистема в виде огромнейшего количества библиотек и инструментов для разработки;

очень хорошее комьюнити;

одного языка достаточно, чтобы писать веб приложения, мобильные приложения, серверы и многое другое;

высокий спрос на рынке труда;

Сергей Рубанов, опытный разработчик и лидер сообществ. Приглашённый эксперт TC39 (комитет, который занимается разработкой языка JavaScript), участник WebAssembly Community Group, член команды Babel, соорганизатор BeerJS Moscow, WebAssembly Moscow, ведущий канала Juliarderity (совместно с Романом Дворновым).

Павел Черторогов: эх, а ведь были времена, когда разработчики стеснялись говорить, что они пишут на JavaScript. Сейчас всё не так

По вашему опыту, почему стоит изучать JS?

JavaScript в последние годы стал набирать безумные обороты.

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

А в браузерах обосновался старичок JavaScript. Причем если лет 5-10 назад было стыдно говорить, что ты программируешь на JavaScript, так как его было сложно считать удобным и производительным языком, то после выхода ES6 удобство резко возросло и продолжает расти благодаря работе комитета TC39 (куда входят куча спецов из больших компаний), который развивает синтаксис языка.

Производительность языка постоянно увеличивается. Но благодаря большому комьюнити, интересу больших интернет гигантов к языку, неуклонно растет количество инструментария, которые сильно облегчает разработку. Например, ESlint (проверка стиля кода), Prettier — автоформатирование кода, Babel — для транспилинга кода и напиcания всяких AST-трансформеров, JIT-компиляторов.

Но что не может не радовать, так это TypeScript, который позволяет писать статически типизированный код (Flowtype проиграл для меня войну). Статическая типизация позволяет писать более стабильный и качественный код, дает плюшки автоподстановки в IDE. В общем, корпоративный сектор все больше задач может доверить миру JavaScript. Современный джаваскрипт с классами, декораторами, интерфейсами, типизацией все больше и больше становится похожим на Java в хорошем смысле этого слова. А если учесть, что JavaScript сейчас работает как на клиенте (в браузере), так и на сервере (NodeJS), то это это для бизнеса открывает возможность писать изоморфные приложения.

Топ-пост этого месяца:  Как в css переопределить стиль приоритетность селекторов

Будет ли этот язык востребован в будущем?

За пару лет популярность JS должна будет только расти. Ведь столько еще чудовищных интерфейсов вокруг, столько мертвых страниц, сгенерированных сервером. JS будет теснить PHP и Ruby.

Так или иначе JavaScript еще будет востребован как минимум лет 10, дальше прогнозировать сложно.

Что угрожает JavaScript/TypeScript:

WebAssembly маячит на горизонте, но он пока еще незрелый. Если проблемы с доступным функционалом и инструментарием. Со временем он отберет часть задач на себя (будет чуть меньше работы JS разработчикам), но убить JS он не сможет (т.к. он использует существующие части виртуальной машины JavaScript и ее среду изоляции).

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

В любом случаем надо постоянно учиться и развиваться, чтоб соответствовать текущему времени. Но, к бабке не ходи, лет через 10 надо точно будет чему-то сильно переучиваться.

Каковы перспективы разработчика JS на рынке труда?

Сейчас есть некий перекос в сторону фронтенд-разработчиков, которые производят wow-эффект на клиентов. К примеру, на Украине сейчас активно ищутся React/Vue/Angular разработчики. И нередко зарплата таких фронтенд-специалистов с опытом 1-2 года по зарплате соизмерима со среднестатистическим Java-бэкендером с опытом 6-8 лет. Нужны легкие деньги после универа?! Вперед в JS!

Почему новичку стоит обратить внимание на JS?

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

Павел Черторогов, архитектор информационных систем, GraphQL-гуру.

Роман Дворнов: JavaScript вряд ли куда-либо денется в ближайшие годы

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

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

Кстати, о новом. JavaScript — один из немногих языков с таким немалым возрастом (был создан в декабре 1995-го), который настолько динамично развивается сегодня. Формально все началось в 2015 году, когда вышла новая редакция ES2015 (или ES6) и было решено выпускать новую редакцию каждый год, хотя на самом деле всё началось задолго до этого. Не каждый год случаются значительные изменения, но изменения происходят и чувствуется темп. Можно следить за работой TC39 (комитет работающий над спецификацией языка), участвовать в обсуждениях предложений, вносить свои предложения и так далее – процесс открыт, и это здорово. К тому же, сегодня имплементаторы внедряют новые фичи накануне принятия новой редакции спецификации языка, а не несколько лет спустя, как это было раньше.

Низкий порог входа всегда был предметом споров: с одной стороны, вовлекается больше людей, с другой — их уровень как специалистов невысок. Это, плюс часто неглубокое изучение, обычно и создает негативное отношение к языку. Чтобы использовать JavaScript эффективно, его нужно изучать полностью, и дополнительно множество смежных областей, а особенно Computer Science, как это делают в случае с другими языками. Все больше задач с применением JavaScript не уступают по сложности задачам решаемым с другими языками.

Если говорить о перспективах, то JavaScript вряд ли куда-либо денется в ближайшие годы. Во-первых, это единственный язык такого класса, поддерживаемый браузерами, и нет предпосылок, что это может поменяться, хотя попытки были. Всё, что создается как альтернатива JavaScript, в конечном итоге конвертируется в него.

Во-вторых, необходимость шарить логику между клиентом и сервером, Server Side Rendering и прочее, укрепляет позиции JavaScript на серверной стороне. В-третьих, тулинг для JavaScript, как и для клиентского веб-стека, по большей части написан на JavaScript.

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

Роман Дворнов, эксперт в области фронтенд-разработки, ведущий канала Juliarderity (совместно с Сергеем Рубановым). Профиль на GitHub.

Андрей Оконечников: будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS

По вашему опыту, почему стоит изучать JS? Какие перспективы у этого языка программирования по сравнению с другими языками?

Несмотря на интересные альтернативы, такие как ReasonML, Kotlin и уже существующие языки, которые компилируются в JS, такие как ClojureScript и Elm, это никак особенно не влияет на всё растущую популярность JS. Причина для того, на мой взгляд, в низком пороге входа и огромной экосистеме (npm). На JS написано несколько миллионов опенсорс модулей, которые можно установить за считанные секунды. Плюс возможность открыть консоль разработчика в браузере и начать писать код.

Развитие распределенных сред разработки, которые работают напрямую из браузера, например CodeSandbox, ещё более уменьшают порог входа для новичков. Инструменты разработки становятся лучше и лучше, позволяя использовать JS в больших командах.

Одновременно с этим, растущая производительность JS runtimes, например V8, делает использование этого языка все более приемлемым на платформах вне веб-браузеров.

Благодаря инициативам ECMA этот язык также очень быстро развивается, получая все более современные фичи.

Уже сейчас JavaScript — один из самых популярных языков программирования в мире. И со временем он только будет набирать популярность благодаря выходу на новые платформы, такие как IoT и тд.

Будет ли JS востребован в будущем?

JavaScript никуда не денется в ближайшее время, хотим мы того или нет. На этом языке уже сейчас написано огромное количество кода, и количество это будет только увеличиваться. И даже если появится более современный язык, веб-браузеры все равно будут вынуждены поддерживать JS. Так устроен web — вечная совместимость. Будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS.

Каковы перспективы разработчика JS на рынке труда? Почему новичку стоит обратить внимание на JS?

Сейчас перспективы как никогда лучше. Особенно связанные с фронтендом. Веб превращается в платформу для по-настоящему сложных приложений, и рынок просто не способен удовлетворить потребность компаний. Но JS не единственный фактор. Умение писать CSS и доступный HTML важны сегодня как никогда. Рынок JS разработчиков наполняется в основном из backend-разработчиков, переквалифицирующихся во frontend. Если вы видите себя во frontend, я бы очень рекомендовал обратить внимание на основы дизайна, user experience, HTML + CSS и, конечно же, JavaScript.

Если вы дизайнер и уже умеете писать разметку и CSS, я бы так же советовал начать изучать JavaScript. В будущем граница между JS и CSS-программистами будет исчезать, так как очень сложно сделать хороший user experience в Web без использования обоих языков.

Андрей Оконечников, фронтенд-разработчик и UI-дизайнер родом из Ярославля, живущий в Вене, Австрия. Более 10 лет он придумывает и разрабатывает пользовательские интерфейсы, используя современные веб-технологии. До этого он работал дизайнером веб-сайтов и пользовательских интерфейсов. Комбинация опыта дизайнера и разработчика помогает ему лучше понимать проблемы пользователей и находить оригинальные решения в пользовательских интерфейсах.

Андрей работал с такими компаниями, как Yandex, JetBrains, Feedly, Netlify и многими другими. Он основатель консалтинг-компании component-driven.io, специализирующейся на дизайн системах и сложных веб-интерфейсах, и создатель macOS приложения цветовой пипетки для разработчиков и дизайнеров ColorSnapper.

Александр Казаченко: на одного подходящего кандидата приходится 10 или более неподходящих, это печалит

По вашему опыту, почему стоит изучать JS?

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

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

Сейчас достаточно большой тренд на разработку приложений под мобильные устройства с использование технологий основанных на браузере.

И на сервере JS тоже имеет свою нишу в виде Nodejs.

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

Но если посмотреть не с точки зрения прагматизма, а с точки зрения энтузиазма, то в этом смысле JS тоже очень привлекателен.

Сейчас существует множество языков, транспилирующихся в JS (TypeScript, CoffeeScript, Kotlin и так далее), много фреймворков и библиотек разного уровня абстрактности, что позволяет разрабатывать на JS так, как нравится именно вам.

Какие перспективы у самого языка программирования в сравнении с другими? Будет ли он востребован в будущем?

Как я отмечал выше, у JS очень большой рынок, где он востребован и где ему нет аналогов (веб-браузер).

Соответственно, можно считать, что в ближайшие лет 10 JS не только не умрет, но и будет активно развиваться.

На какое направление при изучении JS обратить больше внимания — frontend или backend?

Изначально JS применялся сугубо для frontend’а, соответственно и развился он больше в эту сторону. Но это не имеет никакого значения, при выборе направления — frontend или backend. Более значимым в этом выборе будет то, чем интересно заниматься именно вам. Так как язык один и тот же, разница только в окружении.

Какие перспективы у JS-разработчика в работе? Почему новичку стоит обратить внимание на этот язык программирования?

Мне кажется, сейчас у многих на слуху выражение «вкатиться во фронтенд», и это неспроста. Порог вхождения в рынок разработки фронта для обычных веб-сайтов очень низкий, и можно, потратив пару месяцев на обучение, начать на этом зарабатывать.

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

За последние 3 года я прособеседовал не менее 200 человек, и на одного подходящего кандидата приходится 10 или более неподходящих, это печалит.

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

Стоит ли браться за JavaScript: итоги

JavaScript входит в число самых популярных и востребованных языков программирования. Фронтенд-разработчиков ищут в крупнейших городах и регионах, также специалисты могут работать удалённо в штате и в качестве фрилансеров.

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

Примечание: мнение экспертов может не совпадать с мнением администрации и сотрудников Хекслета.

Три секрета массивов в JavaScript, о которых вы могли не знать

Массивы – широко используемый тип данных в языках программирования, который служит для одновременного хранения множества значений. Однако, из-за специфичности некоторых моментов языка JavaScript, массивы обладают некоторым функционалом, о котором часто недоговаривают. В этом посте я рассмотрю три менее известных, но все же важных функций JavaScript массивов, о существовании которых вы могли не догадываться…

Перед началом, хочу отметить, что данный текст является логическим продолжением похожего поста — Четыре полезных JavaScript оператора, о которых вы могли не знать, поэтому переходите по ссылочке и читайте ��

Добавление пользовательских свойств в массивы

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

Фактически, почти все, с чем мы имеем дело в JavaScript, является объектом. По сути есть два типа данных в JavaScriptпримитивы и объекты, но примитивы всегда оборачиваются внутри объектов.

Массивы, функции, даты и т.д. – предопределенные объекты JavaScript, у которых есть встроенные методы, свойства и их собственный стандартизированный синтаксис.

У массивов в JavaScript может быть три различных типов свойств:

  1. Индексы массива также свойства;
  2. Встроенные свойства;
  3. Пользовательские свойства, которые можно добавить самому.

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

Индексы в качестве свойств

В JavaScript для обозначения массивов используют квадратные скобки. Например: var arr = [‘апельсин’, ‘яблоко’, ‘груша’]; .

Индексы элементов массива – в основном свойства, где имена свойств всегда неотрицательные целые числа. Пара индексного элемента массива, подобна паре ключ/значение в объекте.

Индексы – уникальные свойства объекта массива, и в отличие от других встроенных свойств, они могут быть определены только с помощью квадратных скобок т.е например arr[3] = ‘капуста’; .

Встроенные свойства

У массивов также есть встроенные свойства, такие например, как array.length (подробно об length). Свойство length получает целочисленное значение, которое обозначает размер массива. В целом, встроенные свойства могут часто находиться в предопределенных объектах JavaScript как массивы. Вместе со встроенными методами они помогают настраивать универсальные объекты так, чтобы объекты были пригодны для различных дальнейших нужд. К встроенным свойствам можно получить доступ через object.key или через object[‘key’] синтаксис. Поэтому, вы можете также смело записать arr[‘length’] , чтобы получить размер массива.

Создание собственных свойств для массивов объектов

Теперь, давайте поговорим о добавлении ваших собственных свойств к массивам. Массивы — предопределенные объекты, которые хранят различные типы значений в различных индексах. Как правило, при разработке в JavaScript не часто может понадобиться добавить свои свойства в массив, поэтому новички и даже middle разработчики порой не знают о такой возможности. Фактически, если вы хотите рассматривать массив как нормальный объект, добавляя к нему пары ключ/значение, то можно вместо массива использовать объект, уж извините за тавтологию. Но это вовсе не означает, что нет особых случаев, когда вы можете использовать массив как объект, путем добавления одного или нескольких пользовательских свойств к нему.

Например, вы можете добавить пользовательское свойство к массиву, который идентифицирует «вид», или «класс» его элементов, как вы можете увидеть в примере ниже.

Вопросы для собеседования javascript разработчика

Как пройти собеседование js junior разработчику? Что учить? Все здесь!

Собеседование

Первая часть: без воды

  1. Список вопросов по основам (с указанием ссылок на материалы)
  2. Список вопросов по react/redux (с указанием ответов и ссылок)

Вторая часть (невозможно без воды)

  1. Цель собеседования
  2. Про обратную связь
  3. Общие советы
  4. Полезные материалы

Не забывайте, что в группе проводятся разборы тестовых заданий.

На вебинаре были слегка затронуты middle и team-lead, так же разобраны вопросы «из зала».

Список вопросов по основам


  • прицнипы ООП (хороший эффект производит знание трех слов: инкапсуляция, наследование, полиморфизм)
  • типы данных javascript
  • что такое свойство объекта, а что метод
  • написать функцию, add, чтобы вызов add(1)(2) вернул 3 (замыкания)
  • армия функций
  • кофеварка (один раз написать самому, подсматривая в учебник обязательно)
  • знать, что объекты передаются по ссылке
  • как сделать debounce функцию [EN]
  • map, filter, reduce
  • xhr и как его отменить (легко: abort), современный вариант fetch (с отменой все так себе)
  • promise

Список вопросов по React/Redux

Вопросы скопированы из моего ответа на toster.ru

Ответы предоставлены для подписчиков vk группы — Обучение «Без воды». Приходите, научим. Имеется telegram канал.

React

Самые «тяжелые» операции в web — работа с DOM. Реакт оптимизирует эту работу. Как? Virtual DOM + обновление страницы за минимум «телодвижений».

Мгновенно ли срабатывает setState ? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?

setState (документация) — асинхронная функция. Чтобы выполнить, что-либо заведомо после обновления state, нужно использовать запись с callback’ом

Так же, чтобы обновить состояние, основываясь на предыдущее, подойдет следующая запись:

Совет: чтобы быть в курсе подобных вещей, нужно либо читать документацию, либо читать/смотреть какие-то последовательные курсы. Данные знания — фундаментальные, их должен осветить любой уважающий себя автор.

Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента…

«Биндинг» чего-либо, это привязка к контексту. То есть, когда вы находитесь в конструкторе, this ссылается на компонент. Следовательно, если какой-то из методов «прибиндить» (привязать) к this, то он всегда будет иметь внутри себя this ссылающийся на компонент. Так делается, в частности из-за того, чтобы не терять контекст this, когда идет запись не через «жирную arrow функцию».

Для решения через «жирную arrow функцию», требуется плагин transform-class-properties (входит по умолчанию в create-react-app)

в каких методах жизненного цикла стоит выполнять xhr запросы? В каких стоит «обновлять state на основе props«?

Xhr (ajax, асинхронные запросы) — нужно выполнять в момент componentDidMount

Обновление state, на основе props:

Что будет если вызвать this.setState в render методе компонента?

Будут проблемы. Реакт перерисовывает компонент, если state изменился. setState === ситуации «стейт изменился», а «реакт перерисовывает компонент» === render метод. Получается, что будет циклическая перерисовка.

Зачем нужен componenWIllUnmount , приведите пример

CWU подходит для «приборки». Например, у вас есть компонент, который реагирует на onsize (изменение размеров) страницы. Затем вы планируете перейти куда-то, где этого компонента нет. Он будет (will) «размонтирован» (unmount), значит в этот момент нужно снять «слушателя» на ресайз, так как он вам более не нужен.

Контролируемые, не контролируемые компоненты

Не маленький вопрос. Суть: если input не имеет onChange обработчика и value , то он неконтролируемый. Можно сделать ссылку на него с помощью ref . Таким образом, на сабмит формы, можно будет считать данные из инпутов, практически так же, как это делалось бы с нативным DOM. В чем смысл «неконтролируемого инпута»? Такое поведение может заметно сократить количество перерисовок компонента, куда этот input входит. Однако, если у вас обычная форма на несколько полей и более ничего в render тяжелого нет — все будет в порядке и с контролируемым инпутом (таким, в котором value смотрит на state/props и есть onChange)

Как организовать роутинг в реакт приложении?

Смотрим в window.location и на основе этого switch/case’ом выбираем какой компонент рисовать.

Так же можно посмотреть видео, как мы делали Route и Link компоненты на одном из вебинаров. Или почитать текстовую версию.

Зачем нужны propTypes ? Что происходит с ними в production сборке?

Затем, чтобы быстро ориентироваться какие свойства и какого типа (строка, функция и т.д.) ожидает компонент. Проверка propTypes достаточно затратная, поэтому она полностью убрана из production сборки самим реактом.

Сегодня, в 2020м году, на больших проектах propTypes уступают место flow (где, через babel plugin они так же описываются, но строже) или TypeScript‘у.

Как можно удобно «отлаживать» чужой код приложения, написанного на react (намек в сторону React devtools)

Хороший и легкий вопрос на «поболтать». Отладка с помощью console.log, debugger, react devtools, выносом кода компонента на чистый проект и тд тп. Вариантов масса.

Redux

Управление состоянием (данными) всего вашего приложения.

Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое «действие», а что такое «создатель действия»…

Для асинхронных действий многие используют подход, в котором есть «имядействия + request (запрос) _или + success (успех) или + failure (ошибка)». Таким образом удобно обрабатывать случившиеся ситуации в редьюсере (например, показать/скрыть прелоадер, показать ошибку или результат). Конечно, «показывает» — компонент, а в редьюсере мы лишь устанавливаем данные.

Действие (action) — это простой объект с обязательным полем type и не обязательным payload (либо любым другим). Есть соглашение standard flux action (flux, потому что redux переосмыслил/развил идею flux).

Создатель действия (action creator) — это функция, которая возвращает действие.

Пример создателя действия:

Пример действия (напоминаю, это простой объект):

Что такое редьюсер? Можете написать простой редьюсер без react/redux?

Редьюсер, слово производное от функции reduce. Это такая «штука», которая принимает прошлое состояние и возвращает следующее.

По ссылке выше, так же есть пример reduce функции для подсчета суммы чисел.

Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить «терминами» — асинхронный aciton)

Redux-thunk нужен для того, чтобы внутри создателя действия у вас была функция dispatch , чтобы с помощью нее «диспатчить» другие действия. Код redux-thunk’a состоит из 14 строк. Чтобы понимать как это работает, нужно знать как работают middleware.

Как компоненты приложения получают «пропсы» из «стора»?

Компоненты присоединены с помощью функции connect . А на самом верху живет redux компонент

. Provider умеет «прокидывать» пропсы вниз в потомков неявно. Используется старое API — context.

Можно ли (и считается ли это нормальным) использовать state, если используется Redux?

Разумеется да! Это нормально. Если изменяемое состояние компонента не нужно нигде, кроме него самого — это однозначно state.

Почему в reducer’ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.

Потому что redux использует простое сравнение: изменился объект или нет. А два объекта могут быть равны только в том случае, если они содержат ссылку на одно и тоже место в памяти. Следовательно, когда вы в старый объект записываете новое свойство, для redux это «тот же самый» объект и перерисовки не произойдет. Выше в вопросах про основы есть пункт «передача объектов по ссылке«, прочтите его если вам не понятен текст ответа.

Что возвращает функция connect (из react-redux)?

Connect возвращает новый компонент, обернутый в «приконекченный» компонент, в котором как раз и живут свойства, пришедшие из редьюсеров (которые туда любезно прокидывает Provider).

Общие вопросы

Вопросы в стиле: расскажите что это и для чего:

  • package.json
  • Webpack, gulp, и т.д.
  • node.js
  • promise (хороший материал, для тех кто уже хотя бы немного в теме).

Цель собеседования

Если вы стажер/junior и работу необходимо получить любой ценой, то соответственно цель «получить работу«. Когда такое необходимо?

  • у вас нет опыта совсем, но вам интересна тема IT, хочется узнать больше в целом
  • вы жестко привязаны к конкретному месту
    • к городу, непосредственно к месту проживания, и/или компании
  • повышать свои навыки
  • (если самому никак) соглашаться на то, что предлагают и терпеть.

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

В остальных случаях, цель собеседования — вам получить то, что нужно от работодателя, а ему получить то, в чем есть необходимость у компании. Другими словами, договориться о таком сотрудничестве, которое устраивает обоих.

  • бояться, что это последнее собеседование в жизни
  • брать на себя обязательства, которые многократно не под силу
    • но при этом, не бойтесь развития, то есть, некоторый лимит неизвестности и трудности — это в порядке вещей. Набивается опытом. А так же, можно честно сообщить сразу: к сожалению, большой экспертизы не имею, но уже не раз разбирался в подобном, только уровнем пониже.
  • необдуманно врать
  • соглашаться на любые условия
  • задавать вопросы, интересоваться
  • называть зарплату +20-30% от той, на которую вы рассчитываете (разумеется, необходимо заранее поинтересоваться зарплатной вилкой в вашем регионе). Вы либо станете участником торгов, и сторгуетесь до нужного уровня, либо получите бонус. Отказ тоже можно получить, но это слабый фактор для отказа (если речь идет именно про правильные цифры + разумный процент сверху).
  • попросить обратную связь
Топ-пост этого месяца:  Уведомления о медленных страницах в Google Search Console

Про обратную связь

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

Почему можно приходить еще раз? А почему нет! Если снова удастся пройти через фильтр в виде кадрового специалиста и попасть в кабинет на тех.собеседование, то это же круто! Вы уже знаете, какие вопросы были, как минимум их можно обозначить лучше. Хороший специалист задаст и другие, но скорее всего, если вы реально готовились — получится. Да и можно снова спросить — когда зайти еще. Это не шутки, так как многие города, действительно, выдают очень малое количество привлекательных рабочих мест. Можно и побороться!)

Тишина в эфире

Собеседование прошли, ТЗ сделали. Прошла неделя, в ответ ничего.

1) позвонить, поинтересоваться. Постараться получить обратную связь, это поможет стать лучше [1]

2) если обстоятельства позволяют, вычеркнуть контору из списка за неуважение.

[1] иногда, на такие назойливые вопросы могут ответить отпиской или еще хуже — вариантом не в тему. Нельзя верить этому на слово. Если объективно вам кажется, что все было неплохо, но вы получили: вы не подходите нам по уровню, то опять рекомендую уточнить — что именно не так. Ответа скорее всего не будет, но попытка зачтена.

Очень часто может быть так: позицию уже закрыли (пришел кто-то лучше или знакомый, или решили не искать кандидата временно), а с вами то что делать? HR, вообще, уже про вас забыла и с легкой подачи она пишет: «Вашего уровня недостаточно». Для неуверенного джуна это удар.

  • очень скептически относится к тому, что говорят. Если по ощущениям в компании было интересно на собеседовании и вам ответили более менее подробно — скорее всего, стоит поблагодарить компанию и садиться учить. Иначе — нужно больше данных, то есть идем в следующую компанию.

Три собеседования — это абсолютный минимум для статистики.

Поставьте себя на место работодателя

Самый годный трюк. Представьте, что вы ищите работника. Кто вам нужен?

  • тот, кто понравился в целом
  • тот, кто обладает достаточным уровнем, либо вселяет веру, что разберется
  • тот, кто просит меньше денег, НО при прочих равных.

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

Так же, вы должны представить себя «неопытным/ленивым» рекрутером или занятым начальником. Тогда вам будет ясно, почему никаких ответов на ваш почтовый адрес не приходит. Кто-то забил, кому-то лень, кто-то забегался. Взяли другого.

— Как говорите вас зовут?

— А, спасибо, но вы нам не подходите <любая_причина>лишь бы не тратить на вас время.

Нет смысла обижаться или переставать верить в свои силы. Это глупо.

Общие советы

  1. Во время звонка HR, нужно выяснить, как проходит собеседование. Нужно ли писать код на бумаге, писать код на месте или сколько у собеседования этапов.
  2. День для собеседования желательно выбрать не «прямо сегодня», а чуть подальше: так у вас будет время подготовиться и, возможно, пообщаться с кем-то из компании / вычитать что-то про компанию в сети. Чем дольше вы сдвигаете срок, тем больше шансов, что перед вами кого-то уже возьмут. В реалиях маленького города (когда предложений очень мало) — нужно торопиться. В большом городе (предложений много / регулярно бывают) — скорее всего выслушают и предыдущего кандидата(ов) и вас.
  3. Повторить основы. Без идиотского заучивания задач на сравнение типов (список есть в начале статьи)

Зарплата

Специально не обсуждал эту тему, так как все можно найти на hh.ru для своего региона. Однако, есть еще пара полезных ссылок:

Полезные материалы

Сказ о том, как Катя попала в Яндекс.деньги + сразу комментарий про зарплату

Главное в статье:

Ничего сверхестевственного не требовали:

    уверенное знание javascript (замыкания, типы, наследование);

умение взаимодействовать с сервером (транспорты, модель OSI и REST API);

понимание браузерных процессов (загрузка ресурсов, парсинг кода и рендеринг).

Мое мнение про зарплату в известных компаниях (основано в том числе и на давних разговорах в офисе):

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

P.S. в свое время, на выставке E3 (про игры), у Half-Life 2 был очень скромный павильон, но народ, разумеется, шел туда толпами! Так же и с большими конторами: туда идут за опытом, за именем, но не за зарплатой (если речь про джуна/мидла).

Комментарий к статье про бестолковые задачи на собеседовании + сразу исправление опечатки от автора комментария

Краткая заметка о том, что многие программисты не могут написать метод сортировки пузырьком (и это нормально). Один из не знающих — создатель Ruby on rails.

Спорная статья на vc.ru (короткая, возможно реклама), но хорошо отражает следующие моменты:

  • да, специалисты могут сделать лучше ваше резюме
  • да, консультант может помочь вам с работой

В обоих случаях, как и в любой сфере, попасть на «специалиста» не просто. Результат не гарантирован.

Вопрос на тостере «Какие стратегии повышения зарплаты существуют» и ответ на него.

Стратегия проста — увеличивайте собственный профессиональный уровень на столько, чтобы свободно менять компанию, как только вас что-то перестало устраивать.

Про найм в Лабораторию Касперского (статья рекламная, но все же есть ответы на вопросы: что на собеседовании происходит и как. Речь про C++).


  • Как попасть в «Лабораторию Касперского» и чем заняться
  • О тестовых заданиях

Как всегда в комментариях присутствуют люди, которые либо хорошо в теме, либо «обиженные на жизнь», сказать кто есть кто — невозможно.

Авторский telegram канал «Пргрм с Козулей»

— Как вкатиться во фронтенд?

Научиться использовать поиск в гугле и Stack Oveflow. Остальное приложится с опытом. В интернете полно туторов, все уже разжевали по 100 раз и выплюнули для тех, кто умеет читать.

— Я уже какое-то время работаю, какой у меня уровень?

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

— Реакт или ангуляр?

Реакт. Я начинал с первой версии ангуляра и вторая не сильно лучше.

— Тайпскрипт или джаваскрипт?

ActionScript 3.0, там есть настоящая типизация. Тайпскрипт можно использовать для того, чтобы подглядеть API библиотек, но заткнуть им все дыры все равно не получится.

10 ошибок, которые часто допускают новички JavaScript

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

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

1. Пропуск фигурных скобок

Одна из ошибок, которую часто допускают новички JavaScript — пропуск фигурных скобок после операторов типа if, else,while и for . Хотя это не запрещается, вы должны быть очень осторожны, потому что это может стать причиной скрытой проблемы и позже привести к ошибке.

Смотрите пример, приведенный ниже:

Хотя вызов fail() имеет отступ и, кажется, будто он принадлежит оператору if , это не так. Он вызывается всегда. Так что это полезная практика окружать все блоки кода фигурными скобками, даже если в них присутствует только один оператор.

2. Отсутствие точек с запятой

Во время парсировки JavaScript осуществляется процесс, известный как автоматическая расстановка точек с запятой. Как следует из названия, анализатор расставляет недостающие знаки вместо вас.

Цель этой функции — сделать JavaScript более доступным и простым в написании для новичков. Тем не менее, вы должны всегда сами добавлять точку с запятой, потому что существует риск пропустить ее.

Так как в строке 3 отсутствует точка с запятой, анализатор предполагает, что открывающаяся скобка в строке 5 является попыткой доступа к свойству, используя синтаксис массива аксессора (смотри ошибку № 8), а не отдельным массивом, который является не тем, что предполагалось.

Это приводит к ошибке. Исправить это просто — всегда вставляйте точку с запятой.

Некоторые опытные разработчики JavaScript предпочитают не расставлять точки с запятой, но они прекрасно знают о возможных ошибках, и то, как их предотвратить.

3. Непонимание приведений типа

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

Это делает JavaScript гораздо более простым, чем, скажем, C# или Java . Но это таит в себе потенциальную опасность ошибок, которые в других языках выявляются на этапе компиляции.

Проблема может быть легко исправлена с применением parseInt(textBox.value, 10) , чтобы перевести строку в число перед добавлением к ней 10.

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

Чтобы не допустить преобразования типа при сравнении переменных в операторе if , вы можете использовать проверку строгого равенства ( === ).

4. Забытые var

Еще одна ошибка, допускаемая новичками — они забывают использовать ключевое слово var при объявлении переменных. JavaScript — очень либеральный движок.

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

Вот пример, который кроме того иллюстрирует и другую ошибку — недостающую запятую при объявлении сразу нескольких переменных:

Когда анализатор достигает строки 4, он автоматически добавит точку с запятой, а затем интерпретирует объявления c и d в строке 5, как глобальные.

Это приведет к изменению значения другой переменной c. Больше о подводных камнях JavaScript здесь .

5. Арифметические операции с плавающей точкой

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

Чтобы обойти эту проблему, вы не должны использовать десятичные числа, если вам нужна абсолютная точность — используйте целые числа, или если вам нужно работать с денежными единицами, используйте библиотеку типа bignumber.js .

6. Использование конструкторов вместо оригинальных обозначений

Когда программисты Java и C # начинают писать на JavaScript, они часто предпочитают создавать объекты с использованием конструкторов: new Array(), new Object(), new String() .

Хотя они прекрасно поддерживаются, рекомендуется использовать оригинальные обозначения: [], <>, «» , так как конструкторы имеют свои особенности:

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

7. Непонимание того, как разделяются диапазоны

Одна из трудных для понимания новичками вещей в JS , это правила разграничения и закрытия диапазонов. И это действительно не просто:

Функции сохраняют связь с переменными в пределах родительских диапазонов. Но поскольку мы откладываем выполнение через setTimeout , когда наступит время для запуска функций, то цикл будет уже фактически завершен и переменная i увеличивается до 11.

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

8. Использование Eval

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

Код внутри eval — это строка. Отладочные сообщения, связанные с Eval-блоками непонятны, и вам придется поломать голову, чтобы правильно расставить одинарные и двойные кавычки.

Не говоря уже о том, что это будет работать медленнее, чем обычный JavaScript . Не используйте Eval если вы не знаете точно, что вы делаете.

9. Непонимание асинхронного кода

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

Новичкам еще трудно понимать это интуитивно, и они быстро заходят в тупик, сталкиваясь с ошибками, которые трудно понять.

Вот пример, в котором я использую сервис FreeGeoIP для определения вашего местоположения по IP-адресу:

Несмотря на то, что console.log располагается после вызова функции load() , на самом деле он выполняется перед определением данных.

10. Злоупотребление отслеживанием событий

Давайте предположим, что вы хотите отслеживать клик кнопки, но только при условии установленного чеккера.

Новичок в этом случае может сделать следующее (используя JQuery ):

Что-то, очевидно, не так. В идеале, вы должны отслеживать события только один раз, как задано для изменения события чекбокса.

Повторяющийся вызов button.on(‘click’ ..) приводит к повторяющемуся отслеживанию события, которое никогда не удаляется.

Я оставлю данный пример без изменений в качестве упражнения для читателей, чтобы они могли поработать над ним ��

Заключение

Лучшим способом избежать подобных ошибок является использование JSHint . Некоторые IDE предлагают встроенную интеграцию с инструментом, который проверяет код во время написания.

Я надеюсь, что вы нашли в этой статье много интересного для себя. Если у вас есть предложения, оставьте их в комментариях!

Данная публикация представляет собой перевод статьи « 10 Mistakes That JavaScript Beginners Often Make » , подготовленной дружной командой проекта Интернет-технологии.ру

11 полезных приёмов в JavaScript

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

Конвертация в Boolean при помощи оператора !!

Порой нам нужно проверить, существует ли значение переменной и валидно ли оно, чтобы в этих случаях считать их верными, то есть равными true . Для этого можно применить к переменной оператор двойного отрицания !! , который автоматически меняет любой тип данных на логический (boolean) и возвращает false только в тех случаях, когда переменная принимает одно из следующих значений: 0 , null , «» , undefined или NaN . Вот простой пример:

Если значение account.cash больше нуля, account.hasMoney будет равна true .

Конвертация в Number при помощи оператора +

Удивительно простой приём! Работает он только со строками, а во всех остальных случаях возвращает NaN (Not a Number). Взглянем на пример:

Эта магия также работает с типом Date, возвращая timestamp:

Раз уж речь зашла о магии, советуем прочитать нашу статью, которая расскажет о настоящей магии JavaScript.

Упрощённая запись условных выражений

Допустим, у нас есть подобный код:

Его можно сократить, поместим оператор && между переменной (значение которой проверяется) и функцией. Вот так можно записать наш код:

Аналогично можно проверить, есть ли у объекта те или иные атрибуты и методы:

Это связано с так называемой короткой логикой: если левый операнд && равен false , то правый операнд даже не будет вычислен, потому что и так ясно, что все выражение ложно. И если правым операндом является функция, то она не будет вызвана.

Значения по умолчанию при помощи оператора ||

В ES6 есть возможность задать значение аргумента по умолчанию. Для того, чтобы воспроизвести эту фичу в старых браузерах, можно использовать оператор || , добавив в качестве второго параметра значение по умолчанию. Если первый параметр вернёт false , будет использоваться второй. Вот пример:

Подробнее о стандарте ES6 можно почитать в наших статьях:

Распознавание свойств объекта

Приём очень полезен, когда нужно проверить, существует ли тот или иной атрибут или метод. Также он может пригодиться и при кроссбраузерной вёрстке. Представим, что вам нужно написать код, совместимый с древним Internet Explorer 6, и вы хотите использовать document.querySelector() для получения элементов по идентификаторам. Но в IE6 такой функции не существует, поэтому нужно добавить проверку:

В этом примере мы можем использовать document.getElementById() как запасной вариант, если в объекте-документе нет функции querySelector .

Получение последнего элемента массива

Наверняка вы знакомы с методом Array.prototype.slice(begin, end) : с его помощью можно вырезать из массива кусок, задавая его границы begin и end . Если вы не зададите значение end , то функция автоматически задаст максимально возможное значение. Но немногие знают, что этот метод может принимать и отрицательные значения — если begin равен отрицательному числу, вы получите последние элементы массива:

Укорачивание массива

Этот способ позволяет зафиксировать размер массива и удалить все лишние элементы. Например, у вас есть массив из 10 элементов, а вам нужны только первые 5. В таком случае достаточно одной простой команды: array.length = 5 . Вот наглядный пример:

Замена всех подстрок

Метод String.replace() позволяет заменять подстроки при помощи регулярных выражений, но по умолчанию заменяется лишь первое вхождение подстроки. Тем не менее, вы можете исправить это, добавив /g в конец «регулярки»:

Слияние массивов

Если вам нужно объединить два массива, вы можете использовать метод Array.concat() :

Однако он не подходит для слияния больших массивов, поскольку потребляет большое количество памяти, создавая новый массив. В этом случае лучше использовать Array.push.apply(arr1, arr2) , что поместит второй массив в первый, сократив потребление памяти:

Конвертация NodeList в массив

Если вы вызовете document.querySelectorAll(«p») , то наверняка получите массив элементов DOM, объект класса NodeList. Проблема в том, что у него нет таких полезных методов, как sort() , reduce() , map() и filter() . Чтобы активировать эти и другие полезные методы, вам нужно конвертировать NodeList в массив. Для этого нужно просто выполнить [].slice.call(elements) :

Перемешивание элементов массива

Чтобы перемешать элементы массива, не используя сторонние библиотеки вроде Lodash, можно выполнить этот приём:

Нативный JS. Часть 1. Введение.

Я долго думал и все же решил остановиться на текстовом формате. Это отнимает у меня меньше времени и больше нравится, т.к. в душе я писатель 🙂
Посему — не судите строго, и я надеюсь, что информация Вам пригодится.

Сегодня введение, так что самое интересное лишь впереди.

Что такое JavaScript?

JavaScript — язык программирования, позволяющий «оживлять» веб-сайты. Программы на этом языке называются скриптами.

JavaScript можно выполняться не только на веб-сайтах, в браузере, ему лишь нужна специальная программа — интерпретатор.

Интерпретатор – программа, которая
переводит алгоритм, записанный на языке
программирования, в последовательность
команд, понятных компьютеру

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

Для чего нужен JavaScript?

Основное назначение языка — работа с изменением поведения элементов в браузере, однако в этих уроках мы не затронем данного аспекта. Грубо говоря, видео на сайте или реакция на клик на странице — это все JavaScript.

Где рекомендуется работать?

Работать можете как в простом редакторе типа Sublime Text, так и в онлайн-песочницах типа Codepen.io, repl.it. Я буду использовать для каких-либо примеров либо просто текст в статье, либо codepen, ибо он лучше адаптивится.

Для чего все это нужно?

Зачем вам Js, думаете? Без него в веб-разработке никуда. Есть конечно более упрощенные вещи, как jQuery, но не стоит искать легких путей, ведь если Вы хотите стать реально крутым разработчиком — вам не обойтись без знаний Js.

Заключение

Это было сверхкороткое и минимально грузное вступление. Я не рассказал о спецификации и еще о некоторых мелочах, однако речь об этом пойдет дальше, когда мы перейдем к конкретным темам. Ждите, а пока — вот вам мини-программа 🙂

Стоит ли учить JavaScript: перспективы, ситуация на рынке труда, мнения экспертов

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

Экскурс в теорию: информация о JavaScript, сферах применения и особенностях языка

JavaScript (JS) — высокоуровневый язык программирования, который поддерживает императивный, функциональный и событийно-ориентированный стили. Относится к языкам с динамической типизацией, входит в группу интерпретируемых языков.

Справка: в разговорной речи специалисты употребляют названия «яваскрипт», «джейэс» и даже «жабаскрипт». Кстати, у нас есть мини-словарь профессионального сленга программистов.

В число основных особенностей JS входят:

  • Динамическая типизация — тип данных определяется в момент присваивания значения константе или переменной.
  • Интерпретируемый язык — код приложения интерпретируется при обращении, не требуется предварительная компиляция.
  • Функции как объекты первого класса, то есть функции в JavaScript можно возвращать из функций, передавать в качестве параметров в другие функции, присваивать переменным.
  • Поддержка прототипного и объектно-ориентированного подхода.
  • Универсальность — все популярные браузеры поддерживают JavaScript.

ES6, современная спецификация JavaScript, поддерживает синтаксис стрелочных функций, дестракчеринг, операторы spread и rest, модули и классы. Эти и другие инструменты делают JavaScript гибким и выразительным языком программирования.

Важная особенность JavaScript — развитая инфраструктура. Вокруг этого языка программирования сформировано многочисленное сообщество. Разработчикам доступны мощные инструменты, например:

  • Библиотеки и фреймворки для создания приложений (React, Vue).
  • Сборщики (Webpack, Gulp).
  • Вспомогательные библиотеки (Lodash, Underscore).
  • Генераторы статических сайтов (Gatsby.js, Next.js).

Сферы применения JavaScript

В первую очередь JavaScript широко используется во фронтенд-разработке. Этот язык вместе с HTML и CSS входит в базовый набор инструментов фронтендера. На JavaScript создаются приложения, которые исполняются в браузере на стороне клиента. Они обеспечивают интерактивность сайтов. Например, когда пользователь заполняет форму и нажимает кнопку «Подписаться», мгновенная реакция на это действие обычно обеспечивается кодом, написанным на JavaScript.

Сферы применения JavaScript не ограничиваются браузерами и веб-приложениями. С помощью этого языка решают такие задачи:

  • Разработка нативных приложений. Например, с помощью фреймворка React Native создаются приложения для Android и iOS.
  • Серверная разработка. Например, Node.js применяется для бэкенд-разработки. Об этом направлении в перспективе выйдет отдельная статья.
  • Разработка десктопных приложений. Например, JS применяется в офисных пакетах Microsoft и OpenOffice, в приложениях компании Adobe.
  • Программирование оборудования и бытовой техники, например, платёжных терминалов, телевизионных приставок.

В данной статье рассматривается перспектива изучения JavaScript для использования в разработке фронтенда.

Популярность, рейтинг и перспективы JavaScript


Как отмечалось выше, по состоянию на середину 2020 года JavaScript входит в число самых популярных языков программирования. JS занимает седьмое место в индексе TIOBE, который составляется на основе статистики поисковых запросов. Этот язык на данный момент популярнее, чем PHP, Swift, Objective-C, Ruby.

JavaScript занимает первое место по популярности в сообществе разработчиков на GitHub. Этот показатель рассчитывается по количеству репозиториев.

Как и PHP, JavaScript можно считать одним из способов быстро войти в разработку. JavaScript-программистов берут на работу веб-студии, которые есть как в крупнейших городах, так и в регионах.

О перспективах JavaScript подробно рассказывают эксперты в комментариях ниже. Стоит обратить внимание на два момента.

Первый: как отмечалось выше, JavaScript обеспечивает интерактивность сайтов и используется в популярных современных браузерах. Эти задачи можно решать и с помощью альтернативных технологий, например, WebAssembly, но это не вопрос краткосрочной перспективы. В ближайшем будущем с большой долей вероятности JS останется основным языком программирования фронтенд-приложений.

Второй момент: в настоящий момент растет популярность прогрессивных веб-приложений (PWA, progressive web apps). Эту технологию активно продвигает Google. Прогрессивные веб-приложения представляют собой гибрид сайта и мобильного приложения. В среднесрочной перспективе у PWA есть хорошие шансы отвоевать значительную долю рынка у нативных приложений.

Для разработки PWA применяется JavaScript. Например, сайты, созданные с помощью генератора Gatsby.js, поддерживают функциональность прогрессивного веб-приложения из коробки. Это ещё один плюс в пользу востребованности JS в ближайшей перспективе.

Топ-пост этого месяца:  Учимся производить с помощью PHP запись строки в файл

Сколько платят фронтендерам, или О зарплатах JavaScript-программистов

Заработок JavaScript-программиста зависит от уровня квалификации, региона проживания и работы, режима трудоустройства.

По данным trud.com на май 2020 года, средняя зарплата JavaScript-разработчика в России составляет 100 000 рублей. Больше всего вакансий на этом ресурсе с предложением зарплаты в диапазоне от 62 000 до 121 000 рублей (см. иллюстрацию). Чаще всего фронтенд-разработчики требуются в Москве, Санкт-Петербурге и Новосибирске.

По данным NewHR, вилка зарплат фронтенд-разработчиков уровня middle в июне 2020 года составляла от 160 000 до 190 000 рублей. По информации «Мой круг», медианная зарплата JavaScript-программиста в России во втором полугодии 2020 года составляла 85 000 рублей.

На сайте hh.ru по состоянию на конец июля 2020 года есть 81 вакансия для JavaScript-разработчиков в Казани (город взят для примера). Уровень зарплаты варьируется от 20 000 до 165 000 рублей.

Информацию по своему региону можно получить самостоятельно с помощью сайтов поиска работы.

Перспективы JavaScript: взгляд экспертов

Мы попросили известных в отрасли экспертов поделиться взглядами на перспективу изучения JS, ситуацию на рынке труда и востребованность JavaScript в будущем.

Сергей Рубанов: спрос на рынке труда JavaScript-разработчиков сильно превышает предложение

По вашему опыту, почему стоит изучать JS?

Несмотря на то, что JS имеет свои странности, он невероятно прост для изучения и терпим к ошибкам. Экосистема языка хорошо развита, так что если вы чувствуете в себе силы, то сможете легко настроить более строгие правила для написания кода, используя различные инструменты, позволяющие избегать популярных ошибок или даже добавить статическую типизацию. В данный момент JavaScript — единственный высокоуровневый динамический язык, доступный практически везде, в том числе (и в первую очередь) на веб-страницах. Это позволяет выучить один язык, частично переиспользовать готовые наработки для клиента, сервера, в роботостроении, для интернета вещей, даже для машинного обучения. А ещё у JavaScript огромное, невероятно классное и самое открытое комьюнити.

Какие перспективы у этого языка программирования по сравнению с другими языками?

JavaScript — один из самых распространенных языков в мире. В индексе TIOBE в данный момент он занимает 7 место (и индекс растет), а по количеству репозиториев на GitHub и популярности по результатам опроса Stack Overflow он находится на первом месте и является вторым желаемым языком после Python. Пакетный менеджер npm является самым крупным пакетным менеджером из всех существующих. Все это говорит о том, что перспективы у языка великолепные.

Будет ли он востребован в будущем?

Только недавно стали появляться технологии, которые в чём-то смогут заменить JavaScript в браузерах, но понадобится ещё очень долгое время, прежде чем эти технологии достигнут достаточного уровня развития и научатся всему тому, что может JavaScript. К тому же на сервере и во встраиваемых системах у JavaScript есть много альтернатив, но и там он имеет свою нишу. Многие компании вкладывали и вкладывают огромные деньги в развитие движков, в которых JavaScript исполняется, что позволяет делать язык всё эффективнее и не терять своей актуальности.

Каковы перспективы JS-разработчика на рынке труда?

Спрос на рынке труда JavaScript-разработчиков сильно превышает предложение, отсюда же и хорошие зарплаты. Компании ищут разработчиков любого уровня, в том числе начинающих.

Почему новичку стоит обратить внимание на этот язык?

количество информации, которую можно найти в интернете;

развитая экосистема в виде огромнейшего количества библиотек и инструментов для разработки;

очень хорошее комьюнити;

одного языка достаточно, чтобы писать веб приложения, мобильные приложения, серверы и многое другое;

высокий спрос на рынке труда;

Сергей Рубанов, опытный разработчик и лидер сообществ. Приглашённый эксперт TC39 (комитет, который занимается разработкой языка JavaScript), участник WebAssembly Community Group, член команды Babel, соорганизатор BeerJS Moscow, WebAssembly Moscow, ведущий канала Juliarderity (совместно с Романом Дворновым).

Павел Черторогов: эх, а ведь были времена, когда разработчики стеснялись говорить, что они пишут на JavaScript. Сейчас всё не так

По вашему опыту, почему стоит изучать JS?

JavaScript в последние годы стал набирать безумные обороты.

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

А в браузерах обосновался старичок JavaScript. Причем если лет 5-10 назад было стыдно говорить, что ты программируешь на JavaScript, так как его было сложно считать удобным и производительным языком, то после выхода ES6 удобство резко возросло и продолжает расти благодаря работе комитета TC39 (куда входят куча спецов из больших компаний), который развивает синтаксис языка.

Производительность языка постоянно увеличивается. Но благодаря большому комьюнити, интересу больших интернет гигантов к языку, неуклонно растет количество инструментария, которые сильно облегчает разработку. Например, ESlint (проверка стиля кода), Prettier — автоформатирование кода, Babel — для транспилинга кода и напиcания всяких AST-трансформеров, JIT-компиляторов.

Но что не может не радовать, так это TypeScript, который позволяет писать статически типизированный код (Flowtype проиграл для меня войну). Статическая типизация позволяет писать более стабильный и качественный код, дает плюшки автоподстановки в IDE. В общем, корпоративный сектор все больше задач может доверить миру JavaScript. Современный джаваскрипт с классами, декораторами, интерфейсами, типизацией все больше и больше становится похожим на Java в хорошем смысле этого слова. А если учесть, что JavaScript сейчас работает как на клиенте (в браузере), так и на сервере (NodeJS), то это это для бизнеса открывает возможность писать изоморфные приложения.

Будет ли этот язык востребован в будущем?

За пару лет популярность JS должна будет только расти. Ведь столько еще чудовищных интерфейсов вокруг, столько мертвых страниц, сгенерированных сервером. JS будет теснить PHP и Ruby.

Так или иначе JavaScript еще будет востребован как минимум лет 10, дальше прогнозировать сложно.

Что угрожает JavaScript/TypeScript:

WebAssembly маячит на горизонте, но он пока еще незрелый. Если проблемы с доступным функционалом и инструментарием. Со временем он отберет часть задач на себя (будет чуть меньше работы JS разработчикам), но убить JS он не сможет (т.к. он использует существующие части виртуальной машины JavaScript и ее среду изоляции).

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

В любом случаем надо постоянно учиться и развиваться, чтоб соответствовать текущему времени. Но, к бабке не ходи, лет через 10 надо точно будет чему-то сильно переучиваться.

Каковы перспективы разработчика JS на рынке труда?

Сейчас есть некий перекос в сторону фронтенд-разработчиков, которые производят wow-эффект на клиентов. К примеру, на Украине сейчас активно ищутся React/Vue/Angular разработчики. И нередко зарплата таких фронтенд-специалистов с опытом 1-2 года по зарплате соизмерима со среднестатистическим Java-бэкендером с опытом 6-8 лет. Нужны легкие деньги после универа?! Вперед в JS!

Почему новичку стоит обратить внимание на JS?

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

Павел Черторогов, архитектор информационных систем, GraphQL-гуру.

Роман Дворнов: JavaScript вряд ли куда-либо денется в ближайшие годы

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

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

Кстати, о новом. JavaScript — один из немногих языков с таким немалым возрастом (был создан в декабре 1995-го), который настолько динамично развивается сегодня. Формально все началось в 2015 году, когда вышла новая редакция ES2015 (или ES6) и было решено выпускать новую редакцию каждый год, хотя на самом деле всё началось задолго до этого. Не каждый год случаются значительные изменения, но изменения происходят и чувствуется темп. Можно следить за работой TC39 (комитет работающий над спецификацией языка), участвовать в обсуждениях предложений, вносить свои предложения и так далее – процесс открыт, и это здорово. К тому же, сегодня имплементаторы внедряют новые фичи накануне принятия новой редакции спецификации языка, а не несколько лет спустя, как это было раньше.

Низкий порог входа всегда был предметом споров: с одной стороны, вовлекается больше людей, с другой — их уровень как специалистов невысок. Это, плюс часто неглубокое изучение, обычно и создает негативное отношение к языку. Чтобы использовать JavaScript эффективно, его нужно изучать полностью, и дополнительно множество смежных областей, а особенно Computer Science, как это делают в случае с другими языками. Все больше задач с применением JavaScript не уступают по сложности задачам решаемым с другими языками.

Если говорить о перспективах, то JavaScript вряд ли куда-либо денется в ближайшие годы. Во-первых, это единственный язык такого класса, поддерживаемый браузерами, и нет предпосылок, что это может поменяться, хотя попытки были. Всё, что создается как альтернатива JavaScript, в конечном итоге конвертируется в него.

Во-вторых, необходимость шарить логику между клиентом и сервером, Server Side Rendering и прочее, укрепляет позиции JavaScript на серверной стороне. В-третьих, тулинг для JavaScript, как и для клиентского веб-стека, по большей части написан на JavaScript.

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

Роман Дворнов, эксперт в области фронтенд-разработки, ведущий канала Juliarderity (совместно с Сергеем Рубановым). Профиль на GitHub.

Андрей Оконечников: будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS

По вашему опыту, почему стоит изучать JS? Какие перспективы у этого языка программирования по сравнению с другими языками?

Несмотря на интересные альтернативы, такие как ReasonML, Kotlin и уже существующие языки, которые компилируются в JS, такие как ClojureScript и Elm, это никак особенно не влияет на всё растущую популярность JS. Причина для того, на мой взгляд, в низком пороге входа и огромной экосистеме (npm). На JS написано несколько миллионов опенсорс модулей, которые можно установить за считанные секунды. Плюс возможность открыть консоль разработчика в браузере и начать писать код.

Развитие распределенных сред разработки, которые работают напрямую из браузера, например CodeSandbox, ещё более уменьшают порог входа для новичков. Инструменты разработки становятся лучше и лучше, позволяя использовать JS в больших командах.

Одновременно с этим, растущая производительность JS runtimes, например V8, делает использование этого языка все более приемлемым на платформах вне веб-браузеров.

Благодаря инициативам ECMA этот язык также очень быстро развивается, получая все более современные фичи.

Уже сейчас JavaScript — один из самых популярных языков программирования в мире. И со временем он только будет набирать популярность благодаря выходу на новые платформы, такие как IoT и тд.

Будет ли JS востребован в будущем?

JavaScript никуда не денется в ближайшее время, хотим мы того или нет. На этом языке уже сейчас написано огромное количество кода, и количество это будет только увеличиваться. И даже если появится более современный язык, веб-браузеры все равно будут вынуждены поддерживать JS. Так устроен web — вечная совместимость. Будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS.

Каковы перспективы разработчика JS на рынке труда? Почему новичку стоит обратить внимание на JS?

Сейчас перспективы как никогда лучше. Особенно связанные с фронтендом. Веб превращается в платформу для по-настоящему сложных приложений, и рынок просто не способен удовлетворить потребность компаний. Но JS не единственный фактор. Умение писать CSS и доступный HTML важны сегодня как никогда. Рынок JS разработчиков наполняется в основном из backend-разработчиков, переквалифицирующихся во frontend. Если вы видите себя во frontend, я бы очень рекомендовал обратить внимание на основы дизайна, user experience, HTML + CSS и, конечно же, JavaScript.

Если вы дизайнер и уже умеете писать разметку и CSS, я бы так же советовал начать изучать JavaScript. В будущем граница между JS и CSS-программистами будет исчезать, так как очень сложно сделать хороший user experience в Web без использования обоих языков.

Андрей Оконечников, фронтенд-разработчик и UI-дизайнер родом из Ярославля, живущий в Вене, Австрия. Более 10 лет он придумывает и разрабатывает пользовательские интерфейсы, используя современные веб-технологии. До этого он работал дизайнером веб-сайтов и пользовательских интерфейсов. Комбинация опыта дизайнера и разработчика помогает ему лучше понимать проблемы пользователей и находить оригинальные решения в пользовательских интерфейсах.

Андрей работал с такими компаниями, как Yandex, JetBrains, Feedly, Netlify и многими другими. Он основатель консалтинг-компании component-driven.io, специализирующейся на дизайн системах и сложных веб-интерфейсах, и создатель macOS приложения цветовой пипетки для разработчиков и дизайнеров ColorSnapper.

Александр Казаченко: на одного подходящего кандидата приходится 10 или более неподходящих, это печалит

По вашему опыту, почему стоит изучать JS?

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

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

Сейчас достаточно большой тренд на разработку приложений под мобильные устройства с использование технологий основанных на браузере.

И на сервере JS тоже имеет свою нишу в виде Nodejs.

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

Но если посмотреть не с точки зрения прагматизма, а с точки зрения энтузиазма, то в этом смысле JS тоже очень привлекателен.

Сейчас существует множество языков, транспилирующихся в JS (TypeScript, CoffeeScript, Kotlin и так далее), много фреймворков и библиотек разного уровня абстрактности, что позволяет разрабатывать на JS так, как нравится именно вам.

Какие перспективы у самого языка программирования в сравнении с другими? Будет ли он востребован в будущем?

Как я отмечал выше, у JS очень большой рынок, где он востребован и где ему нет аналогов (веб-браузер).

Соответственно, можно считать, что в ближайшие лет 10 JS не только не умрет, но и будет активно развиваться.

На какое направление при изучении JS обратить больше внимания — frontend или backend?

Изначально JS применялся сугубо для frontend’а, соответственно и развился он больше в эту сторону. Но это не имеет никакого значения, при выборе направления — frontend или backend. Более значимым в этом выборе будет то, чем интересно заниматься именно вам. Так как язык один и тот же, разница только в окружении.

Какие перспективы у JS-разработчика в работе? Почему новичку стоит обратить внимание на этот язык программирования?

Мне кажется, сейчас у многих на слуху выражение «вкатиться во фронтенд», и это неспроста. Порог вхождения в рынок разработки фронта для обычных веб-сайтов очень низкий, и можно, потратив пару месяцев на обучение, начать на этом зарабатывать.

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

За последние 3 года я прособеседовал не менее 200 человек, и на одного подходящего кандидата приходится 10 или более неподходящих, это печалит.

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

Стоит ли браться за JavaScript: итоги

JavaScript входит в число самых популярных и востребованных языков программирования. Фронтенд-разработчиков ищут в крупнейших городах и регионах, также специалисты могут работать удалённо в штате и в качестве фрилансеров.

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

Примечание: мнение экспертов может не совпадать с мнением администрации и сотрудников Хекслета.

10 ошибок, которые часто допускают новички JavaScript

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

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

1. Пропуск фигурных скобок

Одна из ошибок, которую часто допускают новички JavaScript — пропуск фигурных скобок после операторов типа if, else,while и for . Хотя это не запрещается, вы должны быть очень осторожны, потому что это может стать причиной скрытой проблемы и позже привести к ошибке.

Смотрите пример, приведенный ниже:

Хотя вызов fail() имеет отступ и, кажется, будто он принадлежит оператору if , это не так. Он вызывается всегда. Так что это полезная практика окружать все блоки кода фигурными скобками, даже если в них присутствует только один оператор.

2. Отсутствие точек с запятой

Во время парсировки JavaScript осуществляется процесс, известный как автоматическая расстановка точек с запятой. Как следует из названия, анализатор расставляет недостающие знаки вместо вас.

Цель этой функции — сделать JavaScript более доступным и простым в написании для новичков. Тем не менее, вы должны всегда сами добавлять точку с запятой, потому что существует риск пропустить ее.

Так как в строке 3 отсутствует точка с запятой, анализатор предполагает, что открывающаяся скобка в строке 5 является попыткой доступа к свойству, используя синтаксис массива аксессора (смотри ошибку № 8), а не отдельным массивом, который является не тем, что предполагалось.

Это приводит к ошибке. Исправить это просто — всегда вставляйте точку с запятой.

Некоторые опытные разработчики JavaScript предпочитают не расставлять точки с запятой, но они прекрасно знают о возможных ошибках, и то, как их предотвратить.

3. Непонимание приведений типа

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

Это делает JavaScript гораздо более простым, чем, скажем, C# или Java . Но это таит в себе потенциальную опасность ошибок, которые в других языках выявляются на этапе компиляции.

Проблема может быть легко исправлена с применением parseInt(textBox.value, 10) , чтобы перевести строку в число перед добавлением к ней 10.

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

Чтобы не допустить преобразования типа при сравнении переменных в операторе if , вы можете использовать проверку строгого равенства ( === ).

4. Забытые var

Еще одна ошибка, допускаемая новичками — они забывают использовать ключевое слово var при объявлении переменных. JavaScript — очень либеральный движок.

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

Вот пример, который кроме того иллюстрирует и другую ошибку — недостающую запятую при объявлении сразу нескольких переменных:

Когда анализатор достигает строки 4, он автоматически добавит точку с запятой, а затем интерпретирует объявления c и d в строке 5, как глобальные.

Это приведет к изменению значения другой переменной c. Больше о подводных камнях JavaScript здесь .

5. Арифметические операции с плавающей точкой

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

Чтобы обойти эту проблему, вы не должны использовать десятичные числа, если вам нужна абсолютная точность — используйте целые числа, или если вам нужно работать с денежными единицами, используйте библиотеку типа bignumber.js .

6. Использование конструкторов вместо оригинальных обозначений

Когда программисты Java и C # начинают писать на JavaScript, они часто предпочитают создавать объекты с использованием конструкторов: new Array(), new Object(), new String() .

Хотя они прекрасно поддерживаются, рекомендуется использовать оригинальные обозначения: [], <>, «» , так как конструкторы имеют свои особенности:

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

7. Непонимание того, как разделяются диапазоны

Одна из трудных для понимания новичками вещей в JS , это правила разграничения и закрытия диапазонов. И это действительно не просто:

Функции сохраняют связь с переменными в пределах родительских диапазонов. Но поскольку мы откладываем выполнение через setTimeout , когда наступит время для запуска функций, то цикл будет уже фактически завершен и переменная i увеличивается до 11.

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

8. Использование Eval

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

Код внутри eval — это строка. Отладочные сообщения, связанные с Eval-блоками непонятны, и вам придется поломать голову, чтобы правильно расставить одинарные и двойные кавычки.

Не говоря уже о том, что это будет работать медленнее, чем обычный JavaScript . Не используйте Eval если вы не знаете точно, что вы делаете.

9. Непонимание асинхронного кода

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

Новичкам еще трудно понимать это интуитивно, и они быстро заходят в тупик, сталкиваясь с ошибками, которые трудно понять.

Вот пример, в котором я использую сервис FreeGeoIP для определения вашего местоположения по IP-адресу:

Несмотря на то, что console.log располагается после вызова функции load() , на самом деле он выполняется перед определением данных.

10. Злоупотребление отслеживанием событий

Давайте предположим, что вы хотите отслеживать клик кнопки, но только при условии установленного чеккера.

Новичок в этом случае может сделать следующее (используя JQuery ):

Что-то, очевидно, не так. В идеале, вы должны отслеживать события только один раз, как задано для изменения события чекбокса.

Повторяющийся вызов button.on(‘click’ ..) приводит к повторяющемуся отслеживанию события, которое никогда не удаляется.

Я оставлю данный пример без изменений в качестве упражнения для читателей, чтобы они могли поработать над ним ��

Заключение

Лучшим способом избежать подобных ошибок является использование JSHint . Некоторые IDE предлагают встроенную интеграцию с инструментом, который проверяет код во время написания.

Я надеюсь, что вы нашли в этой статье много интересного для себя. Если у вас есть предложения, оставьте их в комментариях!

Данная публикация представляет собой перевод статьи « 10 Mistakes That JavaScript Beginners Often Make » , подготовленной дружной командой проекта Интернет-технологии.ру

Добавить комментарий