1. Объекты Встроенные методы

1) Статические методы объекта

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

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
} 

// Вызов статических методов
console.log(MathUtils.add(5, 3));       // Вывод: 8
console.log(MathUtils.subtract(10, 4)); // Вывод: 6

2) Флаги и дескрипторы свойств

Дескрипторы свойств

Флаги и дескрипторы свойств используются для определения и настройки поведения свойств объектов. Они позволяют управлять доступом, изменением и удалением свойств объектов. Вот краткое объяснение каждого из них:

Дескриптор свойства - это объект, который определяет характеристики свойства объекта, такие как:

• value: Значение свойства.

• writable: Можно ли изменять значение свойства.

• enumerable: Будет ли свойство перечисляемым в циклах.

• configurable: Можно ли удалять или изменять дескриптор свойства.

Пример использования дескрипторов свойств:

const obj = {};
Object.defineProperty(obj, 'prop', {
  value: 42,
  writable: false,
  enumerable: true,
  configurable: false
});

Флаги

Флаги свойств - это битовые флаги, которые определяют различные аспекты свойства, такие как:

• writable: Если установлен в false, значение свойства нельзя изменить.

• enumerable: Если установлен в false, свойство не будет перечисляемым в циклах.

• configurable: Если установлен в false, дескриптор свойства не может быть изменен или свойство удалено.

Пример использования флагов свойств:

const obj = {
  prop: 42
};
Object.defineProperty(obj, 'prop', {
  writable: false,
  enumerable: true,
  configurable: false
});

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

3) Итерируемые объекты, использование Symbol.iterator(optional)

Создание итерируемых объектов позволяет определить способ, каким образом объект будет перебираться с помощью цикла for...of, ...spread, и других механизмов итерации. Для этого используется символ Symbol.iterator.

Давайте рассмотрим пример создания итерируемого объекта:

const myIterable = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    return {
      next() {
        if (index < data.length) {
          return { value: data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// Используем итерируемый объект
for (const item of myIterable) {
  console.log(item);
}

В этом примере объект myIterable становится итерируемым благодаря методу, связанному с символом Symbol.iterator. Метод next этого итератора возвращает объект с двумя свойствами: value (значение текущего элемента) и done (логическое значение, показывающее, закончен ли перебор). Когда перебор завершается, done устанавливается в true.

Теперь, если мы выполним цикл for...of или используем оператор spread (...), то мы получим доступ к элементам объекта myIterable.

2. Типы данных и выражения ECMAScript

1) Вычисляемые свойства объекта

Вычисляемые свойства объекта (Computed properties) - это особый способ определения свойств объекта, который позволяет использовать выражения в качестве имен свойств. Это позволяет динамически определять свойства объекта на основе вычислений во время выполнения программы.

Давайте рассмотрим пример:

const dynamicKey = "age";
const person = {
  name: "John",
  [dynamicKey]: 30, // Вычисляемое свойство
};

console.log(person.name); // Вывод: John
console.log(person.age);  // Вывод: 30

В этом примере свойство age объекта person вычисляется динамически с использованием переменной dynamicKey. Таким образом, вы можете создавать свойства, чьи имена определяются в зависимости от контекста или вычислений.

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

2) Перебор ключей объекта

Перебор (или итерация) ключей объекта в JavaScript можно осуществить с использованием различных методов.

Вот несколько способов:

1. Цикл for...in:

Цикл for...in позволяет перебрать все перечисляемые свойства объекта, включая его прототип. Обычно используется для перебора ключей объекта.

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Выводит: a, b, c
}

2. Метод Object.keys():

Метод Object.keys() возвращает массив, содержащий все собственные перечисляемые ключи объекта.

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // Выводит: ["a", "b", "c"]

3. Метод Object.getOwnPropertyNames():

Метод Object.getOwnPropertyNames() возвращает массив, содержащий все собственные ключи (включая неперечисляемые) объекта.

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.getOwnPropertyNames(obj);
console.log(keys); // Выводит: ["a", "b", "c"]

4. Метод Object.getOwnPropertySymbols():

Метод Object.getOwnPropertySymbols() возвращает массив всех символьных ключей объекта.

const key1 = Symbol("key1");
const key2 = Symbol("key2");
const obj = { [key1]: 1, [key2]: 2 };
const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Выводит массив символьных ключей

3. Функциональная область

1) Глобальная и функциональная области

Глобальная область видимости:

Глобальная область видимости охватывает весь код, который находится за пределами всех функций. Переменные и функции, объявленные в глобальной области видимости, могут быть доступны и использованы в любой части кода.

Пример:

const globalVariable = 42;

function globalFunction() {
  console.log(globalVariable);
}

globalFunction(); // Выводит: 42

Функциональная область видимости:

Функциональная область видимости связана с областью видимости функций. Переменные и функции, объявленные внутри функции, являются локальными для этой функции и не видны за её пределами. Они существуют только внутри своей функции.

Пример:

function outerFunction() {
  const outerVariable = "Hello";

  function innerFunction() {
    console.log(outerVariable);
  }

  innerFunction(); // Выводит: Hello
}

outerFunction();

2) Области видимости переменных

Основные типы областей видимости:

Глобальная область видимости (Global Scope):

Переменные, объявленные вне всех функций, имеют глобальную область видимости. Они могут быть доступны и использованы в любой части кода, включая внутри функций.

Пример:

const globalVariable = "I am global";

function someFunction() {
  console.log(globalVariable);
}

someFunction(); // Вывод: I am global

Функциональная область видимости функции (Function Scope):

Переменные, объявленные внутри функции, имеют функциональная область видимости. Они могут быть использованы только внутри этой функции и не видны за её пределами.

Пример:

function myFunction() {
  const localVariable = "I am local";
  console.log(localVariable);
}

myFunction(); // Вывод: I am local
// console.log(localVariable); // Ошибка - переменная не определена

Блочная область видимости (Block Scope):

Переменные, объявленные с использованием let или const внутри блока кода (например, внутри цикла или условия), имеют блочную область видимости. Они ограничены только этим блоком и не видны за его пределами.

Пример:

if (true) {
  let blockVariable = "I am inside a block";
  console.log(blockVariable);
}

// console.log(blockVariable); // Ошибка - переменная не определена

Область видимости функции с замыканием (Closure Scope):

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

Пример:

function outerFunction() {
  const outerVariable = "I am outer";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Вывод: I am outer

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

Важно понимать, что переменные, объявленные с использованием ключевого слова var, имеют функциональную область видимости. Переменные, объявленные с использованием let и const, имеют блочную область видимости, что означает, что они ограничены только блоком кода (например, внутри цикла или условия).

Области видимости влияют на то, какие переменные и функции видны в определенных частях кода, и это важно для управления и избегания конфликтов имён переменных.

3) Вложенные области

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

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

Пример вложенных областей видимости с замыканием:

function outerFunction() {
  const outerVariable = "I am outer";

  function innerFunction() {
    console.log(outerVariable); // innerFunction имеет доступ к outerVariable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Вывод: I am outer

В этом примере функция innerFunction определена внутри функции outerFunction, и она имеет доступ к переменной outerVariable, которая определена во внешней функции. Когда мы вызываем outerFunction() и сохраняем результат в closure, мы создаем замыкание, которое запоминает состояние outerVariable даже после завершения выполнения outerFunction. Вложенные области видимости и замыкания часто используются для создания функций с частично заданными аргументами, асинхронных операций и других паттернов программирования.

4. Параметры / аргументы функций

Примитивные значения всегда передаются по значению, а объекты передаются по ссылке.

1) Параметры функций

Параметры функции определяются в её определении в круглых скобках. Параметры - это переменные, которые функция принимает как входные данные. Когда функция вызывается, значения переданных аргументов присваиваются этим параметрам. Пример определения параметров функции:

function greet(name, age) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet("Alice", 25); // Вывод: Hello, Alice! You are 25 years old.

В этом примере name и age - это параметры функции greet. При вызове функции greet("Alice", 25) значения "Alice" и 25 передаются в функцию и присваиваются соответствующим параметрам. Если вы передадите больше аргументов, чем определено параметров, дополнительные аргументы будут проигнорированы. Если передано меньше аргументов, чем параметров, недостающие параметры будут иметь значение undefined.

2) разница между параметрами, передаваемыми по значению и по ссылке

Параметры, передаваемые по значению:

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

Пример:

function modifyValue(value) {
  value = 10; // Изменение копии
  console.log(value); // Вывод: 10
}

let number = 5;
modifyValue(number);
console.log(number); // Вывод: 5 (оригинальное значение не изменилось)

Параметры, передаваемые по ссылке:

Когда вы передаете объект (включая массивы и функции) в функцию, передается не сам объект, а ссылка на объект. Это означает, что внутри функции вы работаете с тем же объектом, и любые изменения, сделанные внутри функции, будут отражены на оригинальном объекте.

Пример:

function modifyArray(arr) {
  arr.push(4); // Изменение оригинального массива
  console.log(arr); // Вывод: [1, 2, 3, 4]
}

let myArray = [1, 2, 3];
modifyArray(myArray);
console.log(myArray); // Вывод: [1, 2, 3, 4] (оригинальный массив изменился)

3) Как обрабатывать динамическое количество функциональных параметров ?

Обрабатывать динамическое количество функциональных параметров с использованием объекта arguments, оператора rest или функции ...args.

Объект arguments:

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

Пример:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // Вывод: 10

Оператор rest:

Оператор rest (...) позволяет собирать оставшиеся аргументы функции в массив. Это позволяет более явно работать с динамическим количеством аргументов.

Пример:

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // Вывод: 10

Функция ...args:

Если вы используете стрелочные функции или хотите передать аргументы из одной функции в другую, вы можете использовать функцию ...args для передачи аргументов.

Пример:

function myFunction(...args) {
  anotherFunction(...args);
}

function anotherFunction(a, b, c) {
  console.log(a, b, c);
}

myFunction(1, 2, 3); // Вывод: 1 2 3

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

5. Расширенные закрытия

1) Контекст (лексическая среда)

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

Пример:

function outerFunction() {
  const outerVariable = "I am from outer";

  function innerFunction() {
    console.log(outerVariable); // innerFunction имеет доступ к outerVariable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Вывод: I am from outer

В этом примере у функции innerFunction есть доступ к переменной outerVariable, определенной во внешней функции outerFunction. Это возможно благодаря цепочке областей лексической среды, которая позволяет функциям сохранять доступ к переменным в их родительских средах, даже после завершения выполнения этих родительских функций.

Контекст также связан с ключевым словом this, которое определяет, как функция взаимодействует с объектом, из которого она была вызвана. Значение this определяется на момент вызова функции и зависит от контекста вызова.

2) Контекста создания функций (лексическая среда)

Контекст создания функций (также известный как лексическая среда создания или лексическое окружение) - это среда, в которой определена функция в момент её создания. Это важное понятие связано с тем, как функции сохраняют информацию о своей лексической среде даже после завершения выполнения этой среды.

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

Пример:

function outerFunction() {
  const outerVariable = "I am from outer";

  function innerFunction() {
    console.log(outerVariable); // innerFunction имеет доступ к outerVariable
  }

  return innerFunction;
}

const closure = outerFunction(); // closure хранит ссылку на лексическую среду outerFunction

closure(); // Вывод: I am from outer

В этом примере, когда функция innerFunction создается внутри outerFunction, она запоминает ссылку на лексическую среду outerFunction, включая переменную outerVariable. Даже после того, как outerFunction завершает выполнение и её лексическая среда уходит в память, innerFunction сохраняет доступ к outerVariable благодаря контексту создания.

3) Разница между областью и контекстом

Область (Scope):

Определяет, где переменные доступны и могут быть использованы. В JavaScript существует глобальная область и локальные области видимости функций или блоков кода.

Пример:

const globalVariable = "I am global"; // Глобальный область

function myFunction() {
  const localVariable = "I am local"; // Локальная область 
}

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

Контекст (Context):

Контекст - это то, что определяет, как функция взаимодействует с объектом, из которого она была вызвана. В контексте функции ключевое слово this указывает на объект, с которым она связана. Контекст зависит от того, как функция была вызвана.

Пример:

const obj = {
  name: "John",
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Вывод: Hello, John!

В этом примере this внутри метода greet ссылается на объект obj, потому что метод был вызван с контекстом объекта obj. Таким образом, "область" относится к доступности переменных в разных частях кода (глобально или локально), а "контекст" определяет, как функция взаимодействует с объектом, из которого она была вызвана, с помощью ключевого слова this.

4) Внутренняя/внешняя лексическая среда

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

Внешняя лексическая среда (Outer Lexical Environment):

Это среда, в которой функция была определена (создана), независимо от места её вызова. Внешняя лексическая среда содержит информацию о переменных и параметрах, доступных во время определения функции.

Пример:

function outerFunction() {
  const outerVariable = "I am from outer";

  function innerFunction() {
    console.log(outerVariable); // Внутренняя функция имеет доступ к внешней переменной
  }

  return innerFunction;
}

const closure = outerFunction();
closure();

В этом примере внешняя лексическая среда для innerFunction - это лексическая среда outerFunction, потому что innerFunction определена внутри outerFunction.

Внутренняя лексическая среда (Inner Lexical Environment):

Это среда, создаваемая при вызове функции, в которой функция выполняется. Внутренняя лексическая среда содержит локальные переменные функции, параметры, а также ссылку на внешнюю лексическую среду, образуя цепочку областей видимости (Scope Chain).

Пример:

function outerFunction() {
  const outerVariable = "I am from outer";

  function innerFunction() {
    const innerVariable = "I am from inner";
    console.log(outerVariable); // Внутренняя функция может видеть внешние переменные
  }

  return innerFunction;
}

const closure = outerFunction();
closure();

В этом примере внутренняя лексическая среда для innerFunction - это среда, созданная при вызове innerFunction. Она имеет доступ к локальным переменным innerFunction и к переменным внешней лексической среды outerFunction.

5) Механизм обхода лексической среды

Механизм обхода лексической среды связан с тем, как функции сохраняют доступ к переменным и параметрам из своей внешней среды даже после завершения выполнения этой среды. Этот механизм называется замыканием (closures).

При создании функции внутри другой функции (внутренней функции) сохраняется ссылка на лексическую среду (контекст создания) этой внешней функции. Это позволяет внутренней функции сохранять доступ к переменным и параметрам внешней функции даже после завершения выполнения внешней функции.

Пример:

function outerFunction() {
  const outerVariable = "I am from outer";

  function innerFunction() {
    console.log(outerVariable); // innerFunction сохраняет доступ к outerVariable
  }

  return innerFunction;
}

const closure = outerFunction(); // Здесь создается замыкание
closure(); // Вывод: I am from outer

В этом примере функция closure представляет собой внутреннюю функцию innerFunction, которая была создана внутри outerFunction. Когда outerFunction вызывается и возвращает innerFunction, замыкание сохраняет ссылку на лексическую среду outerFunction, включая переменную outerVariable. Даже после завершения выполнения outerFunction, closure все равно имеет доступ к outerVariable благодаря механизму замыкания.

6) Cвязи между функцией и лексической средой

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

Создание функции:

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

Вызов функции:

Когда функция вызывается, создается новая внутренняя лексическая среда (контекст выполнения), в которой она будет выполняться. Эта внутренняя среда содержит локальные переменные функции, параметры, а также ссылку на внешнюю лексическую среду (среду, в которой функция была определена), образуя цепочку областей видимости (Scope Chain).

Замыкание (Closures):

Замыкание - это результат связи между функцией и её лексической средой создания. Функция сохраняет доступ к переменным и ресурсам этой среды даже после того, как она завершила выполнение. Это позволяет функциям создавать замыкания, которые сохраняют состояние и могут использовать данные из внешней лексической среды.

Пример:

function outerFunction() {
  const outerVariable = "I am from outer"; // Лексическая среда создания для outerFunction

  function innerFunction() {
    console.log(outerVariable); // Связь между функцией и внешней лексической средой (замыкание)
  }

  return innerFunction;
}

const closure = outerFunction(); // Создание замыкания
closure(); // Вывод: I am from outer

В этом примере innerFunction создает замыкание, которое "запоминает" лексическую среду outerFunction, включая переменную outerVariable. Это позволяет innerFunction сохранить доступ к outerVariable даже после завершения выполнения outerFunction.

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

6. ECMAScript Промежуточный

1) Параметры функции по умолчанию

Параметры по умолчанию позволяют задавать формальным параметрам функции значения по умолчанию в случае, если функция вызвана без аргументов, или если параметру явным образом передано значение undefined.

Пример:

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet();         // Вывод: Hello, Guest! (параметр name не передан, используется значение по умолчанию)
greet("Alice");  // Вывод: Hello, Alice! (параметр name передан)

2) Как использовать оператор spread для аргументов Function ?

Оператор расширения (spread operator) в JavaScript позволяет передавать элементы массива или свойства объекта как аргументы в функцию. Это полезно, когда у вас есть массив данных, которые вы хотите передать функции как отдельные аргументы.

Пример использования оператора spread для аргументов функции:

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

const result = sum(...numbers); // Расширение массива numbers как аргументов функции
console.log(result); // Вывод: 6

В этом примере оператор ...numbers разбивает массив numbers на его элементы, которые затем передаются функции sum как отдельные аргументы

3) Как сравнивать аргументы и остальные параметры ?

Для сравнения аргументов и остальных параметров в функции вам нужно использовать операторы сравнения (===, !==, <, >, <=, >= и т. д.), так же как вы сравнивали бы любые другие значения в JavaScript.

function compareArgsAndParams(a, b, ...restParams) {
  console.log(`a: ${a}`);
  console.log(`b: ${b}`);
  console.log(`restParams: ${restParams}`);
  
  if (a === b) {
    console.log("a and b are equal");
  } else {
    console.log("a and b are not equal");
  }

  if (restParams.length === 0) {
    console.log("No additional parameters");
  } else {
    console.log(`Additional parameters: ${restParams}`);
  }
}

compareArgsAndParams(5, 5, 10, 20, 30);

В этом примере функция compareArgsAndParams принимает два аргумента a и b, а также остальные параметры restParams (все параметры, которые идут после b). Затем она сравнивает a и b и выводит соответствующие сообщения. Также она проверяет наличие остальных параметров (restParams) и выводит информацию об этом.

4) Оператор spread для массива

Оператор расширения (spread operator) для массива в JavaScript позволяет разбить массив на его элементы и использовать эти элементы в другом массиве, вызове функции, объекте или в другом контексте, где ожидается несколько аргументов или элементов.

Пример использования оператора spread для массива:

Копирование массива:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // Вывод: [1, 2, 3]

5) Использование оператора spread для конкатенации массива

Оператор расширения (spread operator) можно использовать для конкатенации (объединения) массивов. Он позволяет разбить массив на его элементы и добавить их к другому массиву. Вот как это делается:

Пример:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const concatenatedArray = [...array1, ...array2];

console.log(concatenatedArray); // Вывод: [1, 2, 3, 4, 5, 6]

Если вы хотите конкатенировать только два массива, вы можете использовать более старый метод concat(): Пример:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const concatenatedArray = array1.concat(array2);

console.log(concatenatedArray); // Вывод: [1, 2, 3, 4, 5, 6]

6) Деструктурирующее назначение

Деструктурирующее назначение позволяет удобно извлекать и использовать данные из структур данных, сэкономив время и упростив код. Это особенно полезно при работе с большими объектами или массивами, когда вы хотите извлечь только определенные значения.

Деструктурирующее назначение массивов:

Пример:

const numbers = [1, 2, 3];

const [a, b, c] = numbers;

console.log(a); // Вывод: 1
console.log(b); // Вывод: 2
console.log(c); // Вывод: 3

Деструктурирующее назначение объектов:

Пример:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

const { firstName, lastName, age } = person;

console.log(firstName); // Вывод: John
console.log(lastName);  // Вывод: Doe
console.log(age);       // Вывод: 30

7) Цикл for..of(optional)

Цикл for...of предоставляет способ перебора элементов коллекций (например, массивов, строк, наборов Set, итерируемых объектов) без необходимости следить за индексами или индексированными свойствами. Он выполняет итерацию по значениям коллекции, а не по их индексам. Цикл работает только с итерируемыми объектами.

for (variable of iterable) {
  // код для выполнения на каждой итерации
}

variable: Переменная, в которую будет присваиваться текущее значение элемента коллекции на каждой итерации. iterable: Итерируемая коллекция, которую вы хотите перебрать.

Перебор элементов массива:

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

for (const num of numbers) {
  console.log(num);
}

7. Модули в JavaScript

1) Что такое модуль / модуль pattern? Для каких целей они были созданы?

Модуль (Module) или модульный паттерн (Module Pattern) - это подход к организации и структурированию кода в программировании. Модули позволяют разделять код на небольшие, независимые, самодостаточные компоненты, которые можно использовать повторно и поддерживать с минимальными затратами.

Цели создания модульного паттерна:

Изоляция и инкапсуляция: Модули позволяют скрывать внутренние детали реализации от внешнего кода, что способствует более чистому и безопасному разделению обязанностей в приложении. Это помогает избежать нежелательных взаимодействий и конфликтов между разными частями кода. Повторное использование кода: Когда функциональность упакована в модуль, его можно легко повторно использовать в разных частях проекта или даже в разных проектах. Это способствует экономии времени и уменьшению дублирования кода. Управление зависимостями: Модули позволяют явно определить зависимости между компонентами, что делает более прозрачным и управляемым управление зависимостями между разными частями приложения. Улучшение сопровождаемости: Разделение кода на модули упрощает обслуживание, отладку и тестирование, так как разные части приложения могут быть анализированы и изменены независимо друг от друга.

2) Типы модулей (AMD, ES6, CommonJS, UMD)

Revealing Module Pattern:

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

CommonJS и ES6 Modules:

Стандарты для модульной системы в JavaScript. CommonJS применяется в среде сервера (например, Node.js), а ES6 Modules - в современных браузерах. Они позволяют явно экспортировать и импортировать функции, классы, переменные и другие элементы из модулей.

AMD (Asynchronous Module Definition):

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

UMD (Universal Module Definition):

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

3) Синтаксис модулей

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

ES6 Modules (стандарт ECMAScript 2015+):

Экспорт:

// Модуль foo.js
export const foo = "Hello from foo!";

Импорт:

// Другой модуль
import { foo } from "./foo.js";
console.log(foo); // Вывод: Hello from foo!

CommonJS (в Node.js и некоторых инструментах сборки на стороне сервера):

Экспорт:

// Модуль foo.js
exports.foo = "Hello from foo!";

Импорт:

// Другой модуль
const { foo } = require("./foo.js");
console.log(foo); // Вывод: Hello from foo!

4) Общие функции модулей (экспорт по умолчанию, именованный экспорт, экспорт как и т.д.)

Экспорт по умолчанию (Default Export):

С помощью экспорта по умолчанию вы можете экспортировать одно значение, которое будет считаться "основным" значением модуля. Экспорт:

// Модуль foo.js
export default function sayHello() {
  console.log("Hello!");
}

Импорт:

// Другой модуль
import sayHello from "./foo.js";
sayHello(); // Вывод: Hello!

Именованный экспорт (Named Export):

Вы можете экспортировать несколько значений из модуля с помощью именованных экспортов. Экспорт:

// Модуль foo.js
export function sayHello() {
  console.log("Hello!");
}

export function sayGoodbye() {
  console.log("Goodbye!");
}

Импорт:

// Другой модуль
import { sayHello, sayGoodbye } from "./foo.js";
sayHello(); // Вывод: Hello!
sayGoodbye(); // Вывод: Goodbye!

Именованный экспорт с переименованием (Renamed Named Export):

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

// Другой модуль
import { sayHello as hello, sayGoodbye as goodbye } from "./foo.js";
hello(); // Вывод: Hello!
goodbye(); // Вывод: Goodbye!

Экспорт как (Export As):

Этот синтаксис позволяет сгруппировать несколько значений в один объект при экспорте и затем импортировать их сразу. Экспорт как:

// Модуль foo.js
const message1 = "Hello";
const message2 = "Goodbye";

export { message1, message2 };

Импорт:

// Другой модуль
import * as messages from "./foo.js";
console.log(messages.message1); // Вывод: Hello
console.log(messages.message2); // Вывод: Goodbye

5) Динамический импорт

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

Синтаксис динамического импорта выглядит так:

import(modulePath)
  .then((module) => {
    // Здесь можно использовать экспортированные значения из модуля
  })
  .catch((error) => {
    // Обработка ошибки загрузки модуля
  });

8. Продвинутая функция

1) this в функции

this используется для обращения к текущему объекту или контексту выполнения внутри функции. Значение this может меняться в зависимости от контекста вызова функции. Вот некоторые распространенные сценарии использования this в функциях:

Контекст объекта:

В методах объекта this ссылается на сам объект, в котором определен метод.

Пример:

const person = {
  firstName: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.firstName}`);
  }
};

person.sayHello(); // Вывод: Hello, my name is John

Функции-конструкторы:

Внутри функции-конструктора this ссылается на новый экземпляр объекта, который будет создан при вызове функции с оператором new.

Пример:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car('Toyota', 'Camry');
console.log(myCar.make); // Вывод: Toyota

2) Ссылочный тип и его потеря

Ссылочные типы в JavaScript включают объекты, массивы, функции и другие структуры данных, которые хранятся в памяти и передаются по ссылке. Когда переменная содержит ссылку на объект, она фактически указывает на место в памяти, где хранятся данные объекта.

Пример:

const obj1 = { name: 'Alice' };
const obj2 = obj1; // obj2 ссылается на тот же объект, что и obj1

obj2.name = 'Bob';

console.log(obj1.name); // Вывод: Bob

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

Пример:

function modifyObject(obj) {
  obj = { name: 'Charlie' }; // Переменная obj теперь ссылается на новый объект
}

const person = { name: 'Alice' };

modifyObject(person);

console.log(person.name); // Вывод: Alice

3) Разница между функцией и методом

Разница между функцией и методом сводится к контексту и способу вызова:

• Функция может вызываться независимо от объекта и контекста.
• Метод связан с объектом и вызывается на нем через точечную нотацию, обычно оперируя данными объекта.

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

Пример:

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

const result = add(3, 5); // Вызов функции
console.log(result); // Вывод: 8

Метод - это функция, которая связана с объектом и действует на нем. Он вызывается через точечную нотацию, предоставляя объект, на котором он вызывается, как контекст выполнения. Методы обычно выполняют операции над данными объекта и часто используют свойства объекта внутри себя.

Пример:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName()); // Вызов метода

4) Как работает this и какие могут возникать проблемы ?

Как работает this:

Значение this может быть определено следующим образом:

Глобальный контекст: В глобальном контексте (вне функций или методов), this обычно ссылается на глобальный объект (например, window в браузере).

Метод объекта: Внутри методов объекта, this ссылается на сам объект, в котором определен метод.

Функция-конструктор: Внутри функции-конструктора, this ссылается на новый экземпляр объекта, который будет создан при вызове функции с оператором new.

Анонимные функции: В анонимных функциях, значение this может зависеть от контекста, в котором функция вызывается. Если она вызывается в глобальной области видимости, this будет ссылаться на глобальный объект.

Arrow-функции: В arrow-функциях this берется из окружающего лексического контекста, что отличает их от обычных функций.

Проблемы с this:

Проблема потери контекста (this): Одним из распространенных примеров проблемы с this является потеря контекста при передаче методов как колбэков. В таких случаях значение this может потерять свой ожидаемый контекст и ссылаться на неожиданный объект или даже быть undefined.

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

Использование в асинхронных операциях: В асинхронных операциях, таких как колбэки, Promise или async/await, значение this может меняться в зависимости от контекста вызова и времени выполнения.

5) Способы заменить this

Чтобы избежать проблем с this, можно использовать стрелочные функции, явно привязывать контекст с помощью методов bind, call или apply, или сохранять значение this во временной переменной перед вложенными вызовами функций.

6) Уметь использовать встроенные методы вызова и применения функций

1. call() и apply(): Эти методы позволяют вызвать функцию с определенным значением this и аргументами. Разница между ними заключается в способе передачи аргументов - через список аргументов для call() и через массив аргументов для apply().

Пример:

function greet(message) {
  console.log(`${message}, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello'); // Вывод: Hello, Alice!
greet.apply(person, ['Hi']); // Вывод: Hi, Alice!

2. bind(): Метод bind() создает новую функцию с определенным значением this, которая может быть вызвана позже.

Пример:

const greetPerson = greet.bind(person);
greetPerson('Hey'); // Вывод: Hey, Alice!

3. bind() для передачи параметров: bind() также может использоваться для привязки аргументов, не изменяя контекст this.

Пример:

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

const multiplyByTwo = multiply.bind(null, 2);
console.log(multiplyByTwo(5)); // Вывод: 10

4. call() и apply() для функций массивов: Эти методы часто используются с функциями массивов, чтобы применить функцию к элементам массива.

Пример:

const numbers = [1, 2, 3, 4];
const sum = Array.prototype.reduce.call(numbers, (total, num) => total + num, 0);
console.log(sum); // Вывод: 10

5. forEach(): Метод forEach() позволяет выполнить функцию для каждого элемента массива.

Пример:

const names = ['Alice', 'Bob', 'Charlie'];
names.forEach((name, index) => {
  console.log(`${index + 1}: ${name}`);
});

6. map(): Метод map() создает новый массив, применяя функцию к каждому элементу исходного массива.

Пример:

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Вывод: [2, 4, 6]

7) Как привязать this область к функции

1. Использование метода bind()
2. Использование стрелочных функций (Arrow Functions)
3. Использование функции обратного вызова
4. Использование стрелочных функций для обработчиков событий

8) Привязка, привязка одной функции дважды

Привязка функции может быть полезным, когда вам необходимо явно указать контекст (this) для вызова функции. Однако привязка одной функции дважды может привести к некоторым особенностям и не всегда является хорошей практикой.

Пример:

function greet(message) {
  console.log(`${message}, ${this.name}!`);
}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

const greetPerson1 = greet.bind(person1);
const greetPerson2 = greet.bind(person2);

greetPerson1('Hello'); // Вывод: Hello, Alice!
greetPerson2('Hi');    // Вывод: Hi, Bob!

В этом примере мы создали две новые функции (greetPerson1 и greetPerson2), каждая из которых связана с разным объектом. При вызове этих функций, this будет ссылаться на соответствующий объект.

9. Функциональные паттерны

1) Callback (функция в качестве аргумента)

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

Пример использования колбэка:

function fetchData(url, callback) {
  // Симулируем асинхронный запрос данных
  setTimeout(function() {
    const data = { id: 1, name: 'Alice' };
    callback(data); // Вызов колбэка после получения данных
  }, 1000);
}

function processData(data) {
  console.log(`Received data: ${JSON.stringify(data)}`);
}

fetchData('https://api.example.com/data', processData);

2) Callback паттерн

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

Основные характеристики callback-паттерна: Передача функции: Функция (колбэк) передается в качестве аргумента другой функции. Выполнение после завершения: Колбэк вызывается только после завершения выполнения основной функции или какого-либо события.

Пример использования callback-паттерна:

function fetchData(url, callback) {
  // Симулируем асинхронный запрос данных
  setTimeout(function() {
    const data = { id: 1, name: 'Alice' };
    callback(data); // Вызов колбэка после получения данных
  }, 1000);
}

function processData(data) {
  console.log(`Received data: ${JSON.stringify(data)}`);
}

fetchData('https://api.example.com/data', processData);

В этом примере fetchData принимает URL и колбэк processData. Она выполняет асинхронную операцию (задержку через setTimeout) и затем вызывает переданный колбэк, передавая в него полученные данные.

3) IIFE паттерн

IIFE (Immediately Invoked Function Expression) - это паттерн в JavaScript, который представляет собой функцию, объявленную и вызванную немедленно после ее определения. IIFE позволяет создать локальную область видимости для переменных, изолировав их от глобальной области видимости, и выполнить код сразу же. Этот паттерн часто используется для создания модульных компонентов, избегая конфликтов имён и загрязнения глобальной области видимости.

Синтаксис IIFE выглядит так:

(function() {
  // код, который будет выполнен
})();

Пример использования IIFE:

(function() {
  var name = 'Alice';
  console.log('Hello, ' + name);
})();

// Переменная name недоступна вне IIFE
//console.log(name); // Ошибка: name is not defined

В данном примере, код внутри IIFE выполняется немедленно, и переменная name остается локальной для этой области видимости. Поэтому попытка доступа к переменной name вне IIFE вызовет ошибку.

4) Ограничения Callback (ад Callback)

Callback Hell (Ад колбэков): Это ситуация, когда вложенность колбэков становится слишком глубокой и код становится сложночитаемым и трудноподдерживаемым. Это может произойти, когда множество асинхронных операций зависит друг от друга.

5) Каррирование и частичные функции

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

Пример каррирования:

function add(x) {
  return function(y) {
    return x + y;
  }
}

const add5 = add(5);
console.log(add5(3)); // Вывод: 8

В этом примере функция add каррирована, и мы можем создать новую функцию add5, которая всегда будет добавлять 5 к переданному аргументу.

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

Пример частичного применения:

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

const double = multiply.bind(null, 2);
const triple = multiply.bind(null, 3);

console.log(double(4, 5)); // Вывод: 40 (2 * 4 * 5)
console.log(triple(4, 5)); // Вывод: 60 (3 * 4 * 5)

В этом примере функция multiply частично применяется с помощью метода bind(), фиксируя первый аргумент.

10. Объектно-ориентированное программирование

1) new ключевое слово

Ключевое слово new используется для создания новых экземпляров объектов на основе функций-конструкторов или классов.

2) как ключевое слово new работает ?

Рассмотрим, как работает ключевое слово new в контексте функций-конструкторов:

Когда вы используете new перед вызовом функции-конструктора, JavaScript выполняет следующие действия: Создается новый пустой объект. Свежесозданный объект становится значением this внутри функции-конструктора. Это означает, что все свойства и методы, добавленные к this внутри функции-конструктора, будут относиться к этому новому объекту. Функция-конструктор выполняется. Внутри функции вы можете добавить свойства и методы к this. Если функция-конструктор явно не возвращает другой объект (например, объект, созданный с помощью литерала), то возвращается новый объект, созданный на первом шаге.

Пример использования new с функцией-конструктором:

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

const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

console.log(person1); // { name: 'Alice', age: 30 }
console.log(person2); // { name: 'Bob', age: 25 } 

3) функциональный конструктор

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

Пример функционального конструктора:

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

person1.sayHello(); // Вывод: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // Вывод: Hello, my name is Bob and I am 25 years old.

В этом примере Person - это функциональный конструктор. Он принимает аргументы name и age, и для каждого созданного экземпляра объекта устанавливает свойства name и age. Также, метод sayHello добавляется к каждому экземпляру объекта через this.

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

4) концепция функционального конструктора

Вот основные шаги и принципы, связанные с концепцией функционального конструктора:

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

Использование ключевого слова this: Внутри функции-конструктора для доступа к свойствам и методам объекта используется ключевое слово this. Когда функция-конструктор вызывается с ключевым словом new, this будет указывать на создаваемый экземпляр объекта.

Создание экземпляров объектов: Путем вызова функции-конструктора с ключевым словом new создаются новые объекты, которые наследуют свойства и методы из функции-конструктора.

5) публичные, частные, статические члены

Публичные члены (Public Members): Публичные члены класса доступны извне и могут быть использованы и изменены другими частями кода. Это означает, что они являются частью интерфейса класса, предоставляемого другим объектам.

Пример с публичными членами:

class Rectangle {
  constructor(width, height) {
    this.width = width;   // Публичное свойство
    this.height = height; // Публичное свойство
  }

  calculateArea() {
    return this.width * this.height; // Публичный метод
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.calculateArea()); // Вывод: 50

Частные члены (Private Members): Частные члены класса не доступны извне и могут быть использованы только внутри самого класса. В JavaScript, до появления приватных полей и методов в стандарте (ES6 и выше), существует соглашение использовать символ _ перед именами частных членов, чтобы указать их приватный характер, хотя фактически они остаются доступными.

Пример с частными членами (с использованием соглашения):

class Rectangle {
  constructor(width, height) {
    this._width = width;   // Частное свойство (соглашение)
    this._height = height; // Частное свойство (соглашение)
  }

  _privateMethod() { // Частный метод (соглашение)
    return this._width * this._height;
  }

  calculateArea() {
    return this._privateMethod(); // Используем частный метод
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.calculateArea()); // Вывод: 50
// console.log(rect._width); // Не рекомендуется обращаться к частным свойствам

Статические члены (Static Members): Статические члены принадлежат самому классу, а не экземплярам объектов, созданным из этого класса. Они доступны через имя класса и обычно используются для функций или свойств, которые относятся к классу в целом, а не к конкретным экземплярам.

Пример со статическими членами: class MathUtil { static PI = 3.14159; // Статическое свойство static calculateCircleArea(radius) { // Статический метод return this.PI * radius * radius; } }

console.log(MathUtil.calculateCircleArea(5)); // Вывод: 78.53975

6) понимать шаблоны и соглашения эмуляции ООП (необязательно)

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

1. Функциональные конструкторы и классы:

   • Используйте функциональные конструкторы или классы для определения типов объектов с общими свойствами и методами.
   • Создавайте экземпляры объектов с помощью ключевого слова new.

2. Прототипы:

   • Добавляйте методы и свойства, общие для всех экземпляров, в прототип объекта-конструктора.
   • Используйте Object.prototype для определения общих методов, доступных всем объектам.

3. Ключевое слово this:

   • Используйте this в методах, чтобы ссылаться на текущий объект.
   • Особенно важно для функциональных конструкторов и методов классов.

4. Публичные, частные и статические члены:

   • Используйте соглашение с символом _ перед именами частных членов (до появления приватных полей и методов в стандарте ES6).
   • Создавайте статические методы и свойства с помощью ключевого слова static.

5. Прототипное наследование:

   • Для наследования свойств и методов другого класса или прототипа, используйте Object.create() или функции-конструкторы с Object.setPrototypeOf().
   • Используйте super в классах для обращения к родительским методам.

6. Модули:

   • Используйте модульный паттерн для организации кода и инкапсуляции функциональности.
   • Экспортируйте необходимые функции, методы и классы для публичного использования.

7. ES6 и дальше:

   • Используйте классы для определения типов объектов, наследования и методов.
   • Используйте приватные поля и методы с символом # для создания настоящих частных членов.

8. Использование шаблонов проектирования:

   • Применяйте шаблоны проектирования ООП, такие как фабрика, одиночка, наблюдатель и другие, для решения конкретных задач.

11. ECMAScript Classes

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

Объявление класса - это способ определения нового типа объектов в JavaScript с использованием синтаксиса классов, представленного в стандарте ECMAScript 2015 (ES6) и более новых версиях. Классы облегчают создание объектов, определение их свойств и методов, а также реализацию наследования.

2) Знать синтаксис объявления класса

Вот базовый синтаксис объявления класса:

class ClassName {
  constructor(/* параметры */) {
    // Конструктор, инициализация свойств
  }

  method1(/* параметры */) {
    // Метод 1
  }

  method2(/* параметры */) {
    // Метод 2
  }

  // ...
}

Где:

ClassName - имя класса, обычно начинается с заглавной буквы. constructor - метод-конструктор, вызывается при создании нового объекта. method1, method2 - методы класса.

3) Понимать разницу между классом и функцией конструктора

Классы и функции-конструкторы в JavaScript служат обоим одной цели: они оба используются для создания новых типов объектов. Однако синтаксис и подход к определению и созданию объектов различаются. Вот основные различия между классами и функциями-конструкторами:

Синтаксис: Классы (ES6 и выше): Используют синтаксис классов с ключевым словом class. Методы определяются непосредственно внутри класса. Функции-конструкторы: Определяются как обычные функции, а методы добавляются к прототипу функции.

Создание объектов: Классы: Создание объектов происходит с использованием ключевого слова new перед именем класса (new ClassName()). Функции-конструкторы: Также создают объекты с использованием new перед именем функции-конструктора (new ConstructorFunction()).

Прототипы: Классы: Методы класса добавляются к прототипу объекта-класса. Это позволяет всем экземплярам класса разделять общие методы. Функции-конструкторы: Методы добавляются к прототипу функции-конструктора.

Соглашение для частных членов:

Классы: В стандарте ES6 и выше появились приватные поля и методы, обозначаемые символом # перед именем (#privateField, #privateMethod). Функции-конструкторы: До появления приватных полей и методов в ES6, соглашение заключается в добавлении символа _ перед именем (_privateField, _privateMethod).

Статические члены: Классы: Статические методы и свойства могут быть определены с использованием ключевого слова static. Функции-конструкторы: Статические методы и свойства также могут быть определены, но через прототип функции.

Наследование: Классы: Используют ключевое слово extends для наследования свойств и методов от другого класса. Функции-конструкторы: Используют методы как Object.create() или Object.setPrototypeOf() для наследования.

Современный стандарт: Классы: Стандарт ES6 и выше вводит синтаксис классов, предоставляя более читаемый и удобный способ определения объектов и наследования. Функции-конструкторы: Являются более старым подходом к созданию объектов и наследования. Однако они всё ещё широко используются, особенно в старом коде.

4) Получатель/установщик

Получатель (Getter):

Getter - это метод объекта, который используется для получения (чтения) значения определенного свойства. Получатель вызывается при обращении к свойству, как если бы это было обычное свойство объекта. Пример использования получателя:

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

  get radius() {
    return this._radius;
  }

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

const circle = new Circle(5);
console.log(circle.radius); // Вывод: 5
console.log(circle.area);   // Вывод: 78.53981633974483

Установщик (Setter): Установщик - это метод объекта, который используется для установки (записи) значения определенного свойства. Установщик вызывается при присваивании нового значения свойству.

Пример использования установщика:

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

  get radius() {
    return this._radius;
  }

  set radius(newRadius) {
    if (newRadius > 0) {
      this._radius = newRadius;
    }
  }

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

const circle = new Circle(5);
console.log(circle.radius); // Вывод: 5

circle.radius = 10; // Используем установщик
console.log(circle.radius); // Вывод: 10

circle.radius = -2; // Установка отрицательного значения будет проигнорирована
console.log(circle.radius); // Вывод: 10

5) Что делает super() и где мы должны его использовать?

super() - это ключевое слово в JavaScript, которое используется для вызова конструктора родительского класса внутри конструктора дочернего класса при наследовании. Оно позволяет инициализировать состояние родительского класса, а также передавать аргументы из дочернего класса в конструктор родительского класса.

super() следует использовать в конструкторе дочернего класса и только если этот дочерний класс расширяет другой класс (является подклассом). Если класс не имеет своего конструктора, JavaScript автоматически вставит вызов super() без аргументов.

Пример использования super():

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

  makeSound() {
    console.log('Some generic animal sound');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Вызываем конструктор Animal и передаем имя
    this.breed = breed;
  }

  makeSound() {
    console.log('Woof woof!');
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(myDog.name); // Вывод: Buddy
console.log(myDog.breed); // Вывод: Golden Retriever
myDog.makeSound(); // Вывод: Woof woof!

В этом примере, super(name) вызывает конструктор родительского класса Animal и передает имя собаки. Затем конструктор дочернего класса Dog добавляет дополнительное свойство breed.

12. Основы наследования прототипов

1) proto свойство

proto - это нестандартное свойство объекта в JavaScript, которое ссылается на прототип этого объекта. Однако начиная с стандарта ECMAScript 2015 (ES6), рекомендуется использовать методы Object.getPrototypeOf() и Object.setPrototypeOf() для работы с прототипами объектов вместо использования proto.

Пример использования proto (не рекомендуется, предпочтительнее использовать методы):

const parent = {
  greet: function() {
    console.log('Hello from parent');
  }
};

const child = {
  name: 'Child'
};

child.__proto__ = parent; // Наследование прототипа

child.greet(); // Вывод: Hello from parent

2) [Object.create] и явно определять proto

Object.create(proto) - это стандартный метод JavaScript, который создает новый объект с указанным прототипом (proto). Этот метод создает новый объект, где прототипом будет объект, переданный в качестве аргумента. Пример использования Object.create():

const protoObj = { x: 10, y: 20 };
const obj = Object.create(protoObj);

console.log(obj.x); // Вывод: 10
console.log(obj.y); // Вывод: 20

Явное определение proto: proto - это нестандартное свойство объекта, которое позволяет явно устанавливать прототип объекта. Однако использование proto не рекомендуется, так как оно является устаревшим и может вызвать проблемы совместимости в некоторых окружениях. Пример явного определения proto:

const protoObj = { x: 10, y: 20 };
const obj = {};
obj.__proto__ = protoObj;

console.log(obj.x); // Вывод: 10
console.log(obj.y); // Вывод: 20

3) свойство прототипа

Свойство прототипа (prototype property) - это свойство функции-конструктора в JavaScript, которое определяет прототип, который будет использоваться для создания новых объектов при вызове этой функции с ключевым словом new. Прототип функции-конструктора содержит методы и свойства, которые наследуются всеми объектами, созданными этой функцией-конструктором.

Вот как выглядит определение свойства прототипа и его использование:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.sayHello(); // Вывод: Hello, my name is Alice
person2.sayHello(); // Вывод: Hello, my name is Bob

В этом примере, свойство prototype функции-конструктора Person определяет прототип для объектов, созданных с помощью этой функции. Метод sayHello добавлен в прототип, и он становится доступным для всех объектов, созданных с использованием Person.

4) зависимость между прототипом конструктора функций и экземпляром proto

Существует связь между прототипом конструктора функций (через свойство prototype) и прототипом экземпляра объекта (через свойство proto). Связь между прототипом конструктора и прототипом экземпляра позволяет реализовывать наследование и делить общие методы и свойства между несколькими экземплярами одного типа объектов.

5) возможность создавать методы "класса", используя свойство прототипа функции

Да, вы можете создавать методы "класса" для функций-конструкторов, используя свойство prototype. Эти методы будут доступны всем экземплярам объектов, созданным с использованием этой функции-конструктора, посредством наследования через прототип.

function Person(name) {
  this.name = name;
}

// Метод "класса" для функции-конструктора Person
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.sayHello(); // Вывод: Hello, my name is Alice
person2.sayHello(); // Вывод: Hello, my name is Bob

В этом примере, метод sayHello добавляется к прототипу функции-конструктора Person. Когда вы создаете объекты с помощью new Person(...), они наследуют метод sayHello, и вы можете вызвать этот метод для каждого созданного объекта.

Таким образом, свойство prototype позволяет создавать общие методы "класса", которые могут быть использованы всеми экземплярами объектов, созданными на основе функции-конструктора. Это один из способов реализации наследования и разделения функциональности между объектами одного типа.

Пример создания метода "класса":

function Person(name) {
  this.name = name;
}

// Метод "класса" для функции-конструктора Person
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.sayHello(); // Вывод: Hello, my name is Alice
person2.sayHello(); // Вывод: Hello, my name is Bob

13. Расширенные типы данных и выражения ECMAScript

1) Set/Map типы данных

Set (Множество) в JavaScript:

Set - это коллекция уникальных значений. Вот как можно использовать Set в JavaScript:

// Создание и использование Set

let uniqueNumbers = new Set();
uniqueNumbers.add(1);
uniqueNumbers.add(2);
uniqueNumbers.add(3);
uniqueNumbers.add(2); // Этот элемент не будет добавлен, так как он уже есть в множестве

console.log(uniqueNumbers); // Output: Set { 1, 2, 3 }

// Проверка принадлежности элемента к множеству
console.log(uniqueNumbers.has(2)); // Output: true
console.log(uniqueNumbers.has(4)); // Output: false

// Удаление элемента из множества
uniqueNumbers.delete(2);
console.log(uniqueNumbers); // Output: Set { 1, 3 }

Map (Карта) в JavaScript:

Map - это коллекция пар ключ-значение. Вот как можно использовать Map в JavaScript:

// Создание и использование Map
let studentScores = new Map();
studentScores.set("Alice", 95);
studentScores.set("Bob", 87);
studentScores.set("Charlie", 92);

console.log(studentScores.get("Alice")); // Output: 95

// Проверка наличия ключа в карте
console.log(studentScores.has("Bob")); // Output: true
console.log(studentScores.has("Eve")); // Output: false

// Удаление записи из карты
studentScores.delete("Bob");
console.log(studentScores); // Output: Map { 'Alice' => 95, 'Charlie' => 92 }

2) WeakSet/WeakMap типы данных

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

WeakSet представляет собой коллекцию слабых ссылок на объекты. Он может содержать только объекты и не поддерживает методы, которые могут вызвать перебор его элементов (например, нет метода forEach или свойства size). Это делается для того, чтобы не влиять на процесс сборки мусора.

Пример использования WeakSet:

let weakSet = new WeakSet();

let obj1 = {};
let obj2 = {};

weakSet.add(obj1);
weakSet.add(obj2);

console.log(weakSet.has(obj1)); // Output: true

weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // Output: false

WeakMap - это коллекция слабых ссылок на пары ключ-значение, где ключами могут быть только объекты, а значения могут быть произвольными. Как и WeakSet, WeakMap также не поддерживает перебор элементов.

Пример использования WeakMap:

let weakMap = new WeakMap();

let key1 = {};
let key2 = {};

weakMap.set(key1, "value1");
weakMap.set(key2, "value2");

console.log(weakMap.get(key1)); // Output: "value1"

weakMap.delete(key1);
console.log(weakMap.has(key1)); // Output: false

14. JavaScript Ошибки

Ошибки JavaScript (throw, класс ошибок) В JavaScript ошибки представлены объектами класса Error и его наследниками. При возникновении ошибок можно использовать оператор throw для явного создания ошибки и прерывания выполнения кода.

1) try..catch

Оператор try...catch в JavaScript используется для обработки исключительных ситуаций (ошибок) в блоках кода. Этот оператор позволяет вам написать код, который может вызвать ошибку, и затем ловить и обрабатывать эту ошибку без прерывания выполнения всего скрипта.

Синтаксис оператора try...catch выглядит следующим образом:

try {
  let result = someFunction(); // Предположим, что someFunction вызывает несуществующую функцию
  console.log(result);
} catch (error) {
  console.error("An error occurred:", error.message);
}

2) Обработка ошибок

Обработка ошибок в программировании — это важная практика, которая позволяет создавать более надежные и стабильные программы. Вот некоторые общие подходы и советы по обработке ошибок:

1. Использование блока try...catch: Как уже упоминалось, оператор try...catch позволяет ловить и обрабатывать исключения (ошибки) в определенном блоке кода. Помещайте внутрь блока try тот код, который может вызвать ошибку, а в блоке catch выполняйте обработку ошибки.
2. Использование специфических блоков catch: В блоке catch можно использовать условные операторы для более детальной обработки разных типов ошибок.

try {
  // Код, который может вызвать ошибку
} catch (error) {
  if (error instanceof TypeError) {
    // Обработка ошибки типа TypeError
  } else if (error instanceof RangeError) {
    // Обработка ошибки типа RangeError
  } else {
    // Обработка других ошибок
  }
}

3. Логирование ошибок: Вместо простого вывода сообщений об ошибке на консоль, рекомендуется логировать ошибки в журнал, файл или другой механизм записи. Это позволит отслеживать и анализировать ошибки в реальном времени и в различных средах выполнения.
4. Обработка асинхронных ошибок: Для асинхронных операций, таких как запросы к серверу или обработка событий, используйте try...catch внутри соответствующих функций или обработчиков.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    // Обработка данных
  } catch (error) {
    // Обработка ошибок
  }
}

5. Возврат ошибок: Вместо простого вывода ошибок на консоль можно возвращать объекты ошибок или использовать механизмы обратных вызовов (callbacks) или обещаний (promises) для более гибкой обработки ошибок.
6. Резервное поведение: При обработке ошибок также следует предусмотреть резервное поведение (fallback) или альтернативные варианты действий, чтобы при возникновении ошибки программа могла продолжить работу или предоставить пользователю адекватную информацию.
7. Тестирование ошибок: Регулярное тестирование вашего кода на наличие ошибок позволяет заранее выявлять и исправлять проблемы. Используйте юнит-тесты, интеграционные тесты и другие методы тестирования.

3) Класс

Классы - это шаблоны или "чертежи" для создания объектов в объектно-ориентированном программировании (ООП). Они представляют собой средство организации кода и данных, позволяя создавать экземпляры объектов с общими свойствами и методами. В языке программирования JavaScript классы были введены в стандарте ECMAScript 2015 (ES6). Классы могут наследовать свойства и методы друг от друга. Класс-потомок (или подкласс) может расширить функциональность родительского класса.

Создание класса и создание объекта на его основе выглядят следующим образом:

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.sayHello(); // Output: Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // Output: Hello, my name is Bob and I am 30 years old.

4) регистрация ошибок

Регистрация ошибок - это процесс сбора и записи информации о возникших ошибках в вашем программном продукте. Это важная практика, которая позволяет отслеживать и анализировать ошибки в реальном времени и обеспечивать более надежное и стабильное функционирование приложения. Вот некоторые шаги и советы по регистрации ошибок:

1. Логирование в файл или базу данных: Один из наиболее распространенных способов регистрации ошибок - это запись информации об ошибках в журнал (лог). Эти журналы могут храниться в файлах или сохраняться в базе данных. Логирование позволяет сохранять историю ошибок, что полезно при их анализе и отладке.

2. Сохранение контекста: Помимо самой ошибки, также полезно сохранять информацию о контексте, в котором она возникла. Это может включать данные о состоянии приложения, версии программы, времени выполнения, параметрах запросов и другие полезные детали.

3. Уровни логирования: Используйте различные уровни логирования, такие как информационные сообщения, предупреждения и критические ошибки. Это позволяет отделить разные типы сообщений и позволяет более точно настраивать уровни детализации логирования.

4. Уникальные идентификаторы ошибок: Присваивайте каждой ошибке уникальный идентификатор или код. Это упрощает идентификацию конкретных ошибок и поиск связанных с ними записей в логах.

5. Асинхронное логирование: Регистрация ошибок не должна замедлять выполнение программы. Используйте асинхронные механизмы логирования, чтобы не влиять на производительность приложения.

6. Уведомления и оповещения: Помимо регистрации ошибок, можно настроить систему уведомлений или оповещений, которая будет сообщать администраторам или разработчикам о возникновении критических ошибок.

7. Анализ и мониторинг: Анализ логов позволяет выявлять паттерны ошибок, определять их частоту и тенденции. Мониторинг ошибок в реальном времени помогает оперативно реагировать на проблемы.

Пример логирования ошибки в JavaScript:

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("Division by zero");
    }
    return a / b;
  } catch (error) {
    // Запись ошибки в лог
    console.error("Error:", error.message);
  }
}

console.log(divide(10, 0)); // Output: Error: Division by zero

5) события асинхронных ошибок

События асинхронных ошибок (asynchronous error events) представляют собой механизм в языке программирования JavaScript для отслеживания и обработки ошибок, которые возникают в асинхронных операциях, таких как обещания (promises), асинхронные функции (async/await) и обработчики событий.

Для обработки асинхронных ошибок используется объект Promise, а точнее метод .catch() для цепочки обещаний или блок try...catch внутри асинхронных функций. Кроме того, в некоторых окружениях, таких как браузеры и Node.js, существует событие unhandledRejection, которое позволяет обнаруживать и обрабатывать асинхронные ошибки, которые не были явно обработаны.

Использование блока try...catch в асинхронной функции:

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error("Network request failed");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("An error occurred:", error.message);
  }
}

6) Пользовательские ошибки (необязательно)

Пользовательские ошибки (custom errors) - это специфические типы ошибок, которые вы определяете сами в своем коде. Эти ошибки позволяют вам создавать более информативные и контекстные сообщения об ошибках, а также обеспечивать более точную обработку и отладку ошибок в вашем приложении.

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

Вот пример создания пользовательской ошибки: class CustomError extends Error { constructor(message, customProperty) { super(message); this.name = "CustomError"; this.customProperty = customProperty; } }

// Использование пользовательской ошибки try { throw new CustomError("Something went wrong", "Additional info"); } catch (error) { if (error instanceof CustomError) { console.error("Custom error:", error.message); console.error("Custom property:", error.customProperty); } else { console.error("An error occurred:", error.message); } } В этом примере создан класс CustomError, который наследуется от Error. Конструктор класса CustomError принимает дополнительный параметр customProperty, который может содержать дополнительную информацию о возникшей ошибке.

15. ECMAScript продвинутый

1) Promise

Promise (обещание) - это механизм в языке программирования JavaScript для работы с асинхронными операциями. Он позволяет создавать асинхронные задачи и обрабатывать их результаты или ошибки с помощью цепочки методов. Промисы помогают сделать асинхронный код более читаемым и управляемым.

Создание и использование промиса:

const myPromise = new Promise((resolve, reject) => {
  // Выполнение асинхронной задачи
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber); // Завершение успешно
    } else {
      reject(new Error("Random number is too small")); // Завершение с ошибкой
    }
  }, 1000);
});

myPromise.then(result => {
  console.log("Fulfilled:", result);
}).catch(error => {
  console.error("Rejected:", error.message);
});

2) Состояния promise

Промисы могут находиться в одном из трех состояний:

1. Ожидание (Pending): Начальное состояние, когда промис еще не завершился и не вернул результат.
2. Выполнено (Fulfilled): Состояние, когда промис успешно завершился и вернул результат (значение).
3. Отклонено (Rejected): Состояние, когда промис завершился с ошибкой и вернул объект ошибки.

3) Связывание promise

Связывание (chaining) промисов в JavaScript позволяет выполнять асинхронные операции последовательно и обрабатывать результаты каждой операции. Связывание промисов осуществляется с использованием метода .then() для каждой асинхронной операции и метода .catch() для обработки ошибок в цепочке.

Вот как можно связать промисы для выполнения последовательных асинхронных операций:

async function runTasks() {
  try {
    const result1 = await asyncTask1();
    const result2 = await asyncTask2(result1);
    const result3 = await asyncTask3(result2);
    console.log("Final result:", result3);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

runTasks();

4) promise статические методы

1. Promise.resolve(value): Создает и возвращает уже выполненный промис с указанным значением.

2. Promise.reject(reason): Создает и возвращает уже отклоненный промис с указанной причиной (ошибкой).

3. Promise.all(iterable): Принимает массив или итерируемый объект промисов и возвращает новый промис, который выполнится, когда все переданные промисы завершатся. Результатом будет массив значений выполненных промисов в том же порядке.

4. Promise.race(iterable): Принимает массив или итерируемый объект промисов и возвращает новый промис, который выполнится, как только первый из переданных промисов завершится. Результатом будет значение первого завершившегося промиса.

5. Promise.allSettled(iterable): Аналогично методу Promise.all(), но возвращаются результаты для всех промисов в виде объектов, содержащих информацию о том, завершился промис успешно или с ошибкой.

5) Сравнивание шаблонов promise и обратного вызова (необязательно)

Сравнение шаблонов Promise и обратного вызова (callback) в JavaScript важно для понимания различий и выбора наилучшего подхода при работе с асинхронным кодом. Вот сравнение этих двух шаблонов:

Обратный вызов (Callback):

1. Чтение и понимание сложного кода: Вложенные колбэки (callback hell) могут привести к сложному для понимания коду, который может быть трудно поддерживать и отлаживать.

2. Управление последовательностью: С использованием колбэков можно управлять последовательностью асинхронных операций, но это может привести к "пирамиде колбэков" (callback pyramid), что усложняет читаемость.

3. Обработка ошибок: Обработка ошибок может быть сложной из-за необходимости проверять ошибки в разных местах и плоскости кода.

4. Разделение кода: Часто требуется разделять код для выполнения различных асинхронных операций, что может увеличивать объем кода и ухудшать его поддерживаемость.

Промисы (Promise):

1. Читаемость и структура: Промисы предоставляют более читаемую и структурированную форму асинхронного кода, что упрощает понимание и отладку.

2. Сокращение уровня вложенности: Промисы позволяют избежать глубокой вложенности, что делает код более линейным и плоским.

3. Управление ошибками: Обработка ошибок в промисах более структурирована с использованием метода .catch() и позволяет централизованно обрабатывать ошибки.

4. Цепочки операций: Промисы позволяют создавать цепочки асинхронных операций с использованием методов .then() и .catch(), что упрощает управление потоком выполнения.

5. Асинхронные функции (async/await): Промисы в комбинации с асинхронными функциями делают асинхронный код еще более читаемым, похожим на синхронный.

6) Обработка ошибок в цикле событий promises async/await

При обработке ошибок в циклах событий, например, в обработчиках событий или в асинхронных функциях, необходимо уделять внимание корректному использованию блоков try...catch и обработке ошибок внутри асинхронных операций.

async function processEvent(event) {
  try {
    const result = await performAsyncOperation(event);
    // Обработка результата
  } catch (error) {
    console.error("Error processing event:", error.message);
  }
}

7) Сборщик мусора (концепция) (необязательно)

Сборщик мусора (Garbage Collector) - это автоматический механизм управления памятью в языках программирования, который отслеживает и удаляет объекты, которые больше не доступны или не используются программой. Основная цель сборщика мусора - предотвратить утечки памяти, освобождая память, которая больше не нужна, и позволяя программисту избавиться от ручной работы по управлению памятью.

Вот ключевые концепции, связанные со сборкой мусора:

1. Объекты и ссылки: Сборщик мусора отслеживает объекты в памяти и их взаимосвязи. Когда объект создается, выделяется память для его хранения, и ссылки на этот объект могут храниться в других объектах или переменных.

2. Достижимость: Объект считается "достижимым", если он доступен из корневых объектов (как правило, это глобальные переменные или объекты, на которые существует явная ссылка). Объект считается "недостижимым", если нет пути от корневых объектов к этому объекту.

3. Сборка мусора: Сборщик мусора регулярно анализирует граф зависимостей объектов и определяет, какие объекты больше не достижимы. Эти недостижимые объекты могут быть помечены для удаления, и затем освобождена выделенная им память.

4. Алгоритмы сборки мусора: Существует несколько алгоритмов сборки мусора, таких как алгоритмы подсчета ссылок, маркировки и очистки, а также поколения и др. В различных ситуациях и языках программирования используются разные алгоритмы.

5. Влияние на производительность: Сборщик мусора выполняет дополнительные вычисления для определения доступности объектов и их удаления. В большинстве случаев, это не вызывает значительной задержки, но в некоторых критичных приложениях может потребоваться дополнительное внимание к производительности.

6. Языки программирования: Некоторые языки программирования, такие как JavaScript, Java, C#, Python и другие, предоставляют встроенный механизм сборки мусора. В других языках, таких как C и C++, управление памятью остается на плечах программиста.

16. Окно глобального объекта

1) Местоположение (Location)

В браузере глобальный объект window представляет окно браузера, в котором выполняется код. Объект window предоставляет доступ к различным свойствам и методам, включая объекты, представляющие текущее местоположение браузера и управление им. Объект location - это часть глобального объекта window и предоставляет информацию о текущем местоположении (URL) браузера и методы для управления им.

2) Cтруктура расположения браузера

Структура расположения (анатомия) браузера - это описание различных компонентов и областей, которые составляют пользовательский интерфейс веб-браузера. Вот основные компоненты структуры расположения браузера:

1. Адресная строка (Address Bar): Это область, где пользователь может вводить URL (адрес веб-страницы) для навигации.

2. Кнопки навигации (Navigation Buttons): Кнопки "Назад" и "Вперед" позволяют пользователю перемещаться по истории просмотренных веб-страниц.

3. Кнопка обновления (Refresh Button): Позволяет пользователю перезагрузить текущую веб-страницу.

4. Кнопка остановки (Stop Button): Позволяет пользователю прервать загрузку текущей веб-страницы.

5. Вкладки (Tabs): Позволяют пользователю одновременно открывать и управлять несколькими веб-страницами.

6. Область просмотра (Viewport): Это область, где отображается содержимое веб-страницы, включая текст, изображения, видео и другие элементы.

7. Панель закладок (Bookmarks Bar): Панель с закладками, позволяющими пользователю быстро переходить к сохраненным веб-сайтам.

8. Панель инструментов (Toolbar): Включает различные инструменты и расширения, такие как поиск, управление расширениями, уведомления и другие.

9. Строка состояния (Status Bar): Это область, где отображается дополнительная информация о веб-странице, такая как URL ссылок, статус загрузки и другие детали.

10. Меню (Menu): Верхнее меню браузера содержит различные команды, такие как "Файл", "Правка", "Вид", "Инструменты", "История" и т.д.

11. Сайдбар (Sidebar): Боковая панель может содержать различные панели инструментов, закладки, историю, расширения и дополнительную информацию.

12. Панель закладок (Tab Bar): Это панель, где отображаются вкладки, представляющие открытые веб-страницы.

13. Расширения (Extensions): Дополнительные функциональности, которые могут быть добавлены в браузер через установку расширений (плагинов).

3) API истории (окно глобального объекта)

В браузерной среде глобальный объект window предоставляет API для управления историей браузера. Это API позволяет программно взаимодействовать с историей переходов между веб-страницами. Основным компонентом этого API является объект history, который предоставляет методы и свойства для работы с историей браузера.

Вот некоторые из методов и свойств объекта history:

1. history.length: Возвращает количество записей в истории браузера.

const historyLength = history.length;

2. history.back(): Перемещает назад по истории на одну страницу.

history.back();

3. history.forward(): Перемещает вперед по истории на одну страницу.

history.forward();

4. history.go(delta): Перемещает на указанное количество страниц вперед или назад по истории.

history.go(-2); // Переместить назад на две страницы
history.go(3);  // Переместить вперед на три страницы

5. history.pushState(state, title, url): Добавляет новую запись в истории браузера.

history.pushState({ page: 1 }, "Page 1", "page1.html");

6. history.replaceState(state, title, url): Заменяет текущую запись в истории новой.

history.replaceState({ page: 2 }, "Page 2", "page2.html");

7. Обработчики событий:
   • popstate: Срабатывает при переходе вперед/назад в истории браузера.
   • beforeunload: Срабатывает перед выходом пользователя со страницы.

window.addEventListener("popstate", event => {
  const state = event.state;
  console.log("Popstate event:", state);
});

window.addEventListener("beforeunload", event => {
  event.returnValue = "Вы действительно хотите покинуть страницу?";
});

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

4) Концепция API истории браузера

Основные компоненты концепции API истории браузера:

1. Объект history: Это свойство глобального объекта window, которое предоставляет доступ к API истории браузера.

2. Методы управления историей:

   • pushState(state, title, url): Добавляет новую запись в истории браузера с указанным состоянием, заголовком и URL.
   • replaceState(state, title, url): Заменяет текущую запись в истории новой записью с указанными данными.
   • back(): Перемещает назад по истории браузера.
   • forward(): Перемещает вперед по истории браузера.
   • go(delta): Перемещает на указанное количество страниц вперед или назад по истории.

3. События связанные с историей:

   • popstate: Срабатывает при изменении истории браузера, например, при нажатии кнопок "Назад" или "Вперед".
   • beforeunload: Срабатывает перед тем, как пользователь покинет страницу (обычно используется для показа предупреждения).

5) Как перемещаться по истории браузера ?

Вот как вы можете перемещаться по истории браузера:

1. Метод back(): Перемещает назад по истории на одну страницу. Эквивалентно нажатию кнопки "Назад" в браузере.

history.back();

2. Метод forward(): Перемещает вперед по истории на одну страницу. Эквивалентно нажатию кнопки "Вперед" в браузере.

history.forward();

3. Метод go(delta): Перемещает на указанное количество страниц вперед или назад по истории. Положительное значение перемещает вперед, отрицательное - назад.

history.go(-2); // Переместить назад на две страницы
history.go(3);  // Переместить вперед на три страницы

Пример использования в обработчиках событий или функциях:

document.getElementById("backButton").addEventListener("click", () => {
  history.back(); // Переместить назад по истории
});

document.getElementById("forwardButton").addEventListener("click", () => {
  history.forward(); // Переместить вперед по истории
});

document.getElementById("goButton").addEventListener("click", () => {
  history.go(2); // Переместить вперед на две страницы
});

6) Как использовать состояние истории (необязательно)

Использование состояния истории (History API) в веб-приложениях позволяет создавать более динамические и интерактивные переходы между состояниями приложения без перезагрузки страницы. Состояние истории можно использовать для сохранения данных состояния и контекста приложения, таких как открытая вкладка, фильтры, текущий раздел и т.д. Вот как вы можете использовать состояние истории:

1. Метод pushState(state, title, url): Добавляет новую запись в истории браузера с указанными данными.

const newState = { page: "about" };
const newTitle = "About Us";
const newURL = "/about";
history.pushState(newState, newTitle, newURL);

2. Метод replaceState(state, title, url): Заменяет текущую запись в истории новой.

const updatedState = { page: "contact" };
const updatedTitle = "Contact Us";
const updatedURL = "/contact";
history.replaceState(updatedState, updatedTitle, updatedURL);

3. Событие popstate: Срабатывает при изменении истории браузера (например, при нажатии кнопок "Назад" или "Вперед"). Вы можете использовать это событие для обработки изменений состояния.

window.addEventListener("popstate", event => {
  const state = event.state; // Получение состояния
  if (state) {
    // Обработка изменения состояния
    console.log("New state:", state);
  }
});

7) Навигатор (опционально)

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

1. navigator.userAgent: Возвращает строку, содержащую User-Agent браузера, которая может быть использована для определения типа и версии браузера.

const userAgent = navigator.userAgent;
console.log("User Agent:", userAgent);

2. navigator.platform: Возвращает строку, представляющую операционную систему, на которой запущен браузер.

const platform = navigator.platform;
console.log("Platform:", platform);

3. navigator.language: Возвращает строку, представляющую предпочтительный язык пользователя, установленный в браузере.

const userLanguage = navigator.language;
console.log("User Language:", userLanguage);

4. navigator.cookieEnabled: Возвращает true, если поддержка куки включена в браузере пользователя.

const cookiesEnabled = navigator.cookieEnabled;
console.log("Cookies Enabled:", cookiesEnabled);

5. navigator.onLine: Возвращает true, если браузер подключен к интернету.

const isOnline = navigator.onLine;
console.log("Online Status:", isOnline);

6. navigator.geolocation: Предоставляет доступ к геолокационным данным пользователя, таким как координаты широты и долготы.

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log("Latitude:", latitude);
    console.log("Longitude:", longitude);
  });
} else {
  console.log("Geolocation is not available.");
}

7. navigator.mediaDevices: Предоставляет доступ к мультимедийным устройствам, таким как веб-камера и микрофон.

if ("mediaDevices" in navigator) {
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
      // Обработка медиапотока
    })
    .catch(error => {
      console.error("Error accessing media devices:", error);
    });
} else {
  console.log("Media devices are not supported.");
}

8. navigator.userAgentData: Предоставляет информацию о браузере на основе User-Agent строки.

if ("userAgentData" in navigator) {
  const browserName = navigator.userAgentData.brands[0].brand;
  const browserVersion = navigator.userAgentData.brands[0].version;
  console.log("Browser Name:", browserName);
  console.log("Browser Version:", browserVersion);
} else {
  console.log("User-Agent Data is not available.");
}

8) Как анализировать пользовательский агент (необязательно)

Анализ пользовательского агента (User-Agent) браузера позволяет определить тип и версию браузера, операционную систему и другие характеристики клиентского устройства. Это может быть полезно для создания адаптивных веб-страниц или предоставления оптимального контента в зависимости от характеристик пользователя. Вот как вы можете анализировать пользовательский агент:

1. navigator.userAgent: Свойство userAgent объекта navigator содержит строку, представляющую пользовательский агент браузера.

const userAgent = navigator.userAgent;
console.log("User Agent:", userAgent);

2. Библиотеки и инструменты: Вместо непосредственного анализа пользовательского агента вручную, вы также можете использовать библиотеки или инструменты, которые облегчают это задание, такие как:
   • Bowser: JavaScript-библиотека для анализа пользовательских агентов.
   • UAParser.js: Библиотека для анализа пользовательских агентов.
   • Platform.js: Библиотека для получения информации о браузере, движке и устройстве.

Пример использования библиотеки Bowser:

<script src="https://cdn.jsdelivr.net/npm/bowser@2.11.0/bowser.min.js"></script>
<script>
  const userAgent = navigator.userAgent;
  const browser = bowser.getParser(userAgent);
  
  console.log("Browser Name:", browser.getBrowserName());
  console.log("Browser Version:", browser.getBrowserVersion());
  console.log("OS Name:", browser.getOSName());
  console.log("OS Version:", browser.getOSVersion());
</script>

3. Feature Detection (Обнаружение возможностей): Вместо анализа пользовательского агента вы можете использовать методы обнаружения возможностей браузера и устройства, чтобы определить поддержку определенных функций или API. Это более надежный способ, так как пользовательский агент может быть поддельным или измененным.

Пример обнаружения возможности geolocation:

if ("geolocation" in navigator) {
  // Поддерживается геолокация
} else {
  // Геолокация не поддерживается
}

9) Как открыть клиентскую платформу, браузер

Чтобы открыть клиентскую платформу (веб-браузер) с использованием JavaScript, вы можете использовать метод window.open(). Этот метод позволяет открывать новое окно или вкладку браузера с указанным URL. Вот как это делается:

const url = "https://www.example.com";
const windowFeatures = "width=800,height=600"; // Настройки окна

// Открываем новое окно или вкладку
const newWindow = window.open(url, "_blank", windowFeatures);

// Если блокировка всплывающих окон активирована, newWindow будет равно null
if (newWindow === null) {
  console.log("Popup window was blocked by the browser.");
}

В данном примере:

• url - это адрес, который вы хотите открыть.
• _blank - это атрибут target, который говорит браузеру открыть новое окно или вкладку.
• windowFeatures - это строка, определяющая параметры нового окна (ширина, высота и т.д.).

Обратите внимание, что использование метода window.open() может быть блокировано браузером, если в браузере активирована блокировка всплывающих окон. В этом случае newWindow будет равно null.

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

10) Cookies

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

Основные характеристики cookies:

1. Хранение данных: Cookies могут содержать небольшие объемы данных, такие как идентификаторы сеансов, пользовательские настройки, предпочтения и другие данные.

2. Срок действия: Cookies имеют определенное время жизни. Они могут быть временными (сеансовыми), когда они хранятся только в течение одной сессии браузера, или постоянными, когда они сохраняются на браузере даже после закрытия и повторного открытия.

3. Доступ к данным: Cookies доступны как для сервера, который их установил, так и для клиента (браузера), который их хранит. Это позволяет сохранять данные о сеансе между запросами к серверу.

4. Безопасность: Cookies могут быть безопасными или небезопасными в зависимости от их настроек. Безопасные cookies (устанавливаемые с использованием HTTPS) не могут быть доступны для скриптов на сторонних доменах.

Пример создания и чтения cookies:

// Установка cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2023 23:59:59 UTC; path=/";

// Чтение cookie
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
  const cookie = cookies[i].trim();
  if (cookie.startsWith("username=")) {
    const username = cookie.substring("username=".length, cookie.length);
    console.log("Username:", username);
    break;
  }
}

17. Жизненный цикл страницы

1) Анализ (parsing)

Анализ (parsing) в программировании означает процесс разбора и обработки структурированных данных, таких как текстовые строки или файлы, для извлечения нужной информации или выполнения определенных операций. Анализ используется для преобразования данных из одного формата в другой, извлечения значений, проверки синтаксиса и т.д. Вот некоторые примеры анализа в различных контекстах:

1. Анализ XML/HTML: Разбор XML или HTML документов для извлечения содержимого элементов, атрибутов и данных. Это часто используется для веб-скрапинга (извлечения данных из веб-страниц).

2. Анализ JSON: Разбор JSON-формата для извлечения структурированных данных. JSON-анализаторы могут преобразовывать JSON-строки в объекты или структуры данных в языках программирования.

3. Анализ CSV (Comma-Separated Values): Разбор CSV-файлов для извлечения табличных данных, разделенных запятыми или другими разделителями.

4. Анализ запросов и URL: Разбор URL-адресов и строк запросов для извлечения параметров и данных, переданных в URL.

5. Анализ пользовательского ввода: Прием и анализ данных, введенных пользователем через интерфейс, например, валидация и извлечение данных из форм.

6. Анализ логов и данных журнала: Разбор журналов и лог-файлов для анализа событий, ошибок, трендов и статистики.

7. Анализ исходного кода: Разбор и анализ исходного кода программы для выполнения статического анализа, поиска ошибок или оптимизации.

2) Переформатирование (reflow)

Переформатирование (reflow) – это процесс в браузерной среде, при котором браузер вычисляет и перераспределяет положение и размеры элементов на веб-странице в ответ на изменения в дереве элементов или визуальном представлении. Переформатирование происходит, когда что-либо меняется на странице, такое как изменение размеров элементов, добавление или удаление элементов, изменение текста и т.д. Переформатирование может быть вызвано как пользовательскими действиями, так и изменениями, выполненными программно через JavaScript.

Когда происходит переформатирование, браузер должен пересчитать геометрические параметры элементов, такие как размеры, положение, шрифты, отступы и прочее. Этот процесс может быть довольно ресурсоемким, особенно на страницах с большим количеством элементов.

Примеры событий и действий, которые могут вызвать переформатирование:

1. Изменение размеров или положения элементов.
2. Изменение стилей элементов, которые влияют на их геометрию (например, шрифты, отступы, границы и др.).
3. Добавление или удаление элементов из дерева DOM.
4. Изменение размеров окна браузера.
5. Изменение текстового содержимого, который влияет на размеры элементов.

Эффективное управление переформатированием важно для оптимизации производительности веб-приложений. Переформатирование может вызвать задержки в рендеринге страницы, особенно на мобильных устройствах или при использовании сложных CSS-стилей. Для уменьшения переформатирования рекомендуется:

• Использовать CSS-свойства, которые не вызывают переформатирование, например, transform и opacity.
• Избегать изменения стилей элементов внутри циклов, чтобы минимизировать частоту переформатирования.
• Использовать CSS-анимации и транзиции вместо анимаций, основанных на изменении размеров.
• Пакетное обновление стилей и изменений в DOM, если это возможно.
• Использовать визуальные изменения (например, display: none и visibility: hidden) с умом, чтобы избежать дополнительных переформатирований.

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

3) Перекрашивание (repaint)

Перекрасить (repaint) - это процесс в веб-браузерах, при котором элементы на веб-странице перерисовываются согласно их стилям и текущему состоянию. В отличие от переформатирования (reflow), перекраска не требует полного пересчета геометрических параметров элементов, а только перерисовку пикселей на экране с учетом их стилей.

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

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

Примеры событий и действий, которые могут вызвать перекраску:

1. Изменение стилей элементов, таких как цвет фона, шрифта, границ и других свойств.
2. Анимации, использующие свойства, которые вызывают перекраску (например, изменение цвета или прозрачности).
3. Изменение текстового содержимого элементов.

Эффективное управление перекраской также важно для оптимизации производительности веб-приложений. Для уменьшения перекраски рекомендуется:

• Использовать CSS-свойства, которые могут быть перерисованы браузером с меньшими затратами, например, background-color, color, opacity и др.
• Избегать использования анимаций и изменений стилей, которые сильно влияют на перекраску в циклах или на быстро меняющихся элементах.
• Использовать анимации, основанные на свойствах, которые вызывают более эффективную перекраску, например, transform и opacity.

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

4) Критический путь рендеринга (CRP) (необязательно)

Критический путь рендеринга (CRP) - это понятие в веб-разработке, которое описывает последовательность загрузки и рендеринга элементов на веб-странице, которые влияют на отображение верхней части страницы и создание первого визуального впечатления для пользователя.

CRP включает в себя ряд этапов, которые браузер выполняет для отображения содержимого на экране пользователя:

1. Загрузка и анализ HTML: Браузер начинает с загрузки и анализа HTML-документа страницы. Он строит DOM-дерево, представляющее структуру элементов на странице.

2. Загрузка критических ресурсов: Это включает в себя внешние стили (CSS), шрифты, изображения и другие ресурсы, которые необходимы для отображения верхней части страницы. Браузер старается определить, какие из этих ресурсов являются критическими для отображения "above-the-fold" содержимого (то, что видно пользователю сразу при открытии страницы).

3. Выполнение и переформатирование (Reflow): Браузер выполняет переформатирование, чтобы определить, какие элементы и стили влияют на верхнюю часть страницы. Это может быть ресурсоемким процессом, так как браузер должен рассчитать положение и размеры элементов.

4. Перерисовка (Repaint): Браузер перерисовывает элементы на основе их стилей и размеров после переформатирования.

5. Отображение верхней части страницы: Как только все необходимые ресурсы загружены, переформатированы и перерисованы, браузер может начать отображение верхней части страницы, которая видна пользователю.

Оптимизация CRP важна для ускорения отображения страницы и создания быстрого визуального впечатления для пользователя. Некоторые стратегии оптимизации CRP включают:

• Использование критических CSS: Определение и встраивание в HTML критических стилей для быстрого отображения верхней части страницы.
• Оптимизация загрузки ресурсов: Минимизация и сжатие CSS, JavaScript и изображений для быстрой загрузки.
• Ленивая загрузка (Lazy Loading): Загрузка изображений и других ресурсов только по мере их появления в видимой области экрана.
• Использование асинхронных и отложенных скриптов: Помещение скриптов вниз страницы или загрузка их асинхронно для минимизации блокировки рендеринга.

Цель оптимизации CRP - минимизировать время отображения содержимого пользователю и создать быстрое и плавное визуальное впечатление при первом взаимодействии с веб-страницей.

5) Основы события (events) (необязательно)

1. Типы событий: Существует множество различных типов событий, таких как клик мыши, нажатие клавиш, отправка формы, загрузка ресурсов, изменение размеров окна и многие другие.

2. Обработчики событий: Обработчики событий – это функции JavaScript, которые выполняются при возникновении определенного события. Они связываются с элементами DOM и реагируют на события, такие как клики, нажатия клавиш и другие.

3. Пример обработчика события:

const button = document.querySelector("#myButton");

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);

4. Всплытие событий (Event Bubbling): Всплытие событий означает, что когда событие происходит на элементе, оно также автоматически происходит на родительских элементах до самого верхнего элемента DOM (обычно document). Это позволяет обработчикам событий на родительских элементах также реагировать на событие.

5. Отмена действия по умолчанию (Prevent Default): В некоторых случаях обработчики событий могут предотвратить выполнение стандартных действий, которые обычно происходят при событии. Например, при клике на ссылку, обработчик может предотвратить переход по ссылке и выполнить другие действия.

6. Делегирование событий (Event Delegation): Делегирование событий – это паттерн, при котором обработчик события добавляется к родительскому элементу, но реагирует на события, происходящие на его потомках. Это может быть полезно для оптимизации и уменьшения количества обработчиков.

7. События мыши: К примеру, click (клик мыши), mouseover (наведение мыши), mouseout (убирание мыши), mousedown (нажатие кнопки мыши) и другие.

8. События клавиатуры: Например, keydown (нажатие клавиши), keyup (отпускание клавиши).

9. События форм: Например, submit (отправка формы), input (изменение значения элемента ввода).

10. События документа и окна: Например, load (загрузка документа или ресурсов), resize (изменение размеров окна).

6) Пользовательские события (events) (необязательно)

Пользовательские события (custom events) - это события, созданные разработчиками на базе существующих событий в браузере. Они позволяют программистам создавать и инициировать собственные события в приложении или на веб-странице. Пользовательские события полезны, когда вам нужно организовать коммуникацию между различными компонентами или модулями в вашем приложении.

Чтобы создать пользовательское событие, вы можете использовать класс CustomEvent в JavaScript. Вот пример:

// Создание пользовательского события
const customEvent = new CustomEvent('myCustomEvent', {
  bubbles: true, // Событие будет всплывать
  detail: { key: 'value' } // Дополнительные данные
});

// Инициирование события на элементе
const element = document.getElementById('myElement');
element.dispatchEvent(customEvent);

Затем вы можете добавить обработчик пользовательского события к элементу:

element.addEventListener('myCustomEvent', function(event) {
  console.log('Custom event occurred:', event.detail);
});

18. Веб-компоненты (необязательно)

1) Веб-компоненты, теневой DOM (концепция) (необязательно)

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

Основные составляющие веб-компонентов:

1. Custom Elements (Пользовательские элементы): Custom Elements позволяют создавать собственные HTML-теги с пользовательской логикой и поведением. Это позволяет создавать компоненты, которые ведут себя подобно стандартным HTML-элементам.

2. Shadow DOM (Теневой DOM): Теневой DOM представляет собой отдельное дерево элементов, которое может быть связано с пользовательским элементом. Это позволяет изолировать стили и элементы компонента от внешней структуры страницы.

3. HTML Templates (HTML-шаблоны): HTML-шаблоны позволяют определить структуру и содержимое пользовательского элемента, которое будет использоваться при его создании.

4. HTML Imports (Импорты HTML): Некогда популярная технология, позволяющая импортировать и использовать веб-компоненты из других файлов.

Основные принципы и концепции теневого DOM:

• Изоляция: Элементы и стили, определенные в теневом DOM, ограничены областью видимости компонента и не доступны для внешних элементов.

• Инкапсуляция: Теневой DOM позволяет инкапсулировать логику и структуру компонента, обеспечивая его независимость.

• Структура: Теневой DOM имеет аналогичную структуру, как и обычный DOM, но она применяется только внутри компонента.

• События: Теневой DOM также поддерживает события и обработчики событий, что позволяет компонентам взаимодействовать с внешним миром.

19. Сетевые запросы

2) Fetch (с использованием)

fetch - это современный стандартный метод JavaScript для выполнения сетевых запросов к серверу и получения данных. Он предоставляет более удобный и гибкий способ взаимодействия с сервером по сравнению с более старыми методами, такими как XMLHttpRequest.

Вот как использовать fetch:

// Простой GET-запрос
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

// POST-запрос с отправкой данных
fetch('https://api.example.com/post', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

В приведенном выше примере:

• fetch принимает URL-адрес запроса в качестве первого аргумента и возвращает Promise, который разрешается в объект Response.

• Метод then вызывается на Promise Response и позволяет обработать полученный ответ. В первом then, мы проверяем, что статус ответа (свойство ok) соответствует успешному запросу, а затем преобразуем ответ в JSON. Во втором then, мы работаем с данными.

• Метод catch используется для обработки ошибок, возникающих во время выполнения запроса.

• Для отправки POST-запроса мы передаем второй аргумент в fetch, который включает в себя метод, заголовки и тело запроса.

3) XMLHTTPRequest (концепция) (необязательно)

XMLHttpRequest (XHR) - это стандартный объект в JavaScript, который позволяет выполнять асинхронные HTTP-запросы к серверу без перезагрузки страницы. Он был одним из основных методов веб-разработки для отправки и получения данных с сервера до появления более современных альтернатив, таких как fetch.

Основные этапы работы с XMLHttpRequest:

1. Создание экземпляра XMLHttpRequest:

const xhr = new XMLHttpRequest();

2. Настройка запроса:

Устанавливаем метод (GET, POST, PUT и т.д.) и URL-адрес, куда будет отправлен запрос:

xhr.open('GET', 'https://api.example.com/data', true); // true указывает на асинхронность запроса

Можно также настроить заголовки запроса:

xhr.setRequestHeader('Content-Type', 'application/json');

3. Установка обработчиков событий:

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Успешный запрос:', xhr.responseText);
  } else {
    console.log('Ошибка:', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.log('Ошибка запроса');
};

4. Отправка запроса:

xhr.send();

5. Обработка ответа:

В обработчике события onload, можно получить данные ответа:

console.log(xhr.responseText);

4) WebSocket (концепция) (необязательно)

WebSocket - это протокол связи между клиентом и сервером в веб-приложениях, который обеспечивает более эффективное и долгосрочное двустороннее взаимодействие, чем традиционные HTTP запросы. Он позволяет устанавливать постоянное соединение между браузером и сервером, что делает возможным передачу данных в режиме реального времени без необходимости постоянных запросов и обновлений страницы.

Основные характеристики WebSocket:

1. Двустороннее взаимодействие: WebSocket позволяет отправлять и принимать данные как с клиента на сервер, так и с сервера на клиент. Это делает его идеальным для реализации чатов, онлайн-игр, потоковых данных и других сценариев, где важно мгновенное обновление информации.

2. Постоянное соединение: В отличие от HTTP, которое создает новое соединение для каждого запроса, WebSocket устанавливает одно постоянное соединение, которое остается активным в течение всей сессии. Это снижает нагрузку на сервер и уменьшает задержку между обменом данными.

3. Низкая задержка: Благодаря постоянному соединению и возможности отправки данных без лишних накладных расходов, WebSocket обеспечивает более низкую задержку и более быструю передачу данных по сравнению с традиционными HTTP запросами.

4. Протокол сообщений: WebSocket использует протокол сообщений, который позволяет отправлять и получать данные в формате "фреймов", без необходимости использовать разделители или структуры запросов и ответов.

5. Кросс-доменное взаимодействие: WebSocket может взаимодействовать с серверами на других доменах при наличии поддержки CORS (Cross-Origin Resource Sharing).

Для использования WebSocket в веб-приложении, клиентская сторона (браузер) и сервер должны поддерживать этот протокол. Веб-приложение может устанавливать соединение с сервером через WebSocket, после чего они могут обмениваться данными в режиме реального времени.

Пример использования WebSocket на стороне клиента (JavaScript):

const socket = new WebSocket('wss://example.com/socket');

socket.onopen = function(event) {
  console.log('Соединение установлено');
};

socket.onmessage = function(event) {
  console.log('Получены данные:', event.data);
};

socket.onclose = function(event) {
  console.log('Соединение закрыто');
};

20. Таймеры (необязательно)

1) RequestAnimationFrame (необязательно)

requestAnimationFrame (RAF) - это метод в JavaScript, предоставляющий браузеру эффективный способ анимации и обновления визуализации на веб-странице. Он предназначен для планирования анимаций и других визуальных обновлений с помощью оптимального использования ресурсов устройства, что обеспечивает более плавное и производительное воспроизведение анимаций.

Основные преимущества использования requestAnimationFrame:

1. Синхронизация с отрисовкой экрана: requestAnimationFrame автоматически синхронизируется с процессом обновления экрана, что позволяет избежать артефактов и мельканий на анимированных элементах.

2. Оптимальное использование ресурсов: Браузер самостоятельно решает, когда лучше всего обновлять экран, чтобы минимизировать нагрузку на процессор и батарею.

3. Автоматическая пауза: Если пользователь активирует другую вкладку или сворачивает окно браузера, анимация автоматически приостанавливается, что экономит ресурсы.

Пример использования requestAnimationFrame для создания анимации:

function animate(timestamp) {
  // Ваш код анимации здесь
  // timestamp - текущее время в миллисекундах
  requestAnimationFrame(animate);
}

// Запуск анимации
requestAnimationFrame(animate);

В приведенном примере animate - это функция, которая будет вызываться браузером перед каждым обновлением экрана. В этой функции вы можете выполнять логику анимации, изменяя свойства элементов DOM, обновляя стили и т.д. Затем вы вызываете requestAnimationFrame(animate) внутри функции animate, чтобы продолжить анимацию на следующем кадре.

2) Разница между setTimeout and requestAnimationFrame (необязательно)

Вот основные различия между ними:

1. Синхронизация с отрисовкой экрана:

   • setTimeout: Код, запланированный с помощью setTimeout, будет выполнен асинхронно после указанной задержки. Однако выполнение этого кода не синхронизировано с процессом обновления экрана. Это может привести к артефактам и мельканиям при анимации или других визуальных эффектах.

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

2. Оптимальное использование ресурсов:

   • setTimeout: Код, запланированный с помощью setTimeout, может выполняться в любой момент после истечения указанной задержки. Это может привести к неравномерному использованию ресурсов и нагрузке на процессор.

   • requestAnimationFrame: Браузер оптимизирует время выполнения кода, запланированного с помощью requestAnimationFrame, чтобы минимизировать нагрузку на процессор и батарею. Код будет выполняться в ближайший момент перед следующим обновлением экрана.

3. Автоматическая пауза:

   • setTimeout: Код, запланированный с помощью setTimeout, будет продолжать выполняться даже тогда, когда пользователь активирует другую вкладку или сворачивает окно браузера.

   • requestAnimationFrame: Если пользователь активирует другую вкладку или сворачивает окно браузера, анимация, запланированная с помощью requestAnimationFrame, автоматически приостанавливается, что помогает экономить ресурсы.

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

21. API веб-хранилища и файлы cookie

1) Cookies

Cookies (куки) - это небольшие текстовые файлы, которые веб-сайты отправляют и хранят на компьютере пользователя через веб-браузер. Куки используются для хранения небольших объемов информации о состоянии пользователя и сессии, а также для отслеживания активности пользователя на веб-сайте. Они широко используются для авторизации, сохранения настроек пользователя, аналитики и других задач.

Основные характеристики куки:

1. Хранение данных: Куки могут хранить небольшие объемы данных (обычно не более 4 КБ) в текстовом формате.

2. Доступность: Куки могут быть доступны на определенное количество доменов и поддоменов, в зависимости от их настроек.

3. Срок годности: Каждое куки имеет установленный срок годности, определяющий, сколько времени оно будет храниться на компьютере пользователя. Куки могут быть сессионными (действительными только во время текущей сессии браузера) или персистентными (с определенным сроком годности).

4. Безопасность: Куки могут быть установлены только в доменах, с которых они отправляются. Однако куки могут быть уязвимы для атак, таких как кража сессии или утечка данных, если не используются соответствующие меры безопасности.

Пример создания и чтения куки с использованием JavaScript:

// Установка куки
document.cookie = "username=John Doe; expires=Thu, 18 Aug 2023 12:00:00 UTC; path=/";

// Чтение куки
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
  const [name, value] = cookie.split('=');
  console.log(`${name}: ${value}`);
}

В этом примере кода устанавливается куки с именем "username" и значением "John Doe", а также указывается срок его действия и путь доступа. Затем происходит чтение всех доступных куки и вывод их имени и значения. Стоит отметить, что использование куки имеет свои ограничения и может вызвать проблемы с конфиденциальностью данных пользователей. В связи с этим, современные методы, такие как Web Storage и токены авторизации, широко применяются для более безопасного и эффективного хранения данных на клиентской стороне.

2) Разница между localStorage, sessionStorage и cookies

1. localStorage:

   • Хранение: Данные хранятся в постоянной памяти браузера (похоже на куки), и данные сохраняются даже после закрытия браузера или перезагрузки страницы.
   • Срок годности: Данные хранятся бессрочно, пока не будут явно удалены или пока пользователь не очистит кеш браузера.
   • Доступность: Данные доступны для всех вкладок и окон, открытых в том же домене.

2. sessionStorage:

   • Хранение: Данные хранятся во временной памяти браузера и доступны только в рамках текущей сессии браузера. После закрытия вкладки или окна данные будут удалены.
   • Срок годности: Данные хранятся до закрытия вкладки или окна.
   • Доступность: Данные доступны только в той же вкладке или окне, в которой они были установлены.

3. cookies:

   • Хранение: Данные хранятся в текстовых файлах на компьютере пользователя через веб-браузер.
   • Срок годности: Можно задать срок годности для каждой куки. Они могут быть сессионными (действительными только во время текущей сессии браузера) или персистентными (с определенным сроком годности).
   • Доступность: Данные доступны для всех вкладок и окон, открытых в том же домене, а также для запросов к этому домену, отправленных с сервера.

Выбор между этими механизмами зависит от конкретных требований вашего веб-приложения:

• Если вам нужно хранить данные между сессиями пользователя, localStorage может быть подходящим вариантом.
• Если вам нужно временно хранить данные в течение одной сессии, sessionStorage может быть полезным.
• Если вам нужно отправлять данные на сервер и иметь доступ к ним с бэкенда, cookies могут быть полезными, хотя стоит учесть ограничения по размеру и безопасности.

22. Typescript

1) Основные типы

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

Вот основные типы данных в TypeScript:

1. number: Представляет числовое значение, включая целые числа и числа с плавающей запятой.

let age: number = 25;
let pi: number = 3.14;

2. string: Представляет строковое значение.

let name: string = "John";
let message: string = `Hello, ${name}!`;

3. boolean: Представляет булево значение true или false.

let isActive: boolean = true;
let isLoggedOut: boolean = false;

4. object: Представляет сложные объекты, включая объекты, массивы, функции и другие структуры данных.

let person: object = {
  name: "Alice",
  age: 30
};

5. any: Представляет тип без статической проверки типов. Использование any позволяет присваивать переменным значения любого типа.

let dynamicValue: any = "Hello";
dynamicValue = 42;

6. void: Обычно используется в контексте функций, указывая, что функция не возвращает значение.

function logMessage(message: string): void {
  console.log(message);
}

7. null и undefined: Представляют отсутствие значения.

let nullValue: null = null;
let undefinedValue: undefined = undefined;

8. array: Представляет массив элементов одного типа.

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

9. tuple: Представляет массив с фиксированным числом элементов разных типов.

let person: [string, number] = ["Alice", 30];

10. union: Позволяет указать возможность переменной иметь несколько типов.

let value: string | number = "abc";
value = 123;

11. literal: Позволяет указать точное значение для переменной.

let status: "active" | "inactive" = "active";

12. type: Позволяет создавать пользовательские типы.

type Point = {
  x: number;
  y: number;
};

2) enums

enum (перечисление) - это тип данных в языке программирования, который позволяет задать именованный набор значений.

Вот пример объявления и использования enum в TypeScript:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let userDirection: Direction = Direction.Right;
if (userDirection === Direction.Right) {
  console.log("User is moving to the right");
}

В этом примере enum с именем Direction определяет четыре значения: Up, Down, Left и Right. При объявлении enum, каждому значению автоматически присваивается числовое значение, начиная с 0 (по умолчанию), которое может быть использовано для индексации и сравнения.

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

Например, в JavaScript enum отсутствует как нативный тип, но его функциональность можно эмулировать с помощью объектов или констант:

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};

let userDirection = Direction.Right;
if (userDirection === Direction.Right) {
  console.log("User is moving to the right");
}

3) типы / интерфейсы, разница между ними

Вот основные различия между типами и интерфейсами в TypeScript:

1. Определение сущностей:

   • Типы (types): Определяются с помощью ключевого слова type. Могут представлять собой набор свойств и их типов, а также могут включать объединения (|) и пересечения (&) типов.
   • Интерфейсы (interfaces): Определяются с помощью ключевого слова interface. Могут также определять набор свойств и их типов, а также включать объединения и расширения интерфейсов.

2. Объединение и наследование:

   • Типы (types): Могут использоваться в объединениях и пересечениях типов, но не поддерживают наследование.
   • Интерфейсы (interfaces): Поддерживают наследование других интерфейсов, что позволяет создавать иерархии и переиспользовать определения.

3. Расширение:

   • Типы (types): Не поддерживают расширение других типов, они могут быть только переопределены.
   • Интерфейсы (interfaces): Поддерживают расширение других интерфейсов, что позволяет добавлять дополнительные поля к существующим определениям.

4. Имплементация классов:

   • Типы (types): Не могут быть использованы для имплементации классов.
   • Интерфейсы (interfaces): Могут быть использованы для определения контрактов, которые классы должны реализовать.

5. Выбор по стилю:

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

4) использование interfaces с необязательными свойствами, свойствами доступными только для чтения, и т.д...

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

interface Person {
  firstName: string;
  lastName?: string; // Свойство необязательное
}

const person1: Person = { firstName: "John" };
const person2: Person = { firstName: "Jane", lastName: "Doe" };

2. Свойства только для чтения: Используйте ключевое слово readonly перед свойством, чтобы сделать его доступным только для чтения:

interface Book {
  title: string;
  readonly author: string; // Свойство только для чтения
}

const book: Book = { title: "The Great Gatsby", author: "F. Scott Fitzgerald" };
// book.author = "Another Author"; // Ошибка, свойство только для чтения

3. Индексные подписи: Вы можете использовать индексные подписи для создания объектов с динамическими ключами и типами значений:

interface Dictionary {
  [key: string]: string;
}

const colors: Dictionary = {
  red: "#FF0000",
  blue: "#0000FF"
};

4. Функции в интерфейсах: Вы можете определять сигнатуры функций в интерфейсах для описания формата функций:

interface Calculator {
  (x: number, y: number): number;
}

const add: Calculator = (a, b) => a + b;
const subtract: Calculator = (a, b) => a - b;

5. Наследование интерфейсов: Интерфейсы могут наследовать друг друга:

interface Vehicle {
  wheels: number;
}

interface Car extends Vehicle {
  brand: string;
}

const myCar: Car = { wheels: 4, brand: "Toyota" };

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

5) типы функций

В TypeScript существует несколько способов определения типов для функций. Эти типы позволяют строго определить параметры, возвращаемые значения и другие характеристики функций. Вот некоторые из основных типов функций:

1. Тип функции (Function Type):

   type Calculator = (x: number, y: number) => number;
   
   const add: Calculator = (x, y) => x + y;
   const subtract: Calculator = (x, y) => x - y;

2. Тип функции с параметрами и возвращаемым значением:

   type GreetFunction = (name: string, greeting: string) => string;
   
   const greet: GreetFunction = (name, greeting) => `${greeting}, ${name}!`;

3. Тип функции с параметрами по умолчанию и возвращаемым значением:

   type SumFunction = (x: number, y: number, z?: number) => number;
   
   const sum: SumFunction = (x, y, z = 0) => x + y + z;

4. Тип функции с Rest-параметром:

   type MathFunction = (...numbers: number[]) => number;
   
   const calculate: MathFunction = (...numbers) =>
     numbers.reduce((total, num) => total + num, 0);

5. Тип функции с this-параметром:

   type EventHandler = (this: HTMLElement, event: Event) => void;
   
   const handleClick: EventHandler = function (event) {
     // this указывает на HTMLElement, на котором произошло событие
   };

6. Тип функции как свойство объекта:

   interface MathOperations {
     add(x: number, y: number): number;
     subtract(x: number, y: number): number;
   }
   
   const math: MathOperations = {
     add: (x, y) => x + y,
     subtract: (x, y) => x - y
   };

6) Утилитарные типы (необзязательно)

Утилитарные типы (Utility Types) в TypeScript - это предварительно определенные типы, предоставляемые самим языком, которые облегчают и упрощают работу с другими типами данных.

Некоторые из наиболее часто используемых утилитарных типов:

1. Partial: Создает тип, который делает все свойства в исходном типе необязательными:
2. Required: Создает тип, который делает все свойства в исходном типе обязательными:
3. Readonly: Создает тип, который делает все свойства в исходном типе доступными только для чтения:
4. Pick<Type, Keys>: Создает тип, выбирая только указанные свойства из исходного типа:
5. Omit<Type, Keys>: Создает тип, исключая указанные свойства из исходного типа:
6. Record<Keys, Type>: Создает тип, который создает объект с указанными ключами и типом значений:
7. Exclude<Type, ExcludedUnion>: Создает тип, который исключает из исходного типа все типы, входящие в объединение:
8. Extract<Type, Union>: Создает тип, который выбирает только те типы из исходного типа, которые входят в объединение:
9. NonNullable: Создает тип, который исключает null и undefined из исходного типа:

7) типоразмеры (необязательно)

Типоразмеры (Type Sizes) в TypeScript представляют собой вычисление размера или длины типов внутри системы типов TypeScript. Они полезны для различных задач, таких как проверка, является ли тип пустым, получение длины кортежа и других манипуляций с типами во время компиляции.

В TypeScript 4.1 и более поздних версиях встроены некоторые утилитарные типы, которые позволяют работать с типоразмерами:

1. Length<T>: Этот утилитарный тип вычисляет длину (количество свойств) типа T:

   type Tuple = [number, string, boolean];
   type TupleLength = Length<Tuple>; // 3

2. UnionToIntersection<U>: Преобразует объединение типов в их пересечение:

   type Union = { a: number } | { b: string };
   type Intersection = UnionToIntersection<Union>; // { a: number } & { b: string }

3. Keysof<T>: Возвращает объединение строковых литералов, представляющих ключи объекта T:

   type ObjectKeys = Keysof<{ foo: number; bar: string }>; // "foo" | "bar"

4. ValueOf<T>: Получает тип значения свойства из объекта T:

   type ObjectValues = ValueOf<{ foo: number; bar: string }>; // number | string

8) создание пользовательских типов

Вот как создать пользовательские типы:

1. Использование ключевого слова type:

   С помощью ключевого слова type вы можете создавать пользовательские типы:

   type Point = {
     x: number;
     y: number;
   };
   
   type Employee = {
     id: number;
     name: string;
   };

   Вы можете использовать созданные типы как аннотации типов для переменных, параметров функций и других мест:

   const origin: Point = { x: 0, y: 0 };
   
   function printEmployee(employee: Employee) {
     console.log(`${employee.name} (ID: ${employee.id})`);
   }

2. Использование interface:

   interface - это ещё один способ определения пользовательских типов. Он часто используется для определения контрактов, которые классы должны реализовать:

   interface Person {
     name: string;
     age: number;
   }
   
   class Student implements Person {
     constructor(public name: string, public age: number) {}
   }

3. Объединение и пересечение типов:

   Вы можете комбинировать типы с помощью объединения (|) и пересечения (&):

   type Status = "active" | "inactive";
   type EmployeeStatus = Employee & { status: Status };

4. Уточнение типов (Type Narrowing):

   TypeScript позволяет уточнять типы с помощью условных выражений:

   function getStatus(employee: EmployeeStatus) {
     if (employee.status === "active") {
       console.log("Employee is active");
     } else {
       console.log("Employee is inactive");
     }
   }

9) generic типы (концепция)

Обобщенные (generic) типы в TypeScript позволяют создавать компоненты (функции, классы, интерфейсы и т.д.), которые могут работать с различными типами данных, предоставляемыми в качестве параметров. Это позволяет создавать более гибкие и повторно используемые компоненты, которые могут работать с разнообразными типами данных без необходимости дублирования кода.

Для создания обобщенных типов используется параметр типа (типовая переменная), который заменяется конкретными типами при использовании обобщенного типа. Вот примеры использования обобщенных типов:

1. Обобщенная функция:

   function identity<T>(value: T): T {
     return value;
   }
   
   const result = identity<number>(42); // Тип T заменен на number

2. Обобщенный интерфейс:

   interface Box<T> {
     value: T;
   }
   
   const boxOfNumbers: Box<number> = { value: 42 };
   const boxOfStrings: Box<string> = { value: "Hello" };

3. Обобщенный класс:

   class Pair<T, U> {
     constructor(public first: T, public second: U) {}
   }
   
   const pair: Pair<number, string> = new Pair(42, "forty-two");

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

   function logLength<T extends { length: number }>(value: T): void {
     console.log(value.length);
   }
   
   logLength("Hello"); // OK
   logLength([1, 2, 3]); // OK
   logLength(42); // Ошибка, так как number не имеет свойства length

10) понимание TS (ES6) модульной системы

Модульная система в TypeScript (и ES6) представляет собой способ организации и структурирования кода, который позволяет разделять функциональность программы на отдельные модули или файлы. Каждый модуль может содержать определения переменных, функций, классов и других конструкций, и эти определения могут быть экспортированы и импортированы между модулями для обеспечения разделения обязанностей, повторного использования и лучшей организации кода.

Вот основные концепции модульной системы в TypeScript (и ES6):

1. Экспорт и импорт:

   • С помощью ключевого слова export вы можете экспортировать определения из модуля, чтобы они были доступны в других модулях.
   • С помощью ключевого слова import вы можете импортировать экспортированные определения из других модулей.

2. Именованные экспорты:

   • Вы можете экспортировать определения по именам с помощью именованных экспортов.
   • Другие модули могут импортировать только те именованные экспорты, которые они явно указали.

3. Экспорт по умолчанию:

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

4. Реэкспорт:

   • Модуль может переэкспортировать экспорты другого модуля, чтобы создать новые именованные или экспорты по умолчанию.
   • Это может быть полезно для создания промежуточных модулей или для предоставления доступа к определениям из других мест.

Пример использования модульной системы в TypeScript:

Файл math.ts:

export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}

Файл app.ts:

import { add, subtract } from './math';

console.log(add(10, 5)); // 15
console.log(subtract(10, 5)); // 5

Модульная система в TypeScript (и ES6) помогает улучшить организацию кода, сделать его более понятным, обеспечить переиспользование и изоляцию функциональности, а также упростить разработку крупных приложений.

23. Design patterns

1) Создание Design Patterns

Вот некоторые шаги для создания паттернов проектирования:

1. Понимание проблемы: Начните с понимания конкретной проблемы или сценария, которую вы хотите решить с помощью паттерна. Определите, какие требования и ограничения у вас есть.

2. Изучение существующих паттернов: Изучите существующие паттерны проектирования, такие как "Gang of Four" паттерны или другие, чтобы узнать, какие решения уже существуют и как они могут быть применены к вашей проблеме.

3. Выбор подходящего паттерна: Идентифицируйте паттерн, который наилучшим образом подходит для решения вашей проблемы. Подберите паттерн, который соответствует требованиям вашего проекта.

4. Проектирование и реализация: Начните проектировать и реализовывать код, используя выбранный паттерн. Примените соответствующие структуры, классы и методы, определенные паттерном.

5. Тестирование и оптимизация: Проведите тестирование вашей реализации, чтобы убедиться, что она работает должным образом и соответствует требованиям. Внесите необходимые корректировки и оптимизации.

6. Документация: Документируйте ваш паттерн проектирования, описывая его назначение, структуру, способ применения и примеры использования. Это поможет другим разработчикам легче понять и использовать ваш паттерн.

Примеры паттернов проектирования включают Singleton, Factory, Observer, Strategy, и многие другие. Паттерны помогают улучшить архитектуру вашего кода, упростить его поддержку и расширение, а также способствуют повторному использованию уже проверенных решений.

2) Структура Design Patterns

Паттерны проектирования представляют собой абстрактные шаблоны решения для типичных проблем в программировании. Они разделяются на три основные категории: создающие паттерны, структурные паттерны и поведенческие паттерны. Вот обзор каждой категории:

1. Создающие паттерны (Creational Patterns): Эти паттерны относятся к процессу создания объектов. Они обеспечивают гибкость при создании экземпляров классов, управляют способами их создания и обеспечивают изолированность клиентского кода от способа создания объектов. Примеры:

   • Singleton: Гарантирует, что у класса есть только один экземпляр, и предоставляет глобальную точку доступа к этому экземпляру.
   • Factory Method: Определяет интерфейс для создания объектов, но делегирует фактическое создание подклассам.
   • Abstract Factory: Предоставляет интерфейс для создания семейств связанных или зависимых объектов, без указания их конкретных классов.
   • Builder: Отделяет конструирование сложного объекта от его представления, позволяя создавать различные представления одного и того же объекта.

2. Структурные паттерны (Structural Patterns): Эти паттерны описывают способы композиции объектов для создания новых структур. Они помогают определить, как классы и объекты могут быть объединены для формирования более крупных структур. Примеры:

   • Adapter: Преобразует интерфейс одного класса в интерфейс, ожидаемый клиентом, чтобы сделать совместимыми несовместимые классы.
   • Decorator: Динамически добавляет дополнительную функциональность к объекту без изменения его структуры.
   • Composite: Группирует объекты в древовидные структуры для представления иерархий часть-целое.
   • Facade: Предоставляет унифицированный интерфейс к группе интерфейсов в подсистеме.

3. Поведенческие паттерны (Behavioral Patterns): Эти паттерны определяют способы взаимодействия между объектами разных классов, чтобы повысить гибкость и расширяемость системы. Они сосредотачиваются на эффективной коммуникации между объектами. Примеры:

   • Observer: Определяет зависимость "один-ко-многим" между объектами так, чтобы при изменении состояния одного объекта все зависящие от него объекты уведомлялись и обновлялись.
   • Strategy: Определяет семейство алгоритмов, инкапсулирует их и делает их взаимозаменяемыми, позволяя изменять алгоритмы независимо от клиентов, использующих эти алгоритмы.
   • Command: Превращает запросы или простые операции в объекты, позволяя передавать их как аргументы, сохранять их историю, отменять и повторять.
   • Interpreter: Предоставляет способ оценивать языковые элементы на основе заданной грамматики.

Эти категории и паттерны предоставляют разнообразные инструменты и решения для создания гибких, расширяемых и управляемых кодовых структур. Выбор и применение конкретных паттернов зависит от сценариев и требований вашего проекта.

3) Поведенческие паттерны проектирования

Вот несколько примеров поведенческих паттернов:

1. Observer (Наблюдатель): Этот паттерн определяет зависимость "один-ко-многим" между объектами. Когда один объект изменяется, все зависящие от него объекты автоматически уведомляются и обновляются. Примеры использования: реализация обработчиков событий, наблюдение за изменениями модели данных в MVC архитектуре.

2. Strategy (Стратегия): Паттерн Strategy определяет семейство алгоритмов, инкапсулирует их и делает их взаимозаменяемыми. Клиентский код может выбирать алгоритм во время выполнения. Примеры использования: выбор различных алгоритмов сортировки, реализация различных способов оплаты в системе онлайн-магазина.

3. Command (Команда): Этот паттерн преобразует запросы или простые операции в объекты. Команды позволяют передавать запросы как аргументы, хранить их историю, а также поддерживать отмену и повторение операций. Примеры использования: реализация истории команд в текстовом редакторе, обработка пользовательских действий в GUI.

4. Interpreter (Интерпретатор): Паттерн Interpreter используется для разбиения проблемы на множество мелких компонентов, представляющих различные правила и условия. Эти компоненты могут быть интерпретированы для выполнения задачи. Примеры использования: реализация языковых интерпретаторов, обработка и анализ текстовых данных.

5. Chain of Responsibility (Цепочка обязанностей): Этот паттерн создает цепочку объектов-обработчиков, где каждый объект в цепочке пытается обработать запрос, а если не может, передает запрос дальше по цепи. Примеры использования: обработка запросов веб-сервером, фильтры для обработки данных.

6. Template Method (Шаблонный метод): Паттерн Template Method определяет скелет алгоритма в базовом классе, но делегирует реализацию некоторых шагов подклассам. Это позволяет подклассам изменять отдельные шаги алгоритма без изменения его структуры. Примеры использования: реализация алгоритмов в различных типах отчетов.

7. Visitor (Посетитель): Этот паттерн позволяет добавлять новые операции в структуру объектов, не изменяя сами объекты. Он определяет интерфейс посетителя, который может быть использован для выполнения операций над различными элементами структуры. Примеры использования: обход дерева элементов, применение операций к элементам.

4) MVC (необзязательно)

MVC (Model-View-Controller) - это архитектурный паттерн проектирования, который используется для разделения компонентов пользовательского интерфейса и логики приложения в отдельные слои. Это позволяет легче управлять кодом, повышает его читаемость, поддерживаемость и расширяемость.

В архитектуре MVC различные компоненты выполняют следующие роли:

1. Модель (Model): Модель представляет собой структуру данных и бизнес-логику приложения. Это место, где происходит обработка данных, хранение состояния и выполнение операций. Модель не зависит от представления и контроллера и может уведомлять представление о любых изменениях.

2. Представление (View): Представление отвечает за отображение данных пользователю. Это может быть графическим интерфейсом, веб-страницей или другим способом визуализации информации. Представление получает данные от модели и может передавать пользовательские действия контроллеру.

3. Контроллер (Controller): Контроллер обрабатывает пользовательские действия и управляет взаимодействием между моделью и представлением. Он принимает входные данные от представления, обрабатывает их с помощью модели и обновляет представление с новыми данными.

24. Промежуточное знание моделей и наилучших практик

1) SOLID принципы

SOLID - это аббревиатура, которая представляет собой набор пяти основных принципов объектно-ориентированного программирования и проектирования. Эти принципы помогают создавать более гибкий, расширяемый и поддерживаемый код. Вот описание каждого принципа SOLID:

1. Принцип единственной ответственности (Single Responsibility Principle, SRP): Каждый класс должен иметь только одну причину для изменения. Это означает, что класс должен иметь только одну ответственность и заниматься только одним аспектом функциональности. Это облегчает понимание и изменение кода, а также улучшает его поддержку.

2. Принцип открытости/закрытости (Open/Closed Principle, OCP): Программные сущности, такие как классы, модули и функции, должны быть открытыми для расширения, но закрытыми для изменения. Это означает, что вы должны разрешать добавление новых функций или изменение поведения через расширение, но не изменение существующего кода.

3. Принцип подстановки Барбары Лисков (Liskov Substitution Principle, LSP): Объекты должны быть заменяемыми на их подтипы без изменения правильности программы. Это означает, что подклассы должны сохранять свойства и поведение базового класса, чтобы можно было безопасно использовать их вместо него.

4. Принцип разделения интерфейса (Interface Segregation Principle, ISP): Клиенты не должны зависеть от интерфейсов, которые им не нужны. Интерфейсы следует разбивать на более мелкие, чтобы классы могли реализовывать только те методы, которые им действительно нужны.

5. Принцип инверсии зависимостей (Dependency Inversion Principle, DIP): Высокоуровневые модули не должны зависеть от низкоуровневых модулей. Оба типа модулей должны зависеть от абстракций. Этот принцип также подразумевает, что абстракции не должны зависеть от деталей, а детали должны зависеть от абстракций.

25. Методологии разработки программного обеспечения (необязательно)

2) Agile

Agile (гибкий) - это методология разработки программного обеспечения, которая акцентирует на адаптивность, взаимодействие и быстрые итерации. Основная цель Agile состоит в том, чтобы создавать ценные продукты, уделяя внимание потребностям клиента и обеспечивая гибкость в реагировании на изменения.

Принципы Agile описаны в Agile Manifesto, который включает в себя следующие ценности:

1. Люди и взаимодействие важнее процессов и инструментов: Agile подчеркивает значимость командной работы, открытого общения и сотрудничества с заказчиками и пользователями.

2. Работающий продукт важнее исчерпывающей документации: Agile ставит акцент на доставку рабочего продукта и непрерывное тестирование, вместо уделения слишком большого внимания формальной документации.

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

4. Готовность к изменениям важнее следования первоначальному плану: Agile уделяет приоритет гибкости и способности быстро адаптироваться к изменениям требований или ситуаций.

В рамках Agile используются различные методы и практики, такие как Scrum, Kanban, Extreme Programming (XP) и другие, чтобы обеспечить эффективное управление проектами, непрерывную интеграцию и обратную связь.

Преимущества Agile:

• Адаптивность: Agile позволяет быстро реагировать на изменения и вносить корректировки в процессе разработки.
• Вовлеченность заказчика: Заказчик активно участвует в разработке и может видеть результаты на ранних этапах.
• Улучшенное качество: Частые итерации и непрерывное тестирование помогают выявлять и устранять ошибки раньше.
• Гибкость в планировании: Возможность изменять приоритеты и планы в зависимости от актуальных потребностей.

3) Scrum / Kanban / Waterfall

1. Scrum: Scrum - это гибкая методология управления проектами, ориентированная на доставку ценных продуктов в короткие итерации, называемые спринтами. Основные характеристики Scrum:

   • Проект разбивается на короткие итерации (спринты) продолжительностью от 1 до 4 недель.
   • Каждый спринт начинается с планирования, включает в себя разработку, тестирование и завершается демонстрацией результата.
   • Команда самоорганизуется и принимает решения о том, как достичь целей спринта.
   • Стейкхолдеры (заказчики, пользователи) активно участвуют в процессе и имеют возможность вносить изменения в требования.

2. Kanban: Kanban - это методология управления проектами, ориентированная на визуализацию и оптимизацию процессов работы. Основные характеристики Kanban:

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

3. Waterfall (Каскадная модель): Waterfall - это традиционная методология разработки, где проект разбивается на последовательные фазы, каждая из которых зависит от завершения предыдущей. Основные характеристики Waterfall:

   • Проект проходит через строго определенные этапы: определение требований, проектирование, реализация, тестирование, развертывание и поддержка.
   • Каждая фаза завершается перед началом следующей.
   • Изменения в требованиях после начала разработки могут быть сложными и дорогостоящими.

Сравнение:

• Scrum и Kanban являются гибкими методологиями, позволяющими более эффективно реагировать на изменения и вовлекать заказчиков. Они ориентированы на доставку ценности в более коротких циклах.
• Waterfall - это традиционная методология с жесткой последовательностью этапов и менее гибкой структурой.

Выбор методологии зависит от потребностей проекта, степени неопределенности требований, командных ресурсов и других факторов.

4) Estimation

Оценка (Estimation) - это процесс определения ожидаемой длительности, объема работы, стоимости или ресурсов, необходимых для завершения проекта, задачи или задания. Оценка играет важную роль в планировании и управлении проектами, так как позволяет предсказать, сколько времени и ресурсов потребуется для достижения поставленных целей.

В контексте разработки программного обеспечения оценка может включать в себя следующие аспекты:

1. Оценка объема работы: Определение, сколько задач или функциональных элементов должно быть реализовано. Это может включать в себя разбиение задач на более мелкие подзадачи, чтобы более точно оценить объем работы.

2. Оценка времени: Прогнозирование времени, необходимого для выполнения каждой задачи или этапа проекта. Время может быть выражено в часах, днях, неделях и так далее.

3. Оценка ресурсов: Определение необходимых людских и технических ресурсов для реализации проекта. Это может включать в себя количество разработчиков, дизайнеров, тестировщиков и других специалистов.

4. Оценка стоимости: Расчет ожидаемой стоимости проекта, включая затраты на зарплаты, инфраструктуру, программное обеспечение и другие ресурсы.

Оценка может быть проведена разными методами:

• Экспертные оценки: Опытные члены команды предоставляют свои оценки на основе своего опыта.
• Исторические данные: Анализ данных из предыдущих проектов для определения времени и ресурсов, требующихся для подобных задач.
• Аналогии: Оценка, основанная на сравнении с аналогичными проектами.
• Поинты сложности: Использование относительных оценок сложности, а не конкретных временных значений.

26. Тестирование (необязательно)

1) Типы тестирования

Вот некоторые из наиболее распространенных типов тестирования:

1. Модульное тестирование (Unit Testing): Тестирование отдельных компонентов или модулей программы для проверки их правильности работы. Обычно проводится разработчиками и может использовать специальные фреймворки, такие как JUnit (Java) или pytest (Python).

2. Интеграционное тестирование (Integration Testing): Проверка взаимодействия между различными модулями или компонентами, чтобы убедиться, что они взаимодействуют корректно и передают данные между собой.

3. Системное тестирование (System Testing): Полное тестирование всей системы в целом, чтобы удостовериться, что она соответствует требованиям и работает в ожидаемых условиях.

4. Приемочное тестирование (Acceptance Testing): Проверка, соответствует ли разработанный продукт ожиданиям заказчика и пользователя. Может включать в себя функциональное тестирование, нагрузочное тестирование и другие типы.

5. Функциональное тестирование (Functional Testing): Проверка функциональности продукта с учетом его спецификаций и требований. Тестирование выполняется на уровне пользовательских сценариев.

6. Нагрузочное тестирование (Load Testing): Тестирование производительности и устойчивости системы при различных нагрузках, чтобы определить, как система будет работать в реальных условиях использования.

7. Стресс-тестирование (Stress Testing): Проверка поведения системы при экстремальных условиях и максимальных нагрузках. Цель - выявить слабые места и пределы системы.

8. Тестирование безопасности (Security Testing): Проверка системы на уязвимости и обеспечение защиты данных от несанкционированного доступа.

9. Тестирование совместимости (Compatibility Testing): Тестирование продукта на различных платформах, устройствах и браузерах, чтобы убедиться, что он работает корректно в разных средах.

10. Автоматизированное тестирование (Automated Testing): Использование автоматизированных инструментов для выполнения тестов, что позволяет повысить эффективность и скорость тестирования.

Это только небольшой набор типов тестирования. Выбор конкретных типов зависит от требований проекта, его характеристик и целей тестирования.

2) Интеграционное тестирование

Интеграционное тестирование (Integration Testing) - это тип тестирования в области разработки программного обеспечения, который направлен на проверку взаимодействия и корректной работы между различными компонентами, модулями или подсистемами системы в целом. Цель интеграционного тестирования - убедиться, что различные части программного продукта успешно интегрированы и взаимодействуют друг с другом так, как это предполагается.

Основные принципы интеграционного тестирования:

1. Обнаружение дефектов на границах компонентов: Интеграционное тестирование позволяет выявить проблемы, связанные с передачей данных и вызовом функций между различными компонентами. Это включает в себя проверку правильности передачи данных и обработки возвращаемых значений.

2. Проверка взаимодействия с внешними системами: Во многих системах необходимо взаимодействовать с внешними API, базами данных или другими системами. Интеграционное тестирование позволяет удостовериться, что эти взаимодействия происходят корректно.

3. Подтверждение совместимости интерфейсов: Интеграционное тестирование помогает обнаружить возможные несоответствия между интерфейсами компонентов, что может привести к ошибкам взаимодействия.

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

Виды интеграционного тестирования:

1. Вертикальное интеграционное тестирование (Vertical Integration Testing): Проверяет взаимодействие между разными уровнями системы, например, между пользовательским интерфейсом и бизнес-логикой.

2. Горизонтальное интеграционное тестирование (Horizontal Integration Testing): Тестирует взаимодействие между компонентами на одном уровне системы, например, между различными модулями или сервисами.

3) E2E

E2E (End-to-End) тестирование - это тип тестирования в области разработки программного обеспечения, который направлен на проверку и подтверждение работоспособности всей системы или приложения в реальных условиях использования. E2E тесты моделируют реальные сценарии взаимодействия пользователя с приложением, начиная с ввода данных пользователем и заканчивая получением ожидаемых результатов.

4) Тестирование безопасности

Тестирование безопасности (Security Testing) - это процесс проверки программного обеспечения на уязвимости и недостатки, которые могут привести к нарушению конфиденциальности, целостности и доступности данных, а также к возможности несанкционированного доступа или атак. Основная цель тестирования безопасности - обнаружить и устранить уязвимости, чтобы защитить приложение от потенциальных угроз.

Виды тестирования безопасности:

1. Тестирование на внедрение (Penetration Testing): Этот вид тестирования включает в себя активные попытки взлома системы или приложения с целью выявления уязвимостей. Тестеры используют техники, аналогичные тем, которые могут использовать злоумышленники (хакеры), чтобы обнаружить и устранить уязвимости.

2. Анализ уязвимостей (Vulnerability Assessment): Тестирование, направленное на идентификацию известных уязвимостей в системе. Включает в себя сканирование, анализ конфигурации и проверку на наличие известных уязвимостей.

3. Тестирование аутентификации и авторизации: Проверка, насколько безопасно реализованы механизмы аутентификации (подтверждение личности пользователя) и авторизации (предоставление доступа к определенным ресурсам).

4. Тестирование инфраструктуры: Оценка безопасности сетевой инфраструктуры, серверов, баз данных и других компонентов системы.

5. Тестирование веб-приложений: Проверка веб-приложений на уязвимости, такие как инъекции, кросс-сайтовый скриптинг, межсайтовая подделка запроса (CSRF) и другие.

6. Тестирование на отказ в обслуживании (DoS Testing): Проверка на устойчивость системы к атакам на отказ в обслуживании, при которых злоумышленник пытается перегрузить систему, чтобы она стала недоступной для пользователей.

7. Анализ кода (Static Code Analysis): Исследование и анализ исходного кода программы на предмет наличия потенциальных уязвимостей и проблем безопасности.

5) Тестирование производительности

Тестирование производительности (Performance Testing) - это процесс оценки и проверки производительности программного обеспечения с целью выявления его скорости, масштабируемости, надежности и эффективности в условиях различных нагрузок и сценариев использования. Этот тип тестирования позволяет оценить, как хорошо приложение работает в реальных условиях и как оно будет вести себя при различных объемах данных и нагрузок.

Основные виды тестирования производительности:

1. Тестирование нагрузки (Load Testing): Проверка поведения приложения при различных нагрузках, близких к максимально возможным. Тестирование нагрузки позволяет определить, как приложение реагирует на высокие объемы запросов и как быстро оно может обрабатывать большое количество пользователей.

2. Тестирование стресса (Stress Testing): Тестирование при граничных и экстремальных нагрузках, превышающих нормальные условия использования. Это позволяет определить, какие узкие места и слабые стороны есть в системе.

3. Тестирование производительности в реальном времени (Real-Time Performance Testing): Проверка того, насколько приложение способно обрабатывать запросы в реальном времени и в заданное окно времени.

4. Тестирование масштабируемости (Scalability Testing): Оценка возможности приложения масштабироваться горизонтально (путем добавления новых серверов) или вертикально (путем улучшения ресурсов существующих серверов).

5. Тестирование стабильности (Stability Testing): Проверка долгосрочной стабильности и надежности работы приложения при продолжительных нагрузках.

6. Тестирование производительности баз данных (Database Performance Testing): Оценка производительности баз данных и их способности эффективно обрабатывать запросы при различных объемах данных.

Процесс тестирования производительности включает в себя:

• Определение целей и критериев успеха.
• Разработку сценариев тестирования, которые моделируют реальные условия использования.
• Запуск тестов с различными объемами нагрузки и наблюдение за метриками производительности.
• Анализ результатов и выявление узких мест.
• Оптимизацию и улучшение производительности на основе результатов тестирования.

5) Тестовая пирамида

Пирамида тестирования, также часто говорят уровни тестирования, это группировка тестов по уровню детализации и их назначению. Эту абстракцию придумал Майк Кон и описал в книге «Scrum: гибкая разработка ПО» (Succeeding With Agile. Software Development Using Scrum). Пирамиду разбивают на 4 уровня (снизу вверх), например, по ISTQB (см. wiki):

1. модульное тестирование (юнит);
2. интеграционное тестирование;
3. системное тестирования;
4. приемочное тестирование.

6) Подходы к тестированию (необязательно)

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

1. Водопадный подход (Waterfall): В этом подходе разработка и тестирование проводятся последовательно, в линейном порядке. Каждый этап (анализ, проектирование, разработка, тестирование и т.д.) завершается перед переходом к следующему. Этот подход подходит для проектов с четкими и стабильными требованиями.

2. Гибкий подход (Agile): Методологии Agile, такие как Scrum и Kanban, предлагают более гибкую и итеративную модель разработки и тестирования. Работа организуется в короткие итерации, называемые спринтами, на протяжении которых выполняются разработка, тестирование и другие этапы.

3. Тестирование на основе моделей (Model-Based Testing): Этот подход основан на создании моделей системы, которые затем используются для автоматизированной генерации тестовых случаев и выполнения тестирования.

4. Тестирование на основе спецификаций (Specification-Based Testing): В этом подходе тестовые случаи разрабатываются на основе формальных спецификаций требований и функциональности продукта.

5. Тестирование на основе использования (Use Case-Based Testing): Тестовые случаи создаются на основе реальных сценариев использования продукта, которые предполагаются пользователями.

6. Тестирование на основе компонентов (Component-Based Testing): Тестирование проводится на уровне отдельных компонентов или модулей, чтобы проверить их работоспособность независимо от других компонентов.

7. Тестирование на основе архитектуры (Architecture-Based Testing): Тестирование проводится с учетом архитектурных характеристик системы, таких как распределение компонентов, взаимодействие и т.д.

8. Тестирование на основе рисков (Risk-Based Testing): Подход основан на анализе рисков и приоритета тестирования на основе вероятности возникновения проблем и их воздействия на продукт.

9. Комбинированный подход (Hybrid Approach): В этом случае используется комбинация различных подходов и методологий в зависимости от характеристик проекта и его требований.

7) FIRST

"FIRST" - это аббревиатура, используемая для определения характеристик хороших юнит-тестов. Концепция FIRST помогает ориентироваться на основные принципы и характеристики, которые должны быть присущи качественным и эффективным юнит-тестам.

Акроним "FIRST" расшифровывается следующим образом:

1. Fast (Быстро): Юнит-тесты должны быть быстрыми в выполнении. Они не должны занимать слишком много времени, чтобы разработчики могли запускать их часто, даже в процессе активной разработки.

2. Isolated (Изолировано): Каждый юнит-тест должен быть полностью изолирован от других тестов и внешних зависимостей. Тесты не должны зависеть от порядка выполнения или состояния других тестов.

3. Repeatable (Повторяемо): Тесты должны давать одинаковые результаты при каждом их выполнении. Это позволяет обнаруживать и воспроизводить дефекты и проблемы.

4. Self-Validating (Самопроверяемо): Результаты теста должны быть самопроверяемыми. Разработчик может легко понять, прошел ли тест, просто посмотрев на его результаты.

5. Timely (Своевременно): Юнит-тесты должны быть написаны как можно раньше в процессе разработки, желательно перед написанием реализации кода. Это позволяет выявлять и исправлять проблемы на ранних этапах.

Соблюдение принципов "FIRST" способствует созданию хороших, надежных и легко поддерживаемых юнит-тестов, которые помогают обеспечить высокое качество программного обеспечения и быстрое выявление дефектов.

8) TDD и BDD

TDD (Test-Driven Development) и BDD (Behavior-Driven Development) - это два методологических подхода к разработке программного обеспечения, которые акцентируют внимание на тестировании и описание поведения системы. Оба подхода способствуют улучшению качества кода и обеспечению соответствия требованиям.

TDD (Test-Driven Development):

TDD - это методология разработки, в которой разработчик сначала пишет тесты для функциональности, которую он планирует реализовать, и только затем начинает разрабатывать сам код, чтобы сделать тесты успешными. Процесс TDD обычно включает в себя следующие шаги:

1. Написание теста (Red): Начинается с написания теста для новой функциональности или изменения существующей. Этот тест, как правило, не проходит и выдает ошибку (красный цвет).

2. Реализация кода (Green): Разработчик создает минимальное количество кода, необходимого для того, чтобы сделать тест успешным (пройти тест). Цель - получить "зеленый" результат.

3. Рефакторинг (Refactor): После успешного прохождения теста проводится рефакторинг кода, чтобы улучшить его структуру, читаемость и поддерживаемость.

Преимущества TDD:

• Улучшение качества кода.
• Раннее выявление дефектов.
• Более уверенные изменения и рефакторинг.
• Спецификации и документация в виде тестов.

BDD (Behavior-Driven Development):

BDD - это методология разработки, которая расширяет концепции TDD, фокусируясь на описании ожидаемого поведения системы через спецификации на естественном языке. Спецификации описывают желаемое поведение в форме "Как [роль] я хочу [действие], чтобы [результат]".

Процесс BDD включает в себя следующие этапы:

1. Определение спецификаций: Описание желаемого поведения системы в терминах сценариев на естественном языке.

2. Перевод спецификаций в тесты: Создание автоматизированных тестов, которые проверяют соответствие реализации ожидаемому поведению.

3. Реализация кода и тестирование: Разработка функциональности с учетом спецификаций и запуск тестов для проверки.

Преимущества BDD:

• Более понятная документация и коммуникация между разработчиками и другими участниками проекта.
• Сфокусированность на поведении и функциональности.
• Поддерживает общее понимание требований.

И TDD, и BDD способствуют улучшению качества кода, предотвращению дефектов и созданию лучшей документации. Выбор между этими подходами зависит от потребностей проекта и команды разработчиков.

9) Frameworks (необязательно)

Фреймворки (frameworks) - это наборы стандартных инструментов, библиотек и правил, предназначенные для упрощения и ускорения разработки программного обеспечения. Фреймворки предоставляют разработчикам готовую инфраструктуру и архитектурные шаблоны для создания приложений определенного типа или решения определенных задач. Они помогают структурировать проект, обеспечивают повторное использование кода и предоставляют решения для типичных проблем.

Вот несколько примеров популярных фреймворков в различных областях:

1. Фронтенд-разработка:

   • React: Библиотека для создания пользовательских интерфейсов на языке JavaScript.
   • Angular: Фреймворк для разработки динамических веб-приложений на языке TypeScript.
   • Vue.js: Прогрессивный фреймворк для создания интерфейсов на языке JavaScript.

2. Тестирование:

   • JUnit: Фреймворк для юнит-тестирования на языке Java.
   • Pytest: Фреймворк для тестирования на языке Python.

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

27. Протоколы веб-связи: (необязательно)

1) HTTP vs HTTPS

HTTP (Hypertext Transfer Protocol) и HTTPS (Hypertext Transfer Protocol Secure) - это два протокола, используемых для передачи данных между веб-серверами и веб-браузерами. Однако между ними есть существенные различия, основанные на безопасности и шифровании.

HTTP (Hypertext Transfer Protocol):

• HTTP - это стандартный протокол передачи данных в сети Интернет.
• Данные, передаваемые по протоколу HTTP, отправляются в открытом текстовом формате, что делает их уязвимыми для перехвата и чтения третьими лицами.
• Не обеспечивает никакой защиты данных и никакого шифрования.

HTTPS (Hypertext Transfer Protocol Secure):

• HTTPS - это защищенный версия протокола HTTP, обеспечивающий шифрование данных между клиентом (браузером) и сервером.
• Для обеспечения безопасности, HTTPS использует SSL (Secure Sockets Layer) или его более современную версию TLS (Transport Layer Security) для шифрования данных.
• Передача данных через HTTPS делает их намного более защищенными от перехвата и несанкционированного доступа.

Сравнение HTTP и HTTPS:

1. Безопасность:

   • HTTP: Не обеспечивает безопасность, данные передаются в открытом виде.
   • HTTPS: Обеспечивает безопасность путем шифрования данных между клиентом и сервером.

2. Шифрование:

   • HTTP: Не предоставляет шифрования.
   • HTTPS: Предоставляет шифрование данных, что обеспечивает конфиденциальность.

3. Идентификация сервера:

   • HTTP: Не предоставляет никакой гарантии относительно идентификации сервера.
   • HTTPS: Использует SSL/TLS сертификаты для подтверждения подлинности и идентификации сервера.

4. Индексация поисковиками:

   • HTTP: Сайты могут быть индексированы поисковыми системами.
   • HTTPS: Также позволяет индексирование, но считается предпочтительным поисковыми системами для обеспечения безопасности пользователей.

В последние годы HTTPS стал стандартом для большинства веб-сайтов, особенно тех, где важна безопасность передаваемых данных, таких как финансовые и личные информационные ресурсы. Использование HTTPS важно для защиты конфиденциальности пользователей и обеспечения безопасного взаимодействия с веб-сайтами.

2) HTTP 1.x, 2.x, 3.x

HTTP (Hypertext Transfer Protocol) - это протокол, используемый для передачи данных между веб-серверами и веб-браузерами. С течением времени происходили изменения и обновления в версиях HTTP для улучшения производительности, эффективности и безопасности. Вот краткий обзор версий HTTP: HTTP 1.x, HTTP/2 и HTTP/3.

HTTP 1.x:

• HTTP 1.0 был представлен в начале 1990-х.
• HTTP 1.1 был представлен в конце 1990-х и стал наиболее широко используемой версией HTTP.
• HTTP 1.1 поддерживает структуру запрос-ответ и позволяет использовать методы запросов, такие как GET, POST, PUT, DELETE и другие.
• Недостатки HTTP 1.1 включают множество запросов для загрузки веб-страниц, блокирование, неэффективное использование соединений и т.д.

HTTP/2 (HTTP 2.0):

• HTTP/2 был выпущен в 2015 году как следующее поколение HTTP после HTTP 1.x.
• HTTP/2 введен для решения проблем, связанных с производительностью, минимизации задержек и улучшением производительности множественных запросов.
• Основное нововведение - множественные потоки данных в одном соединении, а также сжатие заголовков и другие оптимизации.
• HTTP/2 также поддерживает приоритизацию запросов, чтобы браузер мог эффективно управлять загрузкой ресурсов.

HTTP/3:

• HTTP/3 - это последняя версия HTTP, которая находится на стадии разработки и экспериментов (на момент моего последнего обновления в сентябре 2021 года).
• Основное изменение - использование протокола QUIC (Quick UDP Internet Connections) вместо TCP для более быстрой и надежной передачи данных.
• HTTP/3 стремится улучшить производительность, снизить задержки и улучшить безопасность.
• QUIC позволяет объединить соединение и шифрование, что снижает задержки и упрощает управление соединениями.

Эти обновления в версиях HTTP нацелены на улучшение производительности и безопасности веб-серфинга. Процесс внедрения новых версий HTTP может занять время, так как требуется обновление серверов, браузеров и других программных компонентов.

3) HTTP methods, headers, responses, body

Протокол HTTP (Hypertext Transfer Protocol) используется для передачи данных между клиентом (например, веб-браузером) и сервером. Он определяет различные методы (HTTP methods), заголовки (HTTP headers), ответы (HTTP responses) и тело (HTTP body) для обмена информацией. Вот обзор каждого из этих компонентов:

HTTP Methods (Методы HTTP): Методы HTTP определяют тип запроса, который клиент отправляет на сервер. Некоторые из наиболее распространенных методов HTTP включают:

• GET: Получение ресурса с сервера.
• POST: Отправка данных на сервер для обработки.
• PUT: Замена ресурса на сервере данными, отправленными клиентом.
• DELETE: Удаление ресурса на сервере.
• PATCH: Частичное обновление ресурса на сервере.
• HEAD: Получение заголовков ресурса без его фактического содержимого.

HTTP Headers (Заголовки HTTP): Заголовки HTTP - это метаданные, которые передаются вместе с запросами и ответами HTTP. Они содержат дополнительную информацию о запросе или ответе. Некоторые распространенные заголовки HTTP включают:

• User-Agent: Идентификация клиента (например, браузера или приложения) для сервера.
• Content-Type: Тип данных, отправляемых в теле запроса или ответа (например, JSON или HTML).
• Authorization: Информация для аутентификации пользователя, например, токен доступа.
• Accept: Типы данных, которые клиент готов принять от сервера.
• Cache-Control: Указание, как клиент и сервер должны обрабатывать кэширование.

HTTP Responses (Ответы HTTP): Ответы HTTP - это данные, которые сервер отправляет клиенту в ответ на запрос. Каждый ответ содержит статус-код (HTTP status code), который указывает на результат выполнения запроса. Некоторые статус-коды HTTP:

• 200 OK: Запрос успешно выполнен.
• 201 Created: Ресурс успешно создан на сервере.
• 400 Bad Request: Неверный запрос от клиента.
• 401 Unauthorized: Необходима аутентификация для доступа к ресурсу.
• 404 Not Found: Ресурс не найден на сервере.
• 500 Internal Server Error: Внутренняя ошибка сервера.

HTTP Body (Тело HTTP): Тело HTTP содержит фактические данные, передаваемые в запросе или ответе. Например, при использовании метода POST, данные могут быть отправлены в теле запроса, а при получении ответа от сервера, данные могут быть содержимым тела ответа.

4) HTTP status codes groups (1xx, 2xx, 3xx, 4xx, 5xx)

Коды состояния HTTP (HTTP status codes) - это числовые значения, которые сервер отправляет клиенту в ответ на запрос, чтобы указать результат выполнения операции. Коды состояния разделены на пять групп, каждая из которых представляет определенную категорию результатов. Вот обзор групп кодов состояния HTTP:

1. 1xx (Informational - Информационные):

   • 100 Continue: Сервер продолжит обработку запроса клиента.
   • 101 Switching Protocols: Сервер согласен изменить протокол для запроса.

2. 2xx (Successful - Успешные):

   • 200 OK: Запрос успешно выполнен.
   • 201 Created: Ресурс успешно создан на сервере.
   • 204 No Content: Запрос выполнен успешно, но ответ не содержит контента.

3. 3xx (Redirection - Перенаправления):

   • 300 Multiple Choices: Имеется несколько возможных ресурсов для выбора.
   • 301 Moved Permanently: Ресурс перемещен по новому адресу навсегда.
   • 302 Found (или 303 See Other): Ресурс временно перемещен по новому адресу.
   • 304 Not Modified: Ресурс не изменился, используется кэшированный контент.
   • 307 Temporary Redirect: Ресурс временно перемещен по новому адресу (сохраняется метод запроса).

4. 4xx (Client Error - Ошибки клиента):

   • 400 Bad Request: Неверный запрос от клиента.
   • 401 Unauthorized: Требуется аутентификация для доступа к ресурсу.
   • 403 Forbidden: Доступ к ресурсу запрещен.
   • 404 Not Found: Ресурс не найден на сервере.
   • 405 Method Not Allowed: Метод не поддерживается для данного ресурса.
   • 429 Too Many Requests: Превышено количество запросов за определенный период времени.

5. 5xx (Server Error - Ошибки сервера):

   • 500 Internal Server Error: Внутренняя ошибка сервера.
   • 501 Not Implemented: Метод запроса не поддерживается сервером.
   • 502 Bad Gateway: Сервер, выступающий в роли шлюза или прокси, получил некорректный ответ от внешнего сервера.
   • 503 Service Unavailable: Сервис временно недоступен (например, из-за перегрузки или обслуживания).
   • 504 Gateway Timeout: Внешний сервер не ответил в заданный интервал времени.
   • 505 HTTP Version Not Supported: Версия HTTP не поддерживается сервером.

Коды состояния HTTP помогают клиентам и разработчикам понять, как завершился запрос, и предоставляют информацию о результате операции.

5) RESTful API

RESTful API (Representational State Transfer) - это стиль архитектуры для создания веб-сервисов, который обеспечивает взаимодействие между клиентами и серверами с использованием стандартных HTTP методов. Он строится вокруг нескольких ключевых принципов, которые позволяют разрабатывать легко понимаемые, масштабируемые и гибкие API.

Основные принципы RESTful API:

1. Ресурсы (Resources): В RESTful API данные представляются в виде ресурсов, которые могут быть извлечены, созданы, изменены или удалены с использованием стандартных HTTP методов. Ресурсы могут быть представлены в виде URL-адресов.

2. HTTP Методы (HTTP Methods): RESTful API использует стандартные HTTP методы для выполнения операций над ресурсами. Например, GET для получения данных, POST для создания ресурсов, PUT для обновления ресурсов и DELETE для удаления ресурсов.

3. Представление (Representation): Ресурсы могут иметь разные представления, такие как JSON, XML или HTML. Клиенты могут запросить представление в нужном формате с использованием заголовков Accept.

4. Состояние (Stateless): Каждый запрос от клиента к серверу должен содержать всю необходимую информацию для выполнения операции. Сервер не должен хранить состояние клиента между запросами.

5. Кеширование (Caching): RESTful API поддерживает кеширование, что позволяет клиентам кэшировать данные для улучшения производительности.

6. Слои (Layered System): Клиенты могут взаимодействовать с промежуточными серверами, которые могут обеспечивать дополнительные функции, такие как балансировка нагрузки, аутентификация и кеширование.

7. Унифицированный интерфейс (Uniform Interface): RESTful API использует унифицированный интерфейс для взаимодействия между клиентами и серверами, что упрощает понимание и использование API.

28. Общие знания в области веб-безопасности (необязательно)

1) Базовое понимание наиболее распространенных терминов безопасности (CARS, XSS) (не обязательно)

Конечно, вот краткое объяснение двух распространенных терминов безопасности:

1. CORS (Cross-Origin Resource Sharing): CORS - это механизм, который позволяет веб-приложениям отправлять HTTP-запросы на другой домен (origin), чем тот, с которого был загружен источник JavaScript. Браузеры применяют политику безопасности, известную как Same-Origin Policy, которая обычно запрещает такие запросы из-за потенциальных уязвимостей кросс-сайтовых атак. CORS позволяет серверам явно разрешать определенные источники выполнить запросы к своим ресурсам, что обеспечивает более гибкое и безопасное взаимодействие между доменами.

2. XSS (Cross-Site Scripting): XSS - это тип атаки на веб-приложения, при которой злоумышленник внедряет вредоносный скрипт в веб-страницу, который потом выполняется на стороне клиента, когда пользователь просматривает страницу. Это может позволить злоумышленнику получить доступ к личным данным пользователя, перехватить сессию, изменить содержимое страницы и т.д. Защита от XSS включает валидацию входных данных, фильтрацию и эскейпинг специальных символов, а также использование Content Security Policy (CSP), чтобы ограничить допустимые источники выполнения скриптов.

2) XSS

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

Виды XSS:

1. Stored (Persistent) XSS: Злоумышленник внедряет вредоносный код на сервере, который затем сохраняется и выполняется на стороне клиента при каждом просмотре страницы. Это может повлиять на всех пользователей, которые видят эту страницу.

2. Reflected (Non-Persistent) XSS: Злоумышленник внедряет вредоносный код в URL-адрес или форму, который затем передается на сервер. Сервер затем возвращает вредоносный код в ответе, который выполняется на стороне клиента.

3. DOM-based XSS: Злоумышленник внедряет вредоносный код, который выполняется на стороне клиента непосредственно в браузере, изменяя структуру DOM-дерева. Эта форма XSS не всегда взаимодействует с сервером.

3) CORS

CORS (Cross-Origin Resource Sharing) - это стандарт, который позволяет веб-страницам запросить ресурсы с другого домена (origin) (например, домена A), чем тот, с которого была загружена страница (например, домена B). Без CORS браузеры обычно применяют политику same-origin policy, которая запрещает такие запросы из соображений безопасности.

CORS позволяет серверам явно разрешать или запрещать доступ к своим ресурсам через HTTP-заголовки. Это позволяет разработчикам создавать более гибкие и мощные веб-приложения, которые могут взаимодействовать с ресурсами на разных доменах.

Основные понятия в CORS:

1. Origin: Origin представляет собой комбинацию протокола (http, https), домена и порта. Например, "http://example.com" и "https://api.example.com" - это разные origin.

2. Запрос и ответ CORS:

   • Запрос CORS: Браузер добавляет специальные заголовки (например, Origin) в запросы на другие origin.
   • Ответ CORS: Сервер добавляет заголовки Access-Control-Allow-Origin (разрешенные источники), Access-Control-Allow-Methods (разрешенные методы) и другие в ответы.

3. Заголовки CORS:

   • Origin: Заголовок, отправляемый браузером, указывающий на origin источника запроса.
   • Access-Control-Allow-Origin: Заголовок, указывающий, какие origin имеют разрешение доступа к ресурсу (или "*" для разрешения всех).
   • Access-Control-Allow-Methods: Заголовок, указывающий, какие HTTP-методы разрешены для доступа к ресурсу.
   • Access-Control-Allow-Headers: Заголовок, указывающий, какие HTTP-заголовки разрешены в запросе.
   • Access-Control-Allow-Credentials: Заголовок, разрешающий отправку учетных данных (cookies, HTTP authentication) в запросах.
   • Access-Control-Expose-Headers: Заголовок, указывающий, какие HTTP-заголовки могут быть доступны для клиента.

4) OWASP Top 10

WASP Top 10 - это список десяти наиболее критических веб-уязвимостей, который был разработан и поддерживается Фондом безопасности веб-приложений (Web Application Security Project - OWASP). Этот список обновляется периодически для отражения изменяющейся угрозной ландшафта в области веб-безопасности. Вот список OWASP Top 10 на момент моего последнего обновления (сентябрь 2021 года):

1. Injection (Инъекции): Атаки инъекций происходят, когда вредоносные данные (например, SQL-запросы, команды операционной системы) внедряются в веб-приложение и могут исполняться в контексте приложения.

2. Broken Authentication (Нарушение аутентификации): Уязвимости в аутентификации и управлении сессиями могут позволить злоумышленникам получить доступ к учетным данным пользователей.

3. Sensitive Data Exposure (Раскрытие чувствительных данных): Если приложение недостаточно защищает чувствительные данные, такие как пароли или кредитные карты, злоумышленник может получить доступ к этим данным.

4. XML External Entity (XXE) (Внешние сущности XML): Эта уязвимость позволяет злоумышленнику выполнить атаки на обработку XML-документов, что может привести к раскрытию данных, атакам на сервер или даже отказу в обслуживании.

5. Broken Access Control (Нарушение контроля доступа): Плохо настроенный контроль доступа может позволить злоумышленникам получить доступ к ресурсам или функциональности, к которым у них не должно быть доступа.

6. Security Misconfiguration (Неправильная конфигурация безопасности): Неправильная конфигурация серверов, баз данных и других компонентов может создать уязвимости, которые могут быть использованы злоумышленниками.

7. Cross-Site Scripting (XSS) (Межсайтовое выполнение скриптов): Уязвимость XSS позволяет злоумышленникам внедрять вредоносные скрипты в веб-страницы, которые будут выполняться на стороне клиента.

8. Insecure Deserialization (Небезопасная десериализация): Небезопасная десериализация данных может позволить злоумышленнику выполнять код на сервере, что может привести к атакам.

9. Using Components with Known Vulnerabilities (Использование компонентов с известными уязвимостями): Если используются устаревшие или имеющие известные уязвимости компоненты, злоумышленник может использовать их для атаки.

10. Insufficient Logging & Monitoring (Недостаточное журналирование и мониторинг): Недостаточное журналирование и мониторинг может затруднить обнаружение и реагирование на атаки.

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

5) Auth (JWT, OAuth, Basic, etc.)

Аутентификация (Authentication) - это процесс проверки подлинности идентификационных данных пользователя, чтобы убедиться, что он имеет право доступа к определенным ресурсам или функциональности. Существует несколько методов аутентификации, включая:

1. Basic Authentication: Это простой метод аутентификации, при котором клиент отправляет свои учетные данные (логин и пароль) в заголовке запроса. Например:

   Authorization: Basic base64(username:password)
   

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

2. Bearer Token Authentication: В этом методе клиент получает токен доступа (Bearer Token) после успешной аутентификации, который затем включается в заголовок каждого запроса. Токены могут быть JSON Web Tokens (JWT) или другими форматами. Этот метод позволяет избежать отправки учетных данных при каждом запросе.

3. OAuth: OAuth - это протокол авторизации, который позволяет пользователям давать третьим лицам (например, приложениям) ограниченный доступ к своим ресурсам без предоставления им своих учетных данных. Он используется для делегирования доступа, например, при входе через аккаунт Google или Facebook.

4. JWT (JSON Web Token): JWT - это открытый стандарт (RFC 7519) для создания токенов, которые содержат утверждения о пользователе и его доступе. JWT можно использовать для аутентификации и передачи информации между различными компонентами системы.

5. SAML (Security Assertion Markup Language): SAML - это стандарт для обмена утверждениями о безопасности между веб-службами и учреждениями. Он используется для однократной аутентификации и однократной авторизации.

6. LDAP (Lightweight Directory Access Protocol): LDAP - это протокол доступа к каталогам, который используется для аутентификации и авторизации пользователей в корпоративных средах.

7. Two-Factor Authentication (2FA): 2FA - это метод, при котором пользователь должен предоставить две формы аутентификации (например, пароль и одноразовый код), чтобы получить доступ.

29. Задачи кодирования

1) Function.prototype.bind реализовать полифилл

Вот пример полифилла для метода Function.prototype.bind, который добавляет поддержку bind для старых браузеров, не имеющих этот метод:

Function.prototype.myBind = function (context, ...rest){ 
    return (...arg)=>{
        return this.apply(context, rest.concat(arg))
    }
}

Обратите внимание, что современные браузеры уже поддерживают метод bind, и этот полифилл нужен только для старых браузеров, которые его не поддерживают.

2) Object.create реализовать полифилл

Вот пример полифилла для метода Object.create, который добавляет поддержку Object.create для старых браузеров:

if (typeof Object.create !== 'function') {
  Object.create = function (proto, propertiesObject) {
    if (typeof proto !== 'object' && typeof proto !== 'function') {
      throw new TypeError('Object prototype may only be an Object or null');
    }
    
    function F() {}
    F.prototype = proto;
    
    var obj = new F();
    
    if (propertiesObject !== undefined) {
      Object.defineProperties(obj, propertiesObject);
    }
    
    return obj;
  };
}

Этот полифилл проверяет, есть ли метод Object.create у глобального объекта Object. Если он отсутствует, то он создает функцию create, которая принимает два аргумента: proto (прототип объекта, который нужно создать) и propertiesObject (дополнительные свойства для созданного объекта). Внутри функции создается временная функция F, прототип которой устанавливается на proto, затем создается объект с помощью этой временной функции. Если propertiesObject передан, то добавляются дополнительные свойства с помощью Object.defineProperties.

Пример использования полифилла:

var person = {
  greet: function () {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

var john = Object.create(person, {
  name: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  }
});

john.greet(); // Выведет: Hello, my name is John.

Как и в предыдущем примере, этот полифилл нужен только для старых браузеров, которые не поддерживают метод Object.create.

3) Array.flat реализовать полифилл

Вот пример полифилла для метода Array.prototype.flat, который добавляет поддержку flat для старых браузеров:

if (!Array.prototype.flat) {
  Array.prototype.flat = function (depth = 1) {
    return this.reduce((acc, val) => acc.concat(Array.isArray(val) && depth > 1 ? val.flat(depth - 1) : val), []);
  };
}

Этот полифилл проверяет, есть ли метод flat у объекта Array.prototype. Если он отсутствует, то он создает функцию flat, которая принимает один необязательный аргумент depth (глубина вложенности), по умолчанию равный 1. Внутри функции reduce используется для рекурсивного "разглаживания" массива на указанную глубину.

Пример использования полифилла:

var nestedArray = [1, 2, [3, 4, [5, 6]]];

var flatArray = nestedArray.flat(2);
console.log(flatArray); // Выведет: [1, 2, 3, 4, 5, 6]

Как и в предыдущих примерах, этот полифилл нужен только для старых браузеров, которые не поддерживают метод Array.prototype.flat.

4) Array.reduce реализовать полифилл

Вот пример полифилла для метода Array.prototype.reduce, который добавляет поддержку reduce для старых браузеров:

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function (callback, initialValue) {
    if (this === null || this === undefined) {
      throw new TypeError('Array.prototype.reduce called on null or undefined');
    }
    
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }
    
    var array = Object(this);
    var length = array.length >>> 0;
    var accumulator = initialValue !== undefined ? initialValue : array[0];
    
    for (var i = initialValue !== undefined ? 0 : 1; i < length; i++) {
      if (i in array) {
        accumulator = callback.call(undefined, accumulator, array[i], i, array);
      }
    }
    
    return accumulator;
  };
}

Этот полифилл проверяет, есть ли метод reduce у объекта Array.prototype. Если он отсутствует, то он создает функцию reduce, которая принимает два аргумента: callback (функция обратного вызова) и initialValue (начальное значение аккумулятора). Внутри функции происходит итерация по элементам массива с помощью цикла for, и функция обратного вызова callback вызывается для каждого элемента.

Пример использования полифилла:

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

var sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // Выведет: 15

Как и в предыдущих примерах, этот полифилл нужен только для старых браузеров, которые не поддерживают метод Array.prototype.reduce.

5) 'hello world'.repeating(3) -> 'hello world hello world hello world'. Как реализовать ?

String.prototype.repeating = function (count) {
  if (count < 1) {
    return '';
  }
  return Array(count).fill(this).join(' ');
};

var repeatedString = 'hello world'.repeating(3);
console.log(repeatedString); // Выведет: 'hello world hello world hello world'

6) myFunc('!', 4, -10, 34, 0) -> '4!-10!34!0`. Как реализовать ?

function myFunc(...args) {
  return args.map(num => num + '!').join('');
}

var result = myFunc('!', 4, -10, 34, 0);
console.log(result); // Выведет: '4!-10!34!0!'

7) five(plus(seven(minus(three())))) -> 9. Как реализовать ?

function number(value) {
  return function (operation) {
    if (operation) {
      return operation(value);
    }
    return value;
  };
}

function plus(x) {
  return function (y) {
    return y + x;
  };
}

function minus(x) {
  return function (y) {
    return y - x;
  };
}

var five = number(5);
var seven = number(7);
var three = number(3);

var result = five(plus(seven(minus(three()))));
console.log(result); // Выведет: 9

8) add(5)(9)(-4)(1) -> 11. Как реализовать ?

function add(x) {
  function inner(y) {
    if (y !== undefined) {
      x += y;
      return inner;
    } else {
      return x;
    }
  }
  
  return inner;
}

var result = add(5)(9)(-4)(1)();
console.log(result);

9) periodOutput(period) метод должен выводить в консоль один раз за каждый период, сколько времени прошло с момента первого вызова функции. Пример: periodOutput(100) -> 100(after 100 ms), 200(after 100 ms), 300(after 100 ms), ...

function periodOutput(period) {
  let counter = 0;
  
  function printTime() {
    console.log(counter + '(after ' + period + ' ms)');
    counter += period;
  }
  
  setInterval(printTime, period);
}

periodOutput(100);

10) extendedPeriodOutput(period) метод должен выводить в консоль один раз за период, сколько времени прошло с момента первого вызова функции, а затем увеличивать период. Пример: // extendedPeriodOutput(100) -> 100(after 100 ms), 200(after 200 ms), 300(after 300 ms)

function extendedPeriodOutput(period) {
  function outputAndSetTimeout(currentPeriod) {
    console.log(currentPeriod + '(after ' + currentPeriod + ' ms)');
    setTimeout(function() {
      outputAndSetTimeout(currentPeriod + period);
    }, currentPeriod);
  }
  outputAndSetTimeout(period);
}

extendedPeriodOutput(100);