LEARN X · ЗА 16 МИН
JavaScript
JavaScript за 16 минут: весь язык на одной странице через закомментированный код — переменные, строки, массивы, объекты, функции, классы, промисы, модули.
JavaScript — язык браузеров, серверов (Node.js) и почти всего остального. Ниже весь язык на одной странице: читай сверху вниз как единый скрипт, всё объяснение — в комментариях кода. Запускай куски в консоли браузера (F12) и смотри результаты после // =>.
1. Вывод и комментарии
// Это однострочный комментарий — от // до конца строки.
/* А это многострочный
комментарий на несколько строк. */
// console.log — главный инструмент отладки, печатает в консоль:
console.log("Привет, мир!"); // => Привет, мир!
console.log(2 + 2); // => 4
console.log("a", "b", 3); // можно несколько аргументов => a b 3
console.warn("предупреждение"); // жёлтое сообщение
console.error("ошибка"); // красное сообщение
2. Переменные
Объявляй переменные через let (можно менять) и const (константа). Старое var почти не используют.
let age = 25; // изменяемая переменная
age = 26; // можно переприсвоить
const name = "Аня"; // константа — переприсвоить нельзя
// name = "Боря"; // => TypeError: Assignment to constant variable
var old = 1; // устаревший способ, избегай его
// Основные типы данных:
let n = 42; // number — число (целые и дробные вместе)
let f = 3.14; // тоже number
let s = "текст"; // string — строка
let flag = true; // boolean — true / false
let nothing = null; // null — намеренное «пусто»
let undef = undefined; // undefined — значение не задано
let big = 9007199254740991n; // bigint — большие целые
let sym = Symbol("id"); // symbol — уникальный идентификатор
// typeof возвращает тип значения строкой:
console.log(typeof n); // => "number"
console.log(typeof s); // => "string"
console.log(typeof flag); // => "boolean"
console.log(typeof undef); // => "undefined"
console.log(typeof null); // => "object" (историческая ошибка JS!)
console.log(typeof {}); // => "object"
console.log(typeof []); // => "object" (массив — это объект)
console.log(typeof function(){}); // => "function"
3. Числа и операторы
// Арифметика:
console.log(5 + 2); // => 7 сложение
console.log(5 - 2); // => 3 вычитание
console.log(5 * 2); // => 10 умножение
console.log(5 / 2); // => 2.5 деление (всегда дробное!)
console.log(5 % 2); // => 1 остаток от деления
console.log(5 ** 2); // => 25 возведение в степень
// Инкремент и декремент:
let x = 10;
x++; // x стало 11
x--; // x стало 10
x += 5; // x += 5 — то же что x = x + 5 => 15
// Сравнения возвращают boolean:
console.log(2 > 1); // => true
console.log(2 <= 2); // => true
// ВАЖНО: === строгое сравнение (без приведения типов), == нестрогое.
console.log(1 === 1); // => true
console.log(1 === "1"); // => false (разные типы)
console.log(1 == "1"); // => true (== приводит "1" к числу — опасно!)
console.log(0 == false);// => true (тоже приведение)
console.log(0 === false);// => false
// Правило: всегда используй === и !==, забудь про == и !=.
// Полезные функции и значения:
console.log(Math.max(1, 5, 3)); // => 5
console.log(Math.round(4.6)); // => 5
console.log(Math.floor(4.9)); // => 4
console.log(Math.random()); // случайное число [0, 1)
console.log(Number("42")); // строка -> число => 42
console.log(parseInt("42px")); // => 42
console.log(0.1 + 0.2); // => 0.30000000000000004 (плавающая точка!)
console.log(NaN); // "не число" — результат битой арифметики
console.log(Infinity); // бесконечность
4. Строки
let a = "двойные";
let b = 'одинарные'; // кавычки равнозначны
// Шаблонные литералы (обратные кавычки `) — вставка через ${...}:
let user = "Аня";
let greet = `Привет, ${user}! 2+2=${2 + 2}`;
console.log(greet); // => Привет, Аня! 2+2=4
// Многострочный текст — тоже через обратные кавычки:
let multi = `строка 1
строка 2`;
// Конкатенация через +:
console.log("abc" + "def"); // => "abcdef"
// Методы строк (строки неизменяемы — методы возвращают новую строку):
let str = "Hello, World";
console.log(str.length); // => 12 (это свойство, не метод)
console.log(str.toUpperCase()); // => "HELLO, WORLD"
console.log(str.toLowerCase()); // => "hello, world"
console.log(str.includes("World"));// => true
console.log(str.startsWith("He")); // => true
console.log(str.indexOf("World")); // => 7
console.log(str.slice(0, 5)); // => "Hello"
console.log(str.replace("World", "JS")); // => "Hello, JS"
console.log(" trim ".trim()); // => "trim"
console.log("a,b,c".split(",")); // => ["a", "b", "c"]
console.log("ab".repeat(3)); // => "ababab"
console.log(str[0]); // => "H" (доступ по индексу)
5. Массивы
let arr = [1, 2, 3, "строка", true]; // элементы любых типов
console.log(arr[0]); // => 1 (индексы с нуля)
console.log(arr.length); // => 5
arr[1] = 20; // массивы изменяемы
// Добавление и удаление:
arr.push("конец"); // добавить в конец
arr.pop(); // удалить с конца (и вернуть)
arr.unshift("начало"); // добавить в начало
arr.shift(); // удалить с начала
let nums = [1, 2, 3, 4, 5];
console.log(nums.includes(3)); // => true
console.log(nums.indexOf(3)); // => 2
console.log(nums.join("-")); // => "1-2-3-4-5"
console.log(nums.slice(1, 3)); // => [2, 3] (не меняет оригинал)
console.log([3, 1, 2].sort()); // => [1, 2, 3]
console.log([1, 2, 3].reverse()); // => [3, 2, 1]
// Функциональные методы — основа повседневного JS:
// map — преобразовать каждый элемент, вернуть новый массив:
console.log(nums.map(x => x * 2)); // => [2, 4, 6, 8, 10]
// filter — оставить подходящие элементы:
console.log(nums.filter(x => x % 2 === 0)); // => [2, 4]
// reduce — свернуть массив в одно значение (0 — старт аккумулятора):
console.log(nums.reduce((sum, x) => sum + x, 0)); // => 15
// find — первый подходящий элемент:
console.log(nums.find(x => x > 3)); // => 4
// some / every — хотя бы один / все:
console.log(nums.some(x => x > 4)); // => true
console.log(nums.every(x => x > 0)); // => true
// Спред-оператор (...) — "разворачивает" массив:
let more = [...nums, 6, 7]; // копия + новые => [1,2,3,4,5,6,7]
let merged = [...[1, 2], ...[3, 4]]; // => [1, 2, 3, 4]
let copy = [...nums]; // поверхностная копия
console.log(Math.max(...nums)); // => 5 (массив как аргументы)
6. Объекты
// Объект — набор пар ключ: значение:
let person = {
name: "Аня",
age: 25,
isAdmin: false,
greet() { // метод (функция внутри объекта)
return `Привет, я ${this.name}`; // this — сам объект
}
};
// Доступ к свойствам:
console.log(person.name); // => "Аня" (через точку)
console.log(person["age"]); // => 25 (через скобки)
console.log(person.greet()); // => "Привет, я Аня"
person.city = "Москва"; // добавить свойство
delete person.isAdmin; // удалить свойство
// Деструктуризация — вытащить свойства в переменные:
const { name, age } = person;
console.log(name, age); // => "Аня" 25
const { city = "неизвестно" } = person; // со значением по умолчанию
// Спред для объектов — копирование и слияние:
let base = { a: 1, b: 2 };
let extended = { ...base, c: 3 }; // => { a: 1, b: 2, c: 3 }
let override = { ...base, b: 99 };// => { a: 1, b: 99 }
// Сокращённая запись свойств:
let xx = 1, yy = 2;
let point = { xx, yy }; // => { xx: 1, yy: 2 }
// Перебор объекта:
console.log(Object.keys(base)); // => ["a", "b"]
console.log(Object.values(base)); // => [1, 2]
console.log(Object.entries(base));// => [["a",1], ["b",2]]
7. Условия
let score = 75;
// if / else if / else:
if (score >= 90) {
console.log("отлично");
} else if (score >= 60) {
console.log("норм"); // => норм
} else {
console.log("плохо");
}
// Тернарный оператор — короткое if/else как выражение:
let status = score >= 60 ? "сдал" : "не сдал";
console.log(status); // => "сдал"
// switch — выбор по значению:
let day = 3;
switch (day) {
case 1: console.log("Пн"); break; // break обязателен!
case 3: console.log("Ср"); break; // => Ср
default: console.log("другой день");
}
// Ложные (falsy) значения: false, 0, "", null, undefined, NaN.
// Всё остальное — истинно (truthy).
if ("") console.log("не выполнится");
if ("текст") console.log("выполнится"); // => выполнится
// ?. — опциональная цепочка: безопасный доступ, без ошибки:
let u = { profile: { name: "Аня" } };
console.log(u.profile?.name); // => "Аня"
console.log(u.address?.city); // => undefined (а не ошибка!)
// ?? — оператор нулевого слияния: запасное значение, если null/undefined:
let input = null;
console.log(input ?? "по умолчанию"); // => "по умолчанию"
console.log(0 ?? "запас"); // => 0 (0 не null, в отличие от ||)
8. Циклы
// Классический for: (старт; условие; шаг)
for (let i = 0; i < 3; i++) {
console.log(i); // => 0, 1, 2
}
// for..of — перебор ЗНАЧЕНИЙ массива (или строки, Set, Map):
for (const item of ["a", "b", "c"]) {
console.log(item); // => a, b, c
}
// for..in — перебор КЛЮЧЕЙ объекта:
let obj = { x: 1, y: 2 };
for (const key in obj) {
console.log(key, obj[key]); // => x 1, y 2
}
// while — пока условие истинно:
let n = 3;
while (n > 0) {
console.log(n); // => 3, 2, 1
n--;
}
// do..while — тело выполнится хотя бы раз:
let k = 0;
do {
console.log("раз"); // => раз (выполнится один раз)
k++;
} while (k < 0);
// forEach — метод массива, для каждого элемента вызывает функцию:
[10, 20, 30].forEach((value, index) => {
console.log(index, value); // => 0 10, 1 20, 2 30
});
// break прерывает цикл, continue пропускает итерацию:
for (let i = 0; i < 5; i++) {
if (i === 1) continue; // пропустить 1
if (i === 3) break; // выйти на 3
console.log(i); // => 0, 2
}
9. Функции
// Объявление функции:
function add(a, b) {
return a + b; // return возвращает результат
}
console.log(add(2, 3)); // => 5
// Функциональное выражение (функция как значение):
const multiply = function (a, b) {
return a * b;
};
// Стрелочная функция — короткий синтаксис:
const square = (x) => x * x; // одно выражение — return неявный
const sum = (a, b) => a + b;
const hello = () => "привет"; // без аргументов
const withBody = (x) => { // с телом — return нужен явно
const r = x * 2;
return r;
};
console.log(square(4)); // => 16
// Параметры по умолчанию:
function greet(name = "гость") {
return `Привет, ${name}`;
}
console.log(greet()); // => "Привет, гость"
console.log(greet("Аня")); // => "Привет, Аня"
// Rest-параметры (...) — собрать все аргументы в массив:
function total(...numbers) {
return numbers.reduce((s, n) => s + n, 0);
}
console.log(total(1, 2, 3, 4)); // => 10
// Замыкание — функция запоминает переменные из внешней области:
function counter() {
let count = 0; // живёт между вызовами
return () => ++count; // внутренняя функция помнит count
}
const next = counter();
console.log(next()); // => 1
console.log(next()); // => 2
console.log(next()); // => 3 (count сохраняется!)
10. Классы
class Animal {
constructor(name) { // конструктор — вызывается при new
this.name = name; // this — создаваемый объект
}
speak() { // метод
return `${this.name} издаёт звук`;
}
get label() { // геттер — обращение как к свойству
return `Животное: ${this.name}`;
}
static create(name) { // статический метод — у класса, не у объекта
return new Animal(name);
}
}
const cat = new Animal("Кот"); // new создаёт экземпляр
console.log(cat.speak()); // => "Кот издаёт звук"
console.log(cat.label); // => "Животное: Кот" (без скобок — геттер)
console.log(Animal.create("Пёс").name); // => "Пёс"
// Наследование через extends:
class Dog extends Animal {
constructor(name, breed) {
super(name); // super вызывает конструктор родителя
this.breed = breed;
}
speak() { // переопределяем метод
return `${this.name} лает! (${this.breed})`;
}
}
const rex = new Dog("Рекс", "овчарка");
console.log(rex.speak()); // => "Рекс лает! (овчарка)"
console.log(rex.label); // => "Животное: Рекс" (унаследован)
console.log(rex instanceof Animal); // => true
11. Промисы и async/await
Промис (Promise) — обещание результата, который придёт позже (запрос к серверу, таймер). async/await — удобный синтаксис над промисами.
// Промис может выполниться (resolve) или провалиться (reject):
const promise = new Promise((resolve, reject) => {
const ok = true;
if (ok) resolve("успех");
else reject("ошибка");
});
// Обработка через .then / .catch / .finally:
promise
.then(result => console.log(result)) // => "успех"
.catch(err => console.log(err)) // при reject
.finally(() => console.log("готово")); // в любом случае
// Функция, возвращающая промис (имитация запроса):
function fetchUser(id) {
return new Promise(resolve => {
setTimeout(() => resolve({ id, name: "Аня" }), 100);
});
}
// async/await — пишем асинхронный код как обычный:
async function main() {
const user = await fetchUser(1); // await ждёт результата промиса
console.log(user.name); // => "Аня"
try {
const data = await fetchUser(2);
console.log(data.id); // => 2
} catch (err) {
console.log("Поймали ошибку:", err);
}
}
main();
// Параллельное выполнение нескольких промисов:
async function loadAll() {
const users = await Promise.all([fetchUser(1), fetchUser(2)]);
console.log(users.length); // => 2 (оба завершились)
}
loadAll();
12. Модули (import / export)
Большие программы разбивают на файлы-модули. Один файл экспортирует, другой импортирует.
// === файл math.js ===
export const PI = 3.14159; // именованный экспорт
export function add(a, b) { // именованный экспорт
return a + b;
}
export default function square(x) { // экспорт по умолчанию (один на файл)
return x * x;
}
// === файл app.js ===
// Импорт default (имя выбираешь сам) + именованных в { }:
import square, { PI, add } from "./math.js";
console.log(PI); // => 3.14159
console.log(add(2, 3)); // => 5
console.log(square(4)); // => 16
// Импорт с переименованием:
import { add as sum } from "./math.js";
console.log(sum(1, 1)); // => 2
// Импорт всего модуля одним объектом:
import * as math from "./math.js";
console.log(math.PI); // => 3.14159
// В браузере подключают так: <script type="module" src="app.js"></script>
13. Полезное напоследок
// Map — словарь с ключами любого типа (не только строки):
const map = new Map();
map.set("name", "Аня");
map.set(1, "число-ключ");
console.log(map.get("name")); // => "Аня"
console.log(map.has(1)); // => true
console.log(map.size); // => 2
map.delete(1);
for (const [key, value] of map) console.log(key, value);
// Set — коллекция уникальных значений:
const set = new Set([1, 2, 2, 3, 3, 3]);
console.log(set.size); // => 3 (дубликаты убраны)
console.log(set.has(2)); // => true
console.log([...set]); // => [1, 2, 3] (обратно в массив)
// JSON — обмен данными между сервером и клиентом:
const obj = { name: "Аня", age: 25, tags: ["a", "b"] };
const json = JSON.stringify(obj); // объект -> строка
console.log(json); // => '{"name":"Аня","age":25,"tags":["a","b"]}'
const back = JSON.parse(json); // строка -> объект
console.log(back.age); // => 25
// Опциональная цепочка с методами и массивами:
const data = { list: [{ id: 1 }] };
console.log(data.list?.[0]?.id); // => 1
console.log(data.missing?.fn?.()); // => undefined (без ошибки)
// Date — работа с датами (кратко):
const now = new Date(); // текущий момент
console.log(now.getFullYear()); // => например 2026
console.log(now.getMonth()); // => 0..11 (январь = 0!)
const d = new Date("2026-06-16"); // из строки ISO
console.log(d.getDate()); // => 16
console.log(Date.now()); // миллисекунды с 1970 года
// На этом экспресс-тур окончен. Открывай консоль (F12) и пробуй!
