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

Digital-студия WNDER

Модули: больше не глобальный хаос

Раньше весь код лежал в одном файле или в глобальной области. Сейчас так никто не делает. Современный подход — ES-модули (ESM). Они позволяют разбивать код на части и подключать только нужное.

Пример: у вас есть файл math.js с функциями сложения и вычитания. Вы экспортируете их, а в другом файле импортируете.

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add } from './math.js';

console.log(add(2, 3)); // 5

Это чище, чем старые IIFE или глобальные переменные. Плюс сборщики вроде Webpack или Vite автоматически оптимизируют такие модули.

Правило: Всегда используйте ES-модули вместо глобальных переменных. Это упрощает тестирование и повторное использование кода.

Асинхронность: от колбеков к async/await

Асинхронный код — боль любого новичка. Сначала были колбеки, потом промисы, а сейчас стандарт — async/await. Он делает асинхронный код похожим на синхронный, что упрощает чтение.

Вот как выглядит запрос к API с async/await:

async function fetchUser() {
  try {
    const response = await fetch('https://api.example.com/user/1');
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Ошибка:', error);
  }
}

fetchUser();

Согласитесь, это читается легче, чем цепочка .then(). Но не забывайте про обработку ошибок — try/catch обязателен.

Лайфхак: Если нужно выполнить несколько асинхронных операций параллельно, используйте Promise.all(). Это сэкономит время.

Функциональное программирование и неизменяемость

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

Вместо того чтобы менять массив, используйте методы вроде map, filter, reduce.

const numbers = [1, 2, 3, 4];

// Плохо: мутация
// numbers.push(5);

// Хорошо: создание нового массива
const newNumbers = [...numbers, 5];

// Ещё пример: удвоение каждого элемента
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

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

Инструменты: сборщики, линтеры, форматтеры

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

  • Сборщики: Vite, Webpack, Parcel. Они собирают модули в один файл, оптимизируют и минифицируют код.
  • Линтеры: ESLint. Находит ошибки и потенциальные проблемы.
  • Форматтеры: Prettier. Приводит код к единому стилю автоматически.
  • Транспиляторы: Babel. Позволяет использовать новый синтаксис даже в старых браузерах.

Сравним популярные сборщики:

Инструмент Скорость Сложность настройки Основное применение
Vite Очень высокая Низкая Современные SPA
Webpack Средняя Высокая Крупные проекты
Parcel Высокая Очень низкая Быстрый старт
Правило: Всегда настраивайте ESLint и Prettier в проекте. Это сэкономит часы код-ревью и споров о стиле.

Фреймворки: React, Vue, Angular и другие

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

  • React — гибкий, огромное сообщество, много вакансий. Но требует знания JSX и экосистемы.
  • Vue — простой вход, отличная документация, подходит для быстрого прототипирования.
  • Angular — строгий, полноценный фреймворк с TypeScript из коробки. Хорош для энтерпрайза.

Вот пример компонента на React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Вы нажали {count} раз

      
    

  );
}

export default Counter;

А вот тот же компонент на Vue:

// Vue 3 Composition API
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return { count };
  },
  template: `
    

      
Вы нажали {{ count }} раз

      
    

  `
};

Оба подхода хороши, но React даёт больше свободы, а Vue — более структурирован.

Тестирование: не забываем про качество

Современный подход немыслим без тестов. Jest, Mocha, Vitest — вот основные инструменты. Они позволяют писать unit-тесты, интеграционные и end-to-end.

Простой тест на Jest:

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('складывает 1 + 2 = 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Тесты помогают избежать регрессий при рефакторинге. Не пренебрегайте ими, даже в маленьких проектах.

Лайфхак: Начните с тестирования самых критичных функций. Не нужно покрывать всё сразу — это может отпугнуть.

TypeScript: строгая типизация набирает обороты

Многие проекты переходят на TypeScript. Он добавляет статические типы поверх JavaScript, что позволяет ловить ошибки на этапе компиляции. Это особенно ценно в больших командах.

Пример на TypeScript:

// typescript
function greet(name: string): string {
  return `Привет, ${name}!`;
}

console.log(greet('Мир')); // Привет, Мир!
// console.log(greet(123)); // Ошибка компиляции

TypeScript не заменяет JavaScript, а расширяет его. Если вы ещё не пробовали — самое время.

Что в итоге

Современная разработка на JavaScript — это не просто язык, а целая экосистема. Используйте модули, async/await, функциональные подходы, инструменты автоматизации и тестирование. Выбирайте фреймворк под задачу, а не потому что модно. И не бойтесь TypeScript — он делает код надёжнее.

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

Студия WNDER