JavaScript для тех, кто пришёл из PHP или Python

Вы умеете писать бэкенд на PHP или Python и хотите закрыть фронтенд или взяться за Node.js. Хорошая новость: цикл, функция и массив выглядят похоже везде. Плохая: JavaScript отличается ровно там, где вы этого не ждёте — в сравнении значений, в асинхронности и в том, что this означает не то, что в PHP или Python. Ниже — карта различий, которые ломают код у новичков в первый же день, и понятный маршрут, что учить сначала.

Статья — про язык и подходы, а не про конкретный фреймворк. React, Vue и Express — отдельный разговор; здесь фундамент, на который они ложатся.

Что понадобится до старта

• Node.js 20 LTS или новее — чтобы запускать .js-файлы вне браузера и ставить пакеты через npm. Проверьте: node --version должно вернуть что-то вроде v20.x.
• Браузер с консолью — Chrome или Firefox. Половину примеров можно проверить прямо в DevTools, вкладка Console.
• Редактор — VS Code с расширением ESLint. ESLint подсветит те самые ошибки, которые PHP- и Python-разработчики совершают по привычке.

Дальше по тексту речь идёт о современном JavaScript — стандарт ES2015 и новее. Старые учебники с var и function-выражениями на каждой строке пропускайте: так уже не пишут.

Что перенесётся из вашего опыта почти без изменений

Базовая структура кода знакома. Условия, циклы for и while, функции, массивы, объекты (они же ассоциативные массивы в PHP и словари в Python) — всё это есть и работает предсказуемо.

// Функция и цикл — почти как везде
function sumEven(numbers) {
  let total = 0;
  for (const n of numbers) {   // for...of перебирает значения, не индексы
    if (n % 2 === 0) {
      total += n;
    }
  }
  return total;
}

console.log(sumEven([1, 2, 3, 4, 5, 6])); // 12

Методы массивов map, filter, reduce работают так же, как array_map/array_filter в PHP и как list comprehension в Python по смыслу. Строковые методы, JSON через JSON.parse и JSON.stringify — тоже без сюрпризов.

Где старые привычки ломают код

1. Сравнение: всегда === , никогда ==

Это первое, обо что спотыкаются все. Оператор == в JavaScript приводит типы перед сравнением, и делает это по правилам, которые невозможно запомнить целиком.

console.log(0 == '');      // true  — сюрприз
console.log(0 == '0');     // true
console.log('' == '0');    // false — при этом
console.log(null == undefined); // true

console.log(0 === '');     // false — строгое сравнение честное
console.log(0 === 0);      // true

Правило простое: используйте === и !== всегда. PHP-разработчикам это знакомо (=== есть и там), Python-разработчикам приведение типов при == покажется дикостью — она такая и есть.

2. Ложные значения: пустая строка и ноль — это false

В условии if (x) к false приводятся: false, 0, '' (пустая строка), null, undefined, NaN. Всё остальное — истина, включая пустой массив [] и пустой объект {}.

Это ловушка для Python-разработчиков: там пустой список ложный, а в JavaScript — истинный.

const items = [];
if (items) {
  console.log('сюда мы попадём — пустой массив истинный');
}
if (items.length === 0) {
  console.log('а проверять пустоту надо так');
}

3. let и const вместо переменной «просто так»

В PHP и Python вы объявляете переменную присваиванием. В JavaScript пишите const, если значение не меняется, и let, если меняется. Ключевое слово var считайте несуществующим: у него другая область видимости, которая порождает баги.

4. Асинхронность — не опция, а образ жизни

Вот главное отличие от PHP. В PHP запрос к базе или к внешнему API блокирует выполнение до ответа, и это нормально. В JavaScript почти всё, что ходит по сети или в файловую систему, асинхронно и возвращает Promise. Вы не получаете результат сразу — вы получаете обещание, что он будет.

// Синтаксис async/await — учите сразу его, а не колбэки
async function loadUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Статус ${response.status}`);
  }
  const user = await response.json();
  return user;
}

// Вызывать тоже нужно с await, внутри async-функции
(async () => {
  try {
    const user = await loadUser(42);
    console.log(user.name);
  } catch (err) {
    console.error('Не загрузилось:', err.message);
  }
})();

Python-разработчикам с опытом asyncio это близко. Тем, кто писал только синхронный код, придётся перестроить мышление: нельзя просто «дождаться» результата в обычной функции.

Если вы пришли из PHP, главная перемена в голове — не синтаксис, а то, что код не ждёт. Пока запрос к API летит, движок продолжает выполнять следующие строки. Осознать это дороже, чем выучить любой метод массива.

5. this ведёт себя не как $this

В PHP $this внутри метода всегда указывает на объект. В JavaScript значение this зависит от того, как вызвана функция, а не где она объявлена. Стрелочные функции (=>) частично решают проблему, потому что не создают собственный this. Пока вы учитесь — предпочитайте стрелочные функции для колбэков и не полагайтесь на this вне классов.

PHP или Python: с чем вам будет проще

Оба фона дают преимущества и ловушки. Сводка ниже.

Вывод: PHP-разработчику тяжелее всего дастся асинхронность, Python-разработчику — синтаксис (скобки, ===, приведение типов). Ни то ни другое не непреодолимо.

Маршрут: что учить в каком порядке

1. Синтаксис и типы. let/const, примитивы, ===, ложные значения. День-два.
2. Функции и стрелочные функции. Параметры по умолчанию, деструктуризация, spread ....
3. Массивы и объекты. map, filter, reduce, find; работа с объектами как со словарями.
4. Асинхронность. Promise, async/await, обработка ошибок через try/catch. Это самый важный блок — не пропускайте.
5. Модули. import/export в ES-модулях.
6. DOM или Node.js. Только после фундамента выбирайте направление: браузер (работа со страницей) или сервер (Node.js, Express).

Фреймворк — React, Vue, Svelte — берите последним. Он не заменяет знание языка, а надстраивается над ним; иначе каждая ошибка в базовом JS будет выглядеть как ошибка фреймворка, и вы потеряете часы на пустом месте.

Если что-то не запускается

• SyntaxError: Cannot use import statement outside a module — в package.json добавьте "type": "module" либо переименуйте файл в .mjs. Node трактует import только в режиме модулей.
• ReferenceError: fetch is not defined — в старых версиях Node fetch отсутствовал. В Node 18+ он встроен; обновите Node или проверьте версию через node --version.
• Промис «не дождался» — вы забыли await и получили в переменной сам Promise, а не значение. Признак: в консоли Promise { <pending> }.
• undefined там, где ждали значение — обращение к несуществующему свойству объекта не бросает ошибку, а возвращает undefined. Проверяйте цепочки через опциональную цепочку: user?.address?.city.

Что делать дальше

Поставьте ESLint с готовым набором правил (например, конфигурацией на базе eslint:recommended) — он будет ловить ==, необъявленные переменные и забытые await ещё до запуска. Возьмите справочник MDN как основной источник по методам и синтаксису: он привязан к версиям стандарта и не устаревает так, как случайные статьи. Первую неделю пишите маленькие скрипты в Node и проверяйте в консоли — асинхронность понимается только на практике, а не по описанию.