var, let, const — в чём разница?

В JavaScript есть три способа объявить переменную. Все они ведут себя по-разному. Разберём детально, но простыми словами, чтобы больше не было путаницы.

🟡 var — привет из прошлого

Особенности:

🔁 Область видимости: не блочная, а функциональная

🔼 Всплывает (hoisting) — поднимается вверх функции, но без значения

🔄 Можно переобъявить и изменить

😵 Может вести себя неожиданно

if (true) {
  var a = 1;
}
console.log(a); // 1 — переменная "вышла" из блока

console.log(b); // undefined — переменная есть, но ещё без значения
var b = 2;

🔵 let — современный стандарт

Особенности:

🔁 Область видимости: блочная

🔼 Всплывает, но в «мертвой зоне» (TDZ — Temporal Dead Zone), поэтому использовать до объявления нельзя

❌ Нельзя переобъявить в той же области видимости

✅ Можно менять значение

if (true) {
  let c = 10;
}
console.log(c); // ❌ ReferenceError — переменная вне блока

let d = 5;
let d = 6; // ❌ тоже ошибка — уже объявлена

🟢 const — постоянство с нюансами

Особенности:

🔁 Область видимости: как у let — блочная

❌ Нельзя изменить значение

⚠️ Но если значение — объект или массив, можно менять его внутренности

📌 Нужно обязательно сразу присвоить значение при объявлении

const x = 42;
x = 100; // ❌ ошибка

const user = { name: "Alice" };
user.name = "Bob"; // ✅ работает
user = { name: "Charlie" }; // ❌ ошибка

В чём подвох в циклах?

Один из частых багов — поведение var в цикле.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3 — потому что var одна на весь цикл

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 0, 1, 2 — потому что let создаёт новую переменную на каждой итерации

Что использовать?

const — почти всегда. Надёжно, понятно, предсказуемо.
let — если переменная будет меняться.
var — только если пишете поддержку старого кода. В новом — не надо.

#простымисловами #javascript #основы

Для чего используется stopPropagation()

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

При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.

#основы #javascript

Что не так с var — и почему его всё реже используют

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

Да, var — не устарел и не запрещён. Он по-прежнему часть JavaScript. Но в современной разработке ему предпочитают let и const. Не потому что это модно, а потому что так безопаснее и предсказуемее.

✅ Почему let и const — лучше:

— работают в пределах блока, а не всей функции;
— защищают от доступа до инициализации (TDZ);
— не позволяют случайно переобъявить переменную;
— делают поведение кода очевидным — особенно в условиях и циклах.

🚫 Почему var — неудачный выбор по умолчанию:

— всплывает с undefined, даже если объявлен ниже;
— работает во всей функции, а не в том месте, где его видно;
— легко переопределяется и ведёт себя неожиданно в асинхронных сценариях и циклах.

⚙️ А как же производительность?

На уровне сборки (Vite, esbuild, Webpack) весь ваш let и const может быть скомпилирован в var, если это действительно ускоряет загрузку.

Вы пишете безопасно, а сборщик сам оптимизирует.

📌 Когда var всё-таки уместен?

Если вы работаете со старым кодом, пишете под очень старые браузеры, или используете особые трюки с hoisting — var может быть оправдан. Но это редкость, а не рекомендация.

Всё ещё не согласны? Делитесь вашим мнением в комментариях.

#простымисловами #javascript

Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux

Естественно, Liquid Glass

Нашел интересный CodePen-проект: Apple со своим обновлением заставили сообщество переосмыслять Liquid Glass, не без этого. Автор реализовал такое с помощью пользовательского шейдера (shaderMaterial) на WebGL с помощью three.js.

Посмотреть код можно здесь: https://codepen.io/supah/pen/dPodbrX

#codepen #css #javascript
@tproger_web

Упрощаем работу с регулярками в JavaScript

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

#фронтенд #javascript #regexp

#простымисловами: Как устроен и зачем нужен async/await

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

async/await решает эту проблему. Это синтаксис, который позволяет писать асинхронный код в привычной пошаговой форме, но под капотом он остаётся неблокирующим.

Как это работает

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

Пример:

async function fetchData() {
  const response = await fetch('/data.json');
  const data = await response.json();
  console.log(data);
}

Такой код легко читать и поддерживать — он идёт по шагам и не содержит вложенных .then() и .catch().

Преимущества по сравнению с коллбэками и промисами:

— Нет вложенных функций и «пирамид ада» из коллбэков.
— Ошибки можно обрабатывать привычным try/catch, как в синхронном коде.
— Логика программы остаётся линейной и предсказуемой.

Коллбэки и промисы по‑прежнему работают и подходят для некоторых случаев, но async/await значительно облегчает написание и поддержку асинхронного кода.

Если вы всё ещё используете цепочки .then() или длинные коллбэки — попробуйте переписать их с async/await. Код станет чище, а ошибки — легче отлавливать.

#javascript

Решаем судоку на JavaScript: хэш‑карты + рекурсия

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

#javascript #алгоритмы

Что такое прототипное наследование в JavaScript?

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

В других языках (например, Java или C#) есть классы — «шаблоны», по которым создаются объекты, и у которых можно наследовать методы и свойства.

В JavaScript всё устроено немного иначе — он изначально не был «классовым», и вместо этого использует **прототипы**.

В JavaScript **каждый объект внутри себя хранит ссылку на другой объект — прототип**.

Если вы обращаетесь к свойству или методу, которого нет в текущем объекте, JavaScript заглянет в его прототип. Не нашёл там? Пойдёт дальше — в прототип прототипа.

Эта цепочка называется **прототипной цепочкой**.

const animal = {
  eats: true
};

const rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

console.log(rabbit.jumps); // true (есть в самом объекте)
console.log(rabbit.eats);  // true (нашёлся в прототипе)

Здесь rabbit не хранит eats напрямую, но когда вы к нему обращаетесь — движок пойдёт по цепочке в animal и найдёт.

**Почему это удобно?**

1. Можно «раздавать» общие методы всем объектам через прототип — не дублируя код.
2. Можно строить целые цепочки наследования без классов.
3. Всё это гибко и динамично.

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

Так что прототипное наследование — это способ объектов «подглядывать» в другие объекты за свойствами и методами. И именно так устроен весь JavaScript под капотом.

#javascript

Apple Lisa в браузере: почувствуйте революцию интерфейсов 80‑х

В 1983‑м Apple выпустила Lisa — первый коммерческий компьютер с графическим интерфейсом. Тогда он стоил почти $10 000 и казался фантастикой.

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

Сейчас проект ещё в альфе, но уже отлично показывает, какой была революция интерфейсов 80‑х и первый графический опыт на ПК.

Подробности о проекте и ссылка на эмулятор здесь.

#историяit #apple #javascript

Почему push() может навредить вашему коду — и как писать лучше

На первый взгляд безобидный метод массива push() может испортить данные, запутать логику и вызвать баги. Особенно это заметно в React и других реактивных средах. В статье — наглядно и с примерами: чем опасна мутация массивов, как это приводит к скрытым ошибкам и какой подход используют опытные разработчики вместо push().

А вы отказались от push() или всё ещё используете?

#javascript #фронтенд

Hack Frontend: тренируйтесь для собеседования с огоньком

Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.

Что внутри:

— Современный фронтенд‑стек и лучшие практики.
— Задания, которые реальнее всего встретить на интервью.
— Построено для реализации — вы сразу тренируетесь на реальных примерах, не просто читаете теорию.

#фронтенд #тренажер #javascript

Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

Асинхронная итерация по-новому: как работает Array.fromAsync в JavaScript

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

В статье — нюансы работы метода, примеры из жизни и сценарии, где он может здорово сэкономить нервы и строчки кода.

#javascript #фронтенд

ECMAScript 2025: что нового появилось в JavaScript

Очередная версия языка уже одобрена и теперь настала пора познакомиться с новинками этого года. В статье — обзор ключевых фич ECMAScript 2025, которые действительно пригодятся в работе: импорт атрибутов, Promise.try(), экранирование регулярок, помощники итераторов и многое другое.

#javascript #фронтенд #es2025

Создание доступных табов пользовательского интерфейса в JavaScript

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

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

https://blog.logrocket.com/build-accessible-user-interface-tabs-javascript/

#javascript

Функциональное программирование от А до Я на примере JavaScript: монады, функторы, каррирование, композиция

Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.

Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4

#javascript #лучшиепрактики

Практика JavaScript: делаем целый сайт за 2 часа с нуля

Ловите полезный двухчасовой курс по созданию сайта с JavaScript, где вы:

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

Видео взято с YouTube, поэтому если предпочитаете смотреть там, то вот ссылка: youtu.be/0ViiJ8qTCFM

#видео #курс #javascript

Пример необычной анимации на чистом JS и CSS

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

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

#codepen #javascript #css