1. Основы JavaScript: Синтаксис, структуры данных и функции стандарта ES6+
Основы JavaScript: Синтаксис, структуры данных и функции стандарта ES6+
JavaScript прошел долгий путь от простого скриптового языка для оживления веб-страниц до мощного инструмента, на котором строятся сложные корпоративные системы, серверные приложения и мобильный софт. Чтобы писать качественный код на JavaScript (и, как следствие, на TypeScript), необходимо не просто знать синтаксис, но и понимать, как язык работает «под капотом» и какие возможности предоставляют современные стандарты ECMAScript (ES6+).
В этой статье мы разберем фундамент современного JavaScript: от правильного объявления переменных до элегантной работы со структурами данных.
Эволюция переменных: var, let и const
Долгое время единственным способом объявить переменную в JavaScript было ключевое слово var. Однако оно имело ряд недостатков, связанных с областью видимости (scope) и поднятием (hoisting), что часто приводило к трудноуловимым ошибкам.
С приходом стандарта ES6 (ECMAScript 2015) мы получили два новых инструмента: let и const. Это стало стандартом индустрии, и использование var в современном коде считается дурным тоном.
Область видимости (Scope)
Ключевое отличие let и const от var — это блочная область видимости. Переменная, объявленная внутри блока кода (ограниченного фигурными скобками { ... }), не видна за его пределами.
!Блочная область видимости let/const против функциональной области видимости var
Константы и мутабельность
const создает константу — переменную, которую нельзя переназначить. Однако здесь есть важный нюанс: если в константу записан объект или массив, вы можете менять его содержимое.
Это происходит потому, что const защищает от изменения только саму ссылку на объект в памяти, но не данные внутри этого объекта.
Типы данных: Примитивы и Объекты
В JavaScript существует динамическая типизация. Это означает, что одна и та же переменная может хранить данные разных типов в разное время. Все типы данных делятся на две большие категории: примитивы и объекты.
Примитивные типы
Примитивы передаются по значению. Это значит, что когда вы присваиваете одну переменную другой, создается независимая копия данных.
К примитивам относятся:
true или falseСсылочные типы (Объекты)
Объекты (включая массивы и функции) передаются по ссылке. Когда вы копируете объект, вы копируете не сами данные, а адрес в памяти, где эти данные лежат.
!Принцип работы ссылочных типов данных
Операторы сравнения
В JavaScript есть два вида операторов равенства:
* == (нестрогое равенство): пытается привести типы к общему знаменателю перед сравнением. Часто приводит к неожиданным результатам (например, 0 == '0' вернет true).
* === (строгое равенство): сравнивает и значение, и тип данных. 0 === '0' вернет false.
Золотое правило: Всегда используйте ===, если у вас нет веской причины делать иначе.
Функции в стиле ES6
Функции — это сердце JavaScript. В ES6 появился новый синтаксис — стрелочные функции (Arrow Functions). Они делают код лаконичнее и имеют особенности в работе с контекстом this (о чем мы поговорим в будущих статьях про ООП).
Синтаксис
Классическое объявление:
Стрелочная функция:
Если тело функции состоит из одной строки, можно убрать фигурные скобки и слово return — возврат значения произойдет автоматически (неявный возврат):
Параметры по умолчанию
Раньше для установки значений по умолчанию приходилось писать дополнительные проверки внутри функции. Теперь это делается прямо в объявлении аргументов:
javascript const user = { id: 42, username: 'jdoe', email: 'john@example.com' };
// Старый способ const id = user.id; const username = user.username;
// Новый способ (деструктуризация) const { id, username } = user; javascript const coordinates = [10, 20]; const [x, y] = coordinates; console.log(x); // 10 javascript const parts = ['плечи', 'колени']; const body = ['голова', ...parts, 'пальцы']; // ['голова', 'плечи', 'колени', 'пальцы']
const baseUser = { name: 'Max' }; const fullUser = { ...baseUser, age: 30 }; // { name: 'Max', age: 30 } javascript const sumAll = (...numbers) => { // numbers теперь массив всех переданных аргументов return numbers.reduce((acc, current) => acc + current, 0); };
sumAll(1, 2, 3, 4); // 10
javascript
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
javascript
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
javascript
const numbers = [10, 20, 30];
const total = numbers.reduce((sum, current) => sum + current, 0); // 60
``
!Визуализация процесса обработки данных методами filter, map и reduce
Итоги
Мы рассмотрели ключевые особенности синтаксиса ES6+, которые являются стандартом для современной разработки.
и const вместо var для предсказуемого управления областью видимости. Предпочитайте const по умолчанию.) значительно упрощают работу со сложными структурами данных., filter и reduce` позволяют писать декларативный и читаемый код обработки данных.