JS Flashcards

1
Q

Spread operator

A

Похож на остаточные параметры – тоже использует …, но делает совершенно противоположное.
Когда …arr используется при вызове функции, он «расширяет» перебираемый объект arr в список аргументов.
Используется в коде.

let arr = [3, 5, 1];
alert( Math.max(…arr) ); // 5

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Rest parameter operator

A

Остаточные параметры могут быть обозначены через три точки …. Буквально это значит: «собери оставшиеся параметры и положи их в массив».
Обязательно идет в конце всех аргументов.
Используется только при передаче аргументов в функцию.

function sumAll(…args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Arguments

A

Все аргументы функции находятся в псевдомассиве arguments под своими порядковыми номерами.

Он не поддерживает методы массивов.

Стрелочные функции не имеют “arguments”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Difference between parameters passing by value and by reference

A

По значению:
function change(x){
x = 2 * x;
console.log(“x in change:”, x);
}

let n = 10;
console.log(“n before change:”, n); // n before change: 10
change(n); // x in change: 20
console.log(“n after change:”, n); // n after change: 10

По ссылке:
function change(user){
user.name = “Tom”;
}

let bob ={
name: “Bob”
};
console.log(“before change:”, bob.name); // Bob
change(bob);
console.log(“after change:”, bob.name); // Tom

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Lexical environment

A

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

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

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

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

Лексическое окружение – объект спецификации. Мы не можем получить этот объект в нашем коде и манипулировать им напрямую.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Scope

A

Это область видимости, которая определяет, есть ли у вас доступ к переменной.

До введения let и const область видимости в JavaScript определялась функцией (у var функциональная область видимости).

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Context (this)

A

Контекст описывает окружение в котором выполняется код (любой код имеет контекст выполнения). В каждый момент времени только один контекст выполнения выполняет код.

Одна и та же функция может быть вызвана с разным контекстом.

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Arrow functions (specialities)

A

Обладают лексическим контекстом (не привязаны к собственному this, arguments, super, или new.target).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Inner/outer lexical environment

A

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

Внутреннее лексическое окружение соответствует текущему выполнению функции.

Внешнее лексическое окружение – это глобальное лексическое окружение.

В нём находятся и сама функция.

У внутреннего лексического окружения есть ссылка на внешнее outer.

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

Если переменная не была найдена, это будет ошибкой в строгом режиме (use strict). Без строгого режима присваивание несуществующей переменной создаёт новую глобальную переменную с таким же именем.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Array concatenation by spread operator

A

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, …arr, 2, …arr2];

alert(merged); // 0,3,5,1,2,8,9,15 (0, затем arr, затем 2, в конце arr2)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Destructuring assignment

A

Это специальный синтаксис, который позволяет нам «распаковать» массивы или объекты в несколько переменных, так как иногда они более удобны.

let arr = [“Ilya”, “Kantor”];
let [firstName, surname] = arr;
alert(firstName); // Ilya
alert(surname); // Kantor

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

Можно пропускать элементы, используя запятые.

Работает с любым перебираемым объектом с правой стороны.

Можно использовать что угодно «присваивающее» с левой стороны.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Function arguments destructuring assignment

A

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

const func = ([first, second]) => {
console.log(first);
console.log(second);
};
func([1, 2]);
// => 1
// => 2

const func = ({ name, surname }) => {
console.log(name);
console.log(surname);
};
func({ name: ‘John’, surname: ‘Doe’ });
// => John
// => Doe

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Modules

A

Модуль – это просто файл. Один скрипт – это один модуль.

Модули могут загружать друг друга и использовать директивы export и import, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:

В модуле на верхнем уровне this не определён (undefined).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

AMD

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

ES6 modules

A

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

Модуль ES6 это просто файл с кодом внутри.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

СommonJS

A

Модульная система NodeJS.
Плюсы:
- Лаконичный синтаксис;
- Модули загружаются синхронно;
- В большинстве случаев используется на сервере.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

UMD modules

A

Universal Module Definition

По сути, модуль UMD - это файл JavaScript, который пытается угадать во время выполнения, в какой системе модулей он используется, а затем он действует как такой модуль.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Modules syntax

A

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

.
  • export отмечает переменные и функции, которые должны быть доступны вне текущего модуля.
  • import позволяет импортировать функциональность из других модулей.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Export as (in modules)

A

export {sayHi as hi, sayBye as bye};

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Named export

A

export {sayHi, sayBye};

Фигурные скобки необходимы в случае именованных экспортов, для export default они не нужны.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Export default

A

Специальный синтаксис для модулей, которые объявляют что-то одно, например модуль user.js экспортирует только class User.

В файле может быть не более одного export default.

И потом импортируем без фигурных скобок:
import User from ‘./user.js’;

22
Q

Dynamic imports

A

Выражение import(module) загружает модуль и возвращает промис, результатом которого становится объект модуля, содержащий все его экспорты.

let modulePath = prompt(“Какой модуль загружать?”);
import(modulePath)
.then(obj => <объект>)
.catch(err => <ошибка загрузки, например если нет такого модуля>)</объект>

Динамический импорт работает в обычных скриптах, он не требует указания script type=”module”.

Хотя import() и выглядит похоже на вызов функции, на самом деле это специальный синтаксис, так же, как, например, super().

Так что мы не можем скопировать import в другую переменную или вызвать при помощи .call/apply. Это не функция.

23
Q

this

A

this — это ключевое слово в JavaScript которое содержит в себе объект (контекст) выполняемого кода. Проще всего представить, что this — это уникальная переменная, которая хранит в себе контекст исполняемого кода. И наоборот — контекст — это значение ключевого слова this.

24
Q

Reference Type

A

Является внутренним типом.

Чтение свойства, например, с точкой . в объекте возвращает не точное значение свойства, а специальное значение «ссылочного типа», в котором хранится как значение свойства, так и объект, из которого оно было взято.

Значение ссылочного типа – это «триплет»: комбинация из трёх значений (base, name, strict), где:

base – это объект.
name – это имя свойства объекта.
strict – это режим исполнения. Является true, если действует строгий режим (use strict).

25
Q

Difference between method and function

A

Функция — это нечто, что существует отдельно от всего, принимает параметры и возвращает результат.

Метод — это функция, встроенная внутри объекта и принадлежащая ему, на деле принимает объект первым аргументом явно или неявно.

26
Q

this cons

A

В JavaScript this является «свободным», его значение вычисляется в момент вызова метода и не зависит от того, где этот метод был объявлен, а скорее от того, какой объект вызывает метод (какой объект стоит «перед точкой»).

Эта концепция вычисления this в момент исполнения имеет и минусы. Большая гибкость увеличивает вероятность ошибок.

27
Q

func.call(context, …args)

A

Он запускает функцию func, используя первый аргумент как её контекст this, а последующие – как её аргументы.

28
Q

func.apply(context, args)

A

Он выполняет func, устанавливая this=context и принимая в качестве списка аргументов псевдомассив args.

Единственная разница в синтаксисе между call и apply состоит в том, что call ожидает список аргументов, в то время как apply принимает псевдомассив.

29
Q

Losing ‘this’

A

Как только метод передаётся отдельно от объекта – this теряется.

Самый простой вариант решения – это обернуть вызов в анонимную функцию, создав замыкание.

30
Q

func.bind(context);

A

let boundFunc = func.bind(context);

Результатом вызова func.bind(context) является особый «экзотический объект» (термин взят из спецификации), который вызывается как функция и прозрачно передаёт вызов в func, при этом устанавливая this=context.

Другими словами, вызов boundFunc подобен вызову func с фиксированным this.

Полный синтаксис bind:
let bound = func.bind(context, [arg1], [arg2], …);

31
Q

IIFE pattern

A

Immediately-invoked Function Expression

Немедленно вызываемое функциональное выражение.

// Variation 1
(function() {
alert(“I am an IIFE!”);
}());

// Variation 2
(function() {
alert(“I am an IIFE, too!”);
})();

32
Q

Callback hell

A

Форму пирамиды в конце функции из }) называют адом обратных вызовов (callback hell).

Как выбраться из такой ситуации:
1. Избегайте большой вложенности функций. Дайте им имена и разместите их на верхнем уровне программы.
2. Используйте поднятие функций чтобы переместить объявление функций в нижнюю часть страницы.
3. Обрабатывайте каждую ошибку в каждом обратном вызове.
4. Создавайте переиспользуемые функции и помещайте их в модули, чтобы сократить время для понимания вашего кода. Разделяйте код на маленькие кусочки — это поможет обрабатывать ошибки, писать тесты, заставит создавать стабильный, задокументированный публичный API и облегчит его рефакторинг.

33
Q

Carrying

A

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

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

Каррирование не вызывает функцию. Оно просто трансформирует её.

function multiply(a) {
return (b) => {
return (c) => {
return a * b * c
}
}
}
log(multiply(1)(2)(3)) // 6

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

Арность — это количество аргументов функции.

34
Q

new operator

A

Необходим для выполнения функции-конструктора.

Когда функция вызывается как new User(…), происходит следующее:
- Создаётся новый пустой объект, и он присваивается this.
- Выполняется тело функции. Обычно оно модифицирует this, добавляя туда новые свойства.
- Возвращается значение this.

35
Q

Function constructor

A

Функции-конструкторы технически являются обычными функциями. Но есть два соглашения:
1. Имя функции-конструктора должно начинаться с большой буквы.
2. Функция-конструктор должна выполняться только с помощью оператора “new”.

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

function User(name) {
this.name = name;
this.isAdmin = false;
}
let user = new User(“Jack”);

alert(user.name); // Jack
alert(user.isAdmin); // false

36
Q

Static member in class

A

Мы можем присвоить метод самому классу. Такие методы называются статическими.

В объявление класса они добавляются с помощью ключевого слова static.

Это фактически то же самое, что присвоить метод напрямую как свойство функции.

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

37
Q

Private member in class

A

Приватные свойства и методы должны начинаться с #. Они доступны только внутри класса.

Вроде # и приватные поля уже отменили на уровне синтаксиса, но это не точно.

38
Q

Class syntax

A

class MyClass {
// методы класса
constructor() { … }
method1() { … }
method2() { … }
method3() { … }

}

Затем используйте вызов new MyClass() для создания нового объекта со всеми перечисленными методами.

При этом автоматически вызывается метод constructor(), в нём мы можем инициализировать объект.

39
Q

Class in JS

A

В JavaScript класс – это разновидность функции.

Иногда говорят, что class – это просто «синтаксический сахар» в JavaScript (синтаксис для улучшения читаемости кода, но не делающий ничего принципиально нового), потому что мы можем сделать всё то же самое без конструкции class.
Однако есть важные отличия:
1. Во-первых, функция, созданная с помощью class, помечена специальным внутренним свойством [[IsClassConstructor]]: true. Поэтому это не совсем то же самое, что создавать её вручную.
В отличие от обычных функций, конструктор класса не может быть вызван без new.
2. Методы класса являются неперечислимыми. Определение класса устанавливает флаг enumerable в false для всех методов в “prototype”.
И это хорошо, так как если мы проходимся циклом for..in по объекту, то обычно мы не хотим при этом получать методы класса.
3. Классы всегда используют use strict. Весь код внутри класса автоматически находится в строгом режиме.

40
Q

Difference between class and constructor function

A
  1. Синтаксис.
  2. В конструкторе методы, связанные с объектами, создаваемыми конструктором функции, добавляются к прототипу объекта. В классах методы прописываются в теле класса.
  3. Для создания наследования в конструкторах функций обычно используется прототипное наследование. Классы предоставляют более удобный синтаксис для определения наследования с использованием ключевого слова extends.
41
Q

Getters and setters

A

Свойства-аксессоры (один из двух типов свойство объектов) представлены методами: «геттер» – для чтения и «сеттер» – для записи. При литеральном объявлении объекта они обозначаются get и set:

let obj = {
get propName() {
},
set propName(value) {
}
};

Снаружи свойство-аксессор выглядит как обычное свойство. В этом и заключается смысл свойств-аксессоров.

42
Q

super()

A

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

43
Q

__proto__

A

Свойство __proto__ — исторически обусловленный геттер/сеттер для [[Prototype]].

Есть у всех объектов.
__proto__ это объект.

Он ссылается на prototype класса, с помощью которого он был создан.

44
Q

prototype

A

Есть только у классов и функций-конструкторов, созданных с помощью слова function.

Объекты имеют специальное скрытое свойство [[Prototype]] (так оно названо в спецификации), которое либо равно null, либо ссылается на другой объект. Этот объект называется «прототип».

Устаревшее свойство.

45
Q

Object.create(proto, [descriptors])

A

Создаёт пустой объект со свойством [[Prototype]], указанным как proto, и необязательными дескрипторами свойств descriptors.

Object.getPrototypeOf(obj) – возвращает свойство [[Prototype]] объекта obj.

Object.setPrototypeOf(obj, proto) – устанавливает свойство [[Prototype]] объекта obj как proto.

46
Q

Promise

A

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

let promise = new Promise(function(resolve, reject) {
});

47
Q

Event loop

A

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

Общий алгоритм движка:

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

48
Q

Main thread

A

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

49
Q

Location

A

Интерфейс Location представляет собой адрес (URL) объекта, с которым он связан. Его модификации отражаются на родительском объекте. Интерфейсы Document и Window имеют подобный Location, к которому можно получить доступ через Document.location и Window.location соответственно.

50
Q
A