JS Flashcards
Spread operator
Похож на остаточные параметры – тоже использует …, но делает совершенно противоположное.
Когда …arr используется при вызове функции, он «расширяет» перебираемый объект arr в список аргументов.
Используется в коде.
let arr = [3, 5, 1];
alert( Math.max(…arr) ); // 5
Rest parameter operator
Остаточные параметры могут быть обозначены через три точки …. Буквально это значит: «собери оставшиеся параметры и положи их в массив».
Обязательно идет в конце всех аргументов.
Используется только при передаче аргументов в функцию.
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
Arguments
Все аргументы функции находятся в псевдомассиве arguments под своими порядковыми номерами.
Он не поддерживает методы массивов.
Стрелочные функции не имеют “arguments”
Difference between parameters passing by value and by reference
По значению:
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
Но если в функции полностью присваивать имеющемуся аргументу новый объект, то старый объект останется без изменений, т.к. функция получает копию ссылки, а не оригинальную ссылку на объект.
Lexical environment
Каждый раз, когда в программе вызывается функция, внутри интерпретатора создается специальный словарь - лексическое окружение, привязанный к этому вызову.
Такой же словарь есть и у всех скрипта, который создается после его запуска. Это глобальный контекст.
Все определения констант, переменных и прочего внутри функции автоматически записываются в словарь.
Лексическое окружение — это хранилище для данных в памяти и механизм для извлечения этих данных при обращении.
ВАЖНО - наполнение словаря происходит при вызове функции, а не при определении.
В процессе выполнения функции значения переменных могут меняться, что сразу же отражается в лексическом окружении. После выполнения функции ее лексическое окружение уничтожается, а занятая им память освобождается.
Из этого поведения есть исключение — замыкания.
Лексическое окружение – объект спецификации. Мы не можем получить этот объект в нашем коде и манипулировать им напрямую.
Scope
Это область видимости, которая определяет, есть ли у вас доступ к переменной.
До введения let и const область видимости в JavaScript определялась функцией (у var функциональная область видимости).
Переменные объявленные вне функции записывались в глобальную область видимости.
Локальные переменные имеют больший приоритет, чем глобальные.
Context (this)
Контекст описывает окружение в котором выполняется код (любой код имеет контекст выполнения). В каждый момент времени только один контекст выполнения выполняет код.
Одна и та же функция может быть вызвана с разным контекстом.
Контекстом еще часто называют значение переменной this внутри функции. Значение переменной this чаще всего определяется тем, как вызывается функция.
Arrow functions (specialities)
Обладают лексическим контекстом (не привязаны к собственному this, arguments, super, или new.target).
Inner/outer lexical environment
В процессе вызова функции у нас есть два лексических окружения: внутреннее (для вызываемой функции) и внешнее (глобальное).
Внутреннее лексическое окружение соответствует текущему выполнению функции.
Внешнее лексическое окружение – это глобальное лексическое окружение.
В нём находятся и сама функция.
У внутреннего лексического окружения есть ссылка на внешнее outer.
Когда код хочет получить доступ к переменной – сначала происходит поиск во внутреннем лексическом окружении, затем во внешнем, затем в следующем и так далее, до глобального.
Если переменная не была найдена, это будет ошибкой в строгом режиме (use strict). Без строгого режима присваивание несуществующей переменной создаёт новую глобальную переменную с таким же именем.
Array concatenation by spread operator
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)
Destructuring assignment
Это специальный синтаксис, который позволяет нам «распаковать» массивы или объекты в несколько переменных, так как иногда они более удобны.
let arr = [“Ilya”, “Kantor”];
let [firstName, surname] = arr;
alert(firstName); // Ilya
alert(surname); // Kantor
Реструктуризация вообще ничего не делает с правой частью присваивания, его задача – только скопировать нужные значения в переменные.
Можно пропускать элементы, используя запятые.
Работает с любым перебираемым объектом с правой стороны.
Можно использовать что угодно «присваивающее» с левой стороны.
Function arguments destructuring assignment
Передача аргумента ничем не отличается от обыкновенного присвоения значения переменной. Это значит, что нам доступна деструктуризация прямо в определении функции.
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
Modules
Модуль – это просто файл. Один скрипт – это один модуль.
Модули могут загружать друг друга и использовать директивы export и import, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:
В модуле на верхнем уровне this не определён (undefined).
AMD
Асинхронное определение модуля — это подход к разработке программ, при котором модули и их зависимости могут быть загружены асинхронно. Асинхронная загрузка модулей позволяет улучшить скорость загрузки веб-страницы в целом, так как модули загружаются одновременно с остальным контентом сайта.
ES6 modules
Смысл создания модулей в Ecmascript 6 было создание формата, который был такой же лаконичный как CommonJS и не были такими динамичными. Это дало возможность на этапе компиляции получать ошибки, когда вы пытаетесь импортировать что-то, что не было експортировано. Также тут поддерживается асинхронная загрузка.
Модуль ES6 это просто файл с кодом внутри.
СommonJS
Модульная система NodeJS.
Плюсы:
- Лаконичный синтаксис;
- Модули загружаются синхронно;
- В большинстве случаев используется на сервере.
UMD modules
Universal Module Definition
По сути, модуль UMD - это файл JavaScript, который пытается угадать во время выполнения, в какой системе модулей он используется, а затем он действует как такой модуль.
Modules syntax
Так как модули поддерживают ряд специальных ключевых слов, и у них есть ряд особенностей, то необходимо явно сказать браузеру, что скрипт является модулем, при помощи атрибута
.
- export отмечает переменные и функции, которые должны быть доступны вне текущего модуля.
- import позволяет импортировать функциональность из других модулей.
Export as (in modules)
export {sayHi as hi, sayBye as bye};
Named export
export {sayHi, sayBye};
Фигурные скобки необходимы в случае именованных экспортов, для export default они не нужны.