Изучите JavaScript за 10 минут

1 September 2025 — Язык Программирования

JavaScript — это высокоуровневый интерпретируемый язык программирования, известный своей универсальностью и широким использованием в веб-разработке. Это руководство охватывает современные функции JavaScript (ES6+), чтобы помочь вам быстро изучить язык.

1. Написание вашей первой программы на JavaScript

Начнем с простой программы. Создайте файл с именем hello.js и введите следующий код:

console.log("Hello, World!");

Сохраните файл и выполните следующую команду в терминале или командной строке:

node hello.js

Или включите его в HTML-файл:

<script>
  console.log("Hello, World!");
</script>

Вывод будет следующим:

Hello, World!

Эта простая программа демонстрирует базовую функциональность вывода JavaScript. Функция console.log() используется для отображения текстовой информации в консоли.

2. Базовый синтаксис

Синтаксис JavaScript похож на другие языки в стиле C. Он использует точку с запятой для завершения операторов и фигурные скобки {} для определения блоков кода.

// Это однострочный комментарий
console.log("Hello, World!");

/*
Это многострочный комментарий,
охватывающий несколько строк.
*/

Основные правила синтаксиса в JavaScript:

Точки с запятой: Необязательны, но рекомендуются для завершения операторов
Комментарии: Однострочные комментарии начинаются с //, многострочные с /* */
Чувствительность к регистру: JavaScript чувствителен к регистру
Блоки кода: Определяются фигурными скобками {}

3. Переменные и типы данных

В JavaScript переменные объявляются с использованием let, const или var. Современный JavaScript предпочитает let и const.

Объявление переменных:

let name = "John"; // Изменяемая переменная
const age = 25;     // Неизменяемая константа
var oldWay = "deprecated"; // Избегайте использования var

Основные типы данных в JavaScript:

Number: 42, 3.14, -10
String: "hello", 'world', `template`
Boolean: true, false
Undefined: undefined (переменная объявлена, но не присвоена)
Null: null (преднамеренное отсутствие значения)
Object: {key: "value"}, [1, 2, 3]
Symbol: Symbol("description") (ES6+)
BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Тип Number

JavaScript использует 64-битные числа с плавающей запятой для всех числовых значений.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 Тип String

Строки могут быть созданы с одинарными кавычками, двойными кавычками или шаблонными литералами.

let single = 'Строка с одинарными кавычками';
let double = "Строка с двойными кавычками";
let template = `Шаблонный литерал`;

// Шаблонные литералы с интерполяцией
let name = "Alice";
let greeting = `Привет, ${name}!`; // "Привет, Alice!"

Операции со строками:

let text = "JavaScript программирование";
console.log(text.length);        // Длина строки: 22
console.log(text.toUpperCase()); // "JAVASCRIPT ПРОГРАММИРОВАНИЕ"
console.log(text.toLowerCase()); // "javascript программирование"
console.log(text[0]);            // Первый символ: "J"
console.log(text.slice(0, 10)); // "JavaScript"

3.3 Тип Boolean

Логический тип имеет два значения: true и false.

let isActive = true;
let isComplete = false;

// Логические операции
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined и Null

undefined означает, что переменная была объявлена, но ей не было присвоено значение. null — это преднамеренное отсутствие любого значения.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("Переменная не определена");
}

if (empty === null) {
  console.log("Значение равно null");
}

4. Структуры данных

4.1 Массив

Массивы — это упорядоченные изменяемые коллекции значений.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // Добавить элемент: [1, 2, 3, 4, 5, 6]
numbers.pop();          // Удалить последний: [1, 2, 3, 4, 5]
numbers.unshift(0);     // Добавить в начало: [0, 1, 2, 3, 4, 5]
numbers.shift();        // Удалить первый: [1, 2, 3, 4, 5]
numbers[0] = 10;        // Изменить: [10, 2, 3, 4, 5]

Методы массивов:

let fruits = ["яблоко", "банан", "апельсин"];

// Итерация
fruits.forEach(fruit => console.log(fruit));

// Преобразование
let lengths = fruits.map(fruit => fruit.length); // [6, 5, 8]

// Фильтрация
let longFruits = fruits.filter(fruit => fruit.length > 5); // ["яблоко", "апельсин"]

// Поиск
let hasApple = fruits.includes("яблоко"); // true
let bananaIndex = fruits.indexOf("банан"); // 1

4.2 Объект

Объекты — это коллекции пар ключ-значение.

let person = {
  name: "John",
  age: 30,
  city: "Нью-Йорк",
  isStudent: false
};

// Доступ к свойствам
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// Добавление свойств
person.country = "США";
person["occupation"] = "Разработчик";

// Удаление свойств
delete person.isStudent;

// Методы объектов
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "Нью-Йорк", "США", "Разработчик"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

Set — это коллекции уникальных значений.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Операции с Set
numbers.add(6);       // Добавить значение
numbers.delete(1);    // Удалить значение
numbers.has(2);       // true
numbers.size;         // 5

// Итерация
numbers.forEach(num => console.log(num));

4.4 Map

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

let map = new Map();
map.set("name", "Alice");
map.set(1, "номер один");
map.set(true, "логическое истина");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// Итерация
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. Операторы

JavaScript предоставляет различные операторы для вычислений и сравнений.

Арифметические: +, -, *, /, %, ** (возведение в степень)
Сравнения: ==, ===, !=, !==, >, <, >=, <=
Логические: &&, ||, !
Присваивания: =, +=, -=, *=, /=, %=
Тернарный: condition ? expr1 : expr2

5.1 Арифметические операторы

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 Операторы сравнения

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (строгое равенство)
console.log(x != y);    // true
console.log(x !== y);   // true (строгое неравенство)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 Логические операторы

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. Управление потоком

6.1 Операторы if

let age = 20;

if (age >= 18) {
  console.log("Взрослый");
} else if (age >= 13) {
  console.log("Подросток");
} else {
  console.log("Ребенок");
}

6.2 Оператор switch

let day = "Понедельник";

switch (day) {
  case "Понедельник":
    console.log("Начало недели");
    break;
  case "Пятница":
    console.log("Скоро выходные");
    break;
  default:
    console.log("Обычный день");
}

6.3 Циклы for

// Традиционный цикл for
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Цикл for...of (массивы, строки)
let fruits = ["яблоко", "банан", "апельсин"];
for (let fruit of fruits) {
  console.log(fruit);
}

// Цикл for...in (свойства объектов)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 Циклы while

// Цикл while
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// Цикл do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break и continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Выйти из цикла
  }
  if (i % 2 === 0) {
    continue; // Пропустить четные числа
  }
  console.log(i); // 1, 3
}

7. Функции

Функции — это повторно используемые блоки кода.

7.1 Объявление функций

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

console.log(greet("Alice")); // "Привет, Alice!"

7.2 Функциональные выражения

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 Стрелочные функции (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `Привет, ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "Привет, Bob!"

7.4 Параметры по умолчанию

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 Параметры rest

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 Оператор spread

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "Нью-Йорк"}; // {name: "John", age: 30, city: "Нью-Йорк"}

8. Классы и объекты (ES6+)

8.1 Объявление класса

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Я ${this.name}, мне ${this.age} лет`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} отпраздновал день рождения, теперь ${this.age} лет`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "Я John, мне 25 лет"
console.log(person.haveBirthday());   // "John отпраздновал день рождения, теперь 26 лет"

8.2 Наследование

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} издает звук`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "Собака");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} лает`;
  }

  fetch() {
    return `${this.name} приносит мяч`;
  }
}

let dog = new Dog("Buddy", "Золотистый ретривер");
console.log(dog.makeSound()); // "Buddy лает"
console.log(dog.fetch());     // "Buddy приносит мяч"

8.3 Геттеры и сеттеры

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. Асинхронный JavaScript

9.1 Колбэки

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные получены");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Данные получены" через 1 секунду
});

9.2 Промисы

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Данные получены");
      // reject("Произошла ошибка");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "Данные получены"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "Данные получены"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

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

10. Обработка ошибок

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("Деление на ноль");
  }
  console.log(result);
} catch (error) {
  console.error("Ошибка:", error.message);
} finally {
  console.log("Это выполняется всегда");
}

11. Модули (ES6+)

11.1 Экспорт

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 Импорт

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

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. Современные функции JavaScript

12.1 Деструктуризация

// Деструктуризация массива
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// Деструктуризация объекта
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// Деструктуризация параметров функции
function greet({name, age}) {
  return `Привет ${name}, тебе ${age} лет`;
}

12.2 Шаблонные литералы

let name = "Alice";
let age = 25;

// Базовая интерполяция
let greeting = `Привет, ${name}!`;

// Многострочные строки
let message = `
  Имя: ${name}
  Возраст: ${age}
  Статус: ${age >= 18 ? "Взрослый" : "Несовершеннолетний"}
`;

// Вычисление выражений
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 Опциональная цепочка (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "Нью-Йорк"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "Нью-Йорк"
console.log(user?.employment?.company);     // undefined (без ошибки)

12.4 Оператор нулевого слияния (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "Неизвестно");    // "Неизвестно" (пустая строка ложна)
console.log(name ?? "Неизвестно");    // "" (только null/undefined)

console.log(age || 18);           // 18 (0 ложен)
console.log(age ?? 18);           // 0 (только null/undefined)

console.log(city ?? "Неизвестно");   // "Неизвестно"
console.log(country ?? "США");    // "США"

13. Полезные методы массивов

let numbers = [1, 2, 3, 4, 5];

// map: преобразовать каждый элемент
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: выбрать элементы
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: накапливать значения
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: найти первый соответствующий элемент
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: проверить, соответствует ли какой-либо элемент
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: проверить, соответствуют ли все элементы
let allPositive = numbers.every(n => n > 0); // true

// sort: отсортировать элементы
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. Дата и время

let now = new Date();
console.log(now.toString());      // Текущая дата и время
console.log(now.getFullYear());   // Текущий год
console.log(now.getMonth());      // Текущий месяц (0-11)
console.log(now.getDate());       // Текущий день (1-31)
console.log(now.getHours());      // Текущий час (0-23)

// Форматирование дат
console.log(now.toLocaleDateString()); // Локализованная строка даты
console.log(now.toLocaleTimeString()); // Локализованная строка времени
console.log(now.toISOString());        // Строка в формате ISO

// Создание конкретных дат
let specificDate = new Date(2025, 0, 1); // 1 января 2025
let timestamp = new Date(1640995200000); // Из временной метки

15. Регулярные выражения

let text = "Привет, моя почта [email protected] и телефон 123-456-7890";

// Паттерн email
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// Паттерн телефона
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// Метод test
let isValidEmail = emailPattern.test("[email protected]"); // true

// Метод replace
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

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