Шпаргалка по JavaScript в 2021

• Объявление переменной;
• В чем разница между стрелочными функциями и обычными;
• Что такое обратные вызовы и замыкание;
• Что такое анонимная функция;
• Что такое функция высшего порядка;
• Что такое «strict» mode в JS;
• Promises vs Async / Await;
• Mutable vs Immutable в JS;
• Что такое типизированный язык;
• Что такое подъем или hoisting;
• Что такое делегирование событий в JS;
• В чем разница между call, apply & bind;
• В чем разница между host и native объектами;
• Что такое функция карри;
• Class;
• Статические методы;
• Truthy / Falsy;
• Анаморфизмы;
• Катаморфизмы;
• Что такое Event loop;
• Что такое Event propagation;
• В чем разница между файлами Сookie, Local Storage и Session Storage;
• Что такое Content Security Policy (CSP);
• Что такое Cross-Site Scripting (XSS);
• Что такое CORS (Cross-Origin Resource Sharing);

Объявление переменной: var, const, let

В JavaScript есть три ключевых слова для объявления переменной, и у каждого есть свои отличия. Это var, let и const.

Переменные, объявленные с ключевым словом const, нельзя переназначить, в то время как let и var можно.

Я рекомендую всегда объявлять переменные с помощью const по умолчанию, а let использовать, если нужно изменить её или переназначить позже.

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

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

В чем разница между стрелочными функциями и обычными

• значение this (context): в обычной функции значение this не имеет ничего общего с классом, для которого this было определено; вместо этого this зависит от объекта, к которому this было вызвано; внутри стрелочной функции this значение всегда равно значению this из внешней функции;
• конструкторы (constructors): обычные функции могут легко создавать объекты, в то время как стрелочная функция не может использоваться в качестве конструктора;
• объект аргументов (arguments): это специальный объект, подобный массиву, содержащий список аргументов, с которыми функция была вызвана. Внутри стрелочной функции объект аргументов получает доступ к аргументам из внешней функции;
• неявный возврат (Implicit return): обычные функции используют оператор выражения возврата (return), также известен как явный возврат (explicit return) - в противном случае функция просто вернет undefined, в то время как со стрелочными функциями, если они содержат одно выражение и фигурные скобки функции отсутствуют, тогда выражение возвращается неявно (implicit).

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

Что такое обратные вызовы и замыкание

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

Подробнее о callbacks здесь.

• замыкание (closures): создаются всякий раз, когда к переменной, определенной вне текущей области, осуществляется доступ из внутренней области - это дает нам доступ к области внешней функции из внутренней функции;
• чтобы использовать замыкание, просто определи функцию внутри другой функции;

Подробнее о замыкание здесь и здесь.

Что такое анонимная функция

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

Подробнее об анонимных функциях здесь.

Что такое функция высшего порядка

Функция высшего порядка - функция, которая получает функцию в качестве аргумента или возвращают функцию в качестве вывода. Например: Array.prototype.map, Array.prototype.filter и Array.prototype.reduce - это некоторые из функций высшего порядка, встроенных в язык.

Подробнее о функциях высшего порядка здесь и здесь.

Что такое «strict» mode в JS

Строгий режим (strict mode) обеспечивает более тщательную проверку ошибок в коде и упрощает отладку.

Чтобы включить строгий режим, нужно добавить "use strict" в начале файла.

Promises vs Async / Await

• область действия: в promise асинхронна только цепочка обещаний - она не блокирует выполнение; с async/await вся функция-оболочка является асинхронной;
• логика: в promise синхронная работа может обрабатываться одним и тем же обратным вызовом, а несколько обещаний могут обрабатываться с помощью Promise.all; с async/await синхронная работа должна быть размещена за пределами обратного вызова, а несколько обещаний могут обрабатываться с более простыми переменными;
• обработка ошибок: Promises: then, catch, finally; Async/await: try, catch, finally.

Подробнее о promise здесь. Подробнее о async/await здесь.

Mutable vs Immutable в JS

• Разница между неизменяемым и изменяемым типом данных: если тип является изменяемым, при изменении значения ссылочной переменной это также повлияет на значение исходной ссылочной переменной;
• Примитивные типы данных, такие как number, string и boolean, неизменяемы - невозможно изменить значения этих типов путем изменения ссылки - ты можешь комбинировать их и получать из них новые значения, но когда ты присваиваешь конкретное значение, это значение будет всегда оставаться прежним; ты можешь указать имя переменной на новое значение, но предыдущее значение по-прежнему сохраняется в памяти;
• Mutable - это тип, которую можно изменить по ссылке - в JS изменяемыми являются только objects и arrays. Ты можешь изменять их свойства. Например: заставляя одно значение объекта иметь разное содержимое в разное время.

Подробнее о mutable и immutable структуры данных здесь.

Что такое типизированный язык

Языки могут быть статическими или динамическими.

• статический: переменная может содержать только один тип, как в Java - переменная, объявленная как строка, может принимать только набор символов и ничего больше;
• динамический: переменная может содержать несколько типов - как в JS: переменная может принимать число, символы и т. д.

Что такое подъем или hoisting

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

Подробнее о hoisting здесь.

Что такое делегирование событий в JS

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

Подробнее о делегировании здесь.

В чем разница между call, apply & bind

• bind создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов один за другим, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове;
• call и apply очень похожи - они вызывают функцию с указанным контекстом this и необязательными аргументами;
• Единственная разница между call и apply заключается в том, что call требует, чтобы аргументы передавались один за другим, а apply принимает аргументы как массив.

Подробнее о call, apply & bind здесь.

В чем разница между host и native объектами

Объекты можно разделить на эти две основные категории в зависимости от среды и языка.

• объекты host: зависящие от среды - например браузер предоставляет определенные объекты, такие как window, node предоставляет NodeList и пр.;
• собственные / встроенные объекты (native): стандартные объекты, предоставляемые JS, иногда называемые глобальными объектами; JS в основном создается с помощью этих категоризированных нативных объектов (String, Number и пр.).

Что такое функция карри

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

Преобразование функций, которое переводит функцию из вызываемой как f(a, b, c) в вызываемую как f(a)(b)(c) позволяет легко получать частичные данные, избегая многократной передачи одной и той же переменной.

Каррирование создает вложенные функции в соответствии с количеством аргументов функции, поэтому каждая функция получает аргумент. Если аргумента нет, каррирование не выполняется.

Подробнее о каррировании здесь, также здесь.

Class

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

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

До ES6, синтаксис прототипа:

var Person = function(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.stringSentence = function() {
  return "Hello, my name is " + this.name + " and I'm " + this.age;
}

С ES6, синтаксис класса:

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

  stringSentence() {
    return `Hello, my name is ${this.name} and I am ${this.age}`;
  }
}

const myPerson = new Person("Alex", 30);
console.log(myPerson.age) // 30
console.log(myPerson.stringSentence()) // "Hello, my name is Alex and I'm 30

Подробнее о прототипах. Подробнее о Prototypes.

Подробнее о Classes. Подробнее о Classes.

Статические методы

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

class Repo {
  static getName() {
    return "Repo name"
  }
}

// Обрати внимание, что нам не нужно было создавать экземпляр класса Repo.
console.log(Repo.getName()) // Repo name

let r = new Repo();
console.log(r.getName()) // Uncaught TypeError: r.getName is not a function

Подробнее о static. Подробнее о static-methods.

Truthy / Falsy

В JavaScript истинное или ложное значение - это значение, которое преобразуется в логическое значение при оценке в логическом контексте. Примером логического контекста может быть оценка условия if:

Каждое значение будет приведено в значение true, если они не равны:

• false
• 0
• "" (пустая строка)
• null
• undefined
• NaN

Подробнее о Truthy. Подробнее о Falsy.

Anamorphisms and Catamorphisms

Анаморфизмы

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

function downToOne(n) {
  const list = [];

  for (let i = n; i > 0; --i) {
    list.push(i);
  }

  return list;
}

downToOne(5)
  //=> [ 5, 4, 3, 2, 1 ]

Катаморфизмы

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

function product(list) {
  let product = 1;

  for (const n of list) {
    product = product * n;
  }

  return product;
}

product(downToOne(5)) // 120

Подробнее об Anamorphisms in JavaScript. Подробнее об Anamorphism. Подробнее о Catamorphism.

Что такое Event loop

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

Идея Event loop очень проста. Есть бесконечный цикл, в котором движок JavaScript ожидает задачи, исполняет их и снова ожидает появления новых.

Задачи в очереди не обрабатываются одинаково. Они делятся на микрозадачи и макрозадания. Вместо того чтобы смешиваться, эти два типа задач занимают разные очереди.

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

Одна макро-задача выполняется из очереди макро-задачи (Task) внутри очереди. По завершении этой задачи цикл событий переходит в очередь микрозадач (Job). «Цикл событий» не просматривает следующее действие до завершения всей очереди микрозадач (заданий). Он завершает всю очередь микро-задач, а затем возвращается в очередь макро-задач.

Очередь задач → Микро-задача → Рендеринг → Макро-задача

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

Более упрощённый алгоритм событийного цикла:

• выбрать и исполнить самую старую задачу из очереди макрозадач (например, «script»);
• выполнить все микрозадачи;
• пока очередь микрозадач не пуста; выбрать из очереди и исполнить самую старую микрозадачу;
• отрисовать изменения страницы, если они есть;
• если очередь макрозадач пуста – подождать, пока появится макрозадача;
• Перейти к шагу 1.

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

Подробнее о Event loop здесь.

Что такое Event propagation

Распространение событий - это механизм, который определяет, как события распространяются или проходят через дерево DOM, чтобы достичь своей цели, и что с ней происходит потом.

В современном браузере распространение событий происходит в два этапа: этап захвата (capturing) и этап всплытия (bubbling).

Захват (capturing): события распространяются из window вниз по дереву DOM к целевому узлу - работает только с обработчиками событий, зарегистрированными с помощью метода addEventListener(), когда для третьего аргумента установлено значение true.

Всплытие (bubbling): на этой фазе событие распространяется или всплывает вверх по дереву DOM, от целевого элемента до window, посещая всех предков целевого элемента один за другим - поддерживается во всех браузерах и работает для всех обработчиков, независимо как они зарегистрированы, например используя onclick или addEventListener().

Подробнее о Event propagation здесь.

В чем разница между файлами Сookie, Local Storage и Session Storage

Хранилище браузера - данные никогда не передаются на сервер и могут быть прочитаны только на стороне клиента; ограничение на хранение составляет около 5 МБ;

• Session vs local storage: session storage - данные хранятся до закрытия вкладки/браузера; local storage не имеет срока годности;
• минусы хранилища: небезопасно, ограничено, опасность для XSS;
• Cookie: хранят данные с датой истечения срока действия, ограничение хранения около 4 КБ, отправляется на сервер для каждого запроса, чтение/запись как на стороне клиента, так и на стороне сервера (если HttpOnly, то он недоступен для клиентских скриптов).

Что такое Content Security Policy (CSP)

Политика безопасности контента (CSP) - это HTTP-header, который позволяет операторам сайта детально контролировать, откуда могут быть загружены ресурсы на их сайт. Использование этого заголовка - лучший способ предотвратить уязвимости межсайтового скриптинга (XSS). CSP является обязательным для всех новых веб-сайтов и настоятельно рекомендуется для всех существующих сайтов с высоким уровнем риска.

Подробнее о Content Security Policy здесь.

Что такое Cross-Site Scripting (XSS)

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

Подробнее о Cross-Site Scripting здесь.

Что такое CORS (Cross-Origin Resource Sharing)

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

Подробнее о Cross-Site Scripting здесь.

Надеюсь, эта статья была полезной для тебя. Большое спасибо за прочтение!