JavaScript: что это, где применяется и как освоить

Главное, что стоит понять с самого начала: язык один, но возможности зависят от места запуска. Цикл по массиву работает везде, но обратиться к кнопке на странице можно только в браузере, а прочитать лист таблицы — только в Google Apps Script. Поэтому учить JavaScript «для себя» удобнее от задачи: сначала выбрать среду, а под неё набирать синтаксис.

Кому и зачем JavaScript, если вы не разработчик

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

Маркетолог и веб-аналитик чаще всего встречают язык в Google Tag Manager. Там есть тип переменной Custom JavaScript, и по справке Tag Manager её код должен быть анонимной функцией, которая возвращает значение, например адрес страницы в нижнем регистре. Так достают цену товара или текст нажатой кнопки и передают в аналитику.

Тем, кто работает с таблицами, пригодится Google Apps Script — JavaScript внутри Google Таблиц, Документов и Почты. Скрипт по расписанию сводит листы, рассылает итоги, обращается к API рекламного кабинета. Тестировщику язык нужен для автотестов: в Playwright, Cypress и WebdriverIO сценарии пишут на JavaScript или TypeScript.

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

Где выполняется код и что он там может

В браузере у кода есть страница, события мыши и клавиатуры и функция fetch для сетевых запросов. В Apps Script страницы нет, зато есть объекты SpreadsheetApp, GmailApp, DriveApp. По руководству Google о среде V8 Apps Script работает на том же движке V8, что Chrome и Node.js, и понимает современный синтаксис. Но модули с import и export там не поддерживаются, а веб-интерфейсов вроде fetch, FormData и Blob нет: сетевой запрос делают через UrlFetchApp.

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

Учебный пример: отчёт по заявкам в Google Таблице

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

Скрипт читает лист методом getValues(), который возвращает массив строк, пропускает шапку, приводит телефон к одному виду и складывает встреченные номера в множество Set:

function countLeads() {
  const rows = SpreadsheetApp.getActive()
    .getSheetByName('Заявки').getDataRange().getValues().slice(1);
  const seen = new Set();
  const bySource = {};
  for (const [date, phone, source] of rows) {
    const digits = String(phone).replace(/\D/g, '').slice(-10);
    if (!digits || seen.has(digits)) continue;
    seen.add(digits);
    bySource[source] = (bySource[source] || 0) + 1;
  }
  Logger.log(bySource);
}

Строка с replace здесь главная. Без неё номера «+7 900 123-45-67» и «89001234567» считаются разными, и дубли проходят в отчёт. Последние десять цифр — простое правило для российских номеров, и его стоит проверить на своих данных. Дальше итог можно записывать на отдельный лист, а запуск повесить на триггер по времени.

Новые возможности языка и когда ими можно пользоваться

Язык развивается по спецификации ECMAScript, новая редакция выходит раз в год. В ECMAScript 2025 появились, среди прочего, глобальный объект Iterator с методами для работы с перебираемыми данными и новые методы множеств: union, intersection, difference и другие. С ними задача «какие клиенты есть в обеих выгрузках» решается одной строкой без вложенных циклов.

Но попадание в стандарт не значит, что возможность можно ставить на сайт с живыми посетителями. Для этого существует статус Baseline, который ведёт группа WebDX при W3C вместе с производителями браузеров. Возможность становится «Newly available», когда её поддерживают все основные браузеры: Chrome, Edge, Firefox и Safari, включая мобильные версии. «Widely available» она получает только через 30 месяцев после этой даты: к этому времени браузеры у большинства посетителей обновляются.

По справочнику MDN метод Set.prototype.union работает во всех основных браузерах с июня 2024 года, значит, «широко доступным» он станет только в декабре 2026-го. У методов Iterator, например Iterator.prototype.map, отсчёт идёт с марта 2025 года, и до статуса «Widely available» им ждать до сентября 2027-го. У посетителя с давно не обновлявшимся iPhone код с union на странице или в теге Tag Manager просто не сработает.

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

Порядок освоения

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

1. Переменные, типы, условия, циклы и функции. Упражнения — в консоли браузера, она открывается клавишей F12.
2. Массивы и объекты: map, filter, reduce, деструктуризация, Set и Map для уникальных значений и группировки.
3. Выбор среды: страница и DOM, Apps Script или тестовый фреймворк. Здесь же — чтение документации этой среды.
4. Асинхронный код: промисы и async/await, запросы к API.
5. Отладка: сообщения об ошибках, точки остановки, журнал выполнения.

Первые два шага удобно пройти на тренажёре с автоматической проверкой: так вы сразу видите, где ошибка. Например, бесплатный онлайн-курс «Основы JavaScript» от Хекслета состоит из 51 урока с 46 упражнениями, которые проверяются сразу в браузере: строки, переменные, типы данных, функции, объекты, условия и циклы. Работу со страницей и асинхронность эта программа не затрагивает — это фундамент, а не прикладной навык.

Упражнения и самопроверка

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

Где новички ошибаются

Самая частая ошибка — сравнение через == вместо ===. Двойное равенство приводит типы, поэтому пустая строка оказывается равна нулю, и условие срабатывает там, где не должно. Вторая ошибка — забытый await: вместо данных из API в переменную попадает незавершённый промис. Третья — чужой код без учёта среды: fetch и document в Apps Script не существуют.

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

JavaScript в работе тестировщика

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

Многие программы для тестировщиков сразу учат TypeScript, надстройку над JavaScript с типами. Так устроен онлайн-курс «Автоматизированное тестирование на JavaScript» в TeachMeSkills: 4,5 месяца живых занятий без записей, язык изучают именно на TypeScript, затем Playwright, Selenium WebDriver, WebdriverIO и Cypress, тесты API на Jest, отчёты Allure, SQL и Jenkins. Опыт программирования не требуется, но цены в каталоге и на сайте школы расходятся, так что условия уточняйте у школы.

Как навык влияет на доход

Для маркетолога, аналитика или верстальщика JavaScript почти никогда не бывает отдельной строкой в зарплате. Он меняет набор задач, которые вы берёте без помощи разработчика: сами настраиваете передачу событий в Tag Manager, сами автоматизируете отчёт, сами правите интерактив на странице. В вакансиях веб-аналитика и маркетолога-аналитика он чаще встречается как дополнительное требование рядом с GTM и SQL, а у фрилансера, который собирает сайты, расширяет список услуг.

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

Как выбрать обучение

Выбирайте программу по среде, в которой собираетесь работать. Маркетологу и аналитику важнее массивы, объекты и документация Apps Script или Tag Manager, чем фреймворки. Верстальщику нужна работа с DOM и событиями страницы. Тестировщику — асинхронность и фреймворк для тестов. Проверьте, смотрит ли код живой человек.

Когда основы языка уже освоены, следующим шагом для многих становится TypeScript: он подсвечивает ошибки до запуска и привычен в автотестах. Короткий онлайн-курс по TypeScript в Merion Academy рассчитан на два месяца по 2–5 часов в неделю: базовые типы, интерфейсы, дженерики, служебные типы, лабораторные работы и итоговый проект. Знания JavaScript он предполагает заранее, а работу с типами сторонних библиотек не разбирает.

Сравнивайте несколько программ по длительности, формату занятий и проверке заданий: под словом «JavaScript» школы продают и детские курсы, и тестирование, и путь во фронтенд.

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