Примеры флешкарт JavaScript из нашего приложения

Скачайте наше приложение из App Store или Google Play, чтобы получить больше бесплатных карточек или подпишитесь на доступ ко всем карточкам.

Что такое лексическая область видимости в JavaScript?

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

function outerFunction() {
  let outerVariable = `Я снаружи!`;

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

  innerFunction();
}
outerFunction(); // Отображает `Я снаружи!`

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

Что такое поднятие переменных (hoisting)?

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

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

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

Пример кода поднятия для переменных:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

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

Пример кода поднятия для функций:

console.log(myFunction()); // "Привет, мир"

function myFunction() {
  return "Привет, мир";
}

Поднятие не происходит для переменных, объявленных с let и const.

Что такое стрелочная функция и каковы ее преимущества?

Стрелочная функция, также известная как стрелочная функция, - это тип функции, введенный в ECMAScript 6 (ES6). Их называют стрелочными функциями, потому что они используют специальный синтаксис со стрелкой ( => ), чтобы определить функцию.

Для сравнения, традиционная функция может выглядеть так:

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

Ее эквивалент в виде стрелочной функции:

const sum = (a, b) => a + b;

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

С другой стороны, из-за отсутствия собственного this, стрелочные функции не подходят для определения конструктора (творческих) объектов или для создания методов в прототипных объектах.

Что такое объект Promise и как его использовать?

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

Объект Promise может находиться в одном из трех состояний:
1. Ожидание - операция все еще продолжается, не завершена ни успешно, ни с ошибками.
2. Исполнение - операция успешно завершена, Promise вернул значение.
3. Отклонено - операция завершена с ошибкой, Promise возвращает причину ошибки.

Обещание, которое было выполнено или отклонено, считается "сфиксированным", и его состояние никогда не меняется.

Создание объекта Promise:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Операция успешна.');
  } else {
    reject('Операция не удалась.');
  }
});

Использование объекта Promise:

promise
  .then(result => {
    console.log(result); // Будет выведено: 'Операция успешна.'
  })
  .catch(error => {
    console.log(error);
  });

Метод .then() выполняется, когда обещание исполняется, и .catch() - когда оно отклоняется. В обоих случаях результат работы или причина отказа обещания передаются в качестве аргумента.

Что такое callback?

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

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

Использование такой функции на практике может выглядеть следующим образом:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Time passed!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('This is a callback!');
}, 2000);

В этом случае функция `executeAfterTimeout` получает функцию `callback` в качестве параметра, которая будет выполнена после того, как пройдет указанное количество времени. Функции обратного вызова крайне полезны для управления асинхронным потоком управления в JavaScript.

Что такое оператор объединения с null и как он работает?

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

Базовая нотация:

let value = null ?? 'default value';

В этом случае, так как левая сторона (value) равна null, результатом будет 'default value'. Кроме того, этот оператор отличается от оператора OR (||), так как функция OR возвращает правую сторону, когда левая сторона ложна (false, 0, '', null, undefined, NaN), в то время как оператор объединения с null возвращает правую сторону только тогда, когда левая сторона равна null или не определена.

Пример с OR:

let value1 = 0 || 'default';
console.log(value1); // вывод: 'default', так как 0 является ложным значением

Пример с объединением с null:

let value2 = 0 ?? 'default';
console.log(value2); // вывод: 0, потому что 0 не равно null или не определено

Таким образом, в отличие от OR, оператор объединения с null не рассматривает 0, '' и NaN как "пустые" значения.

Что такое Symbol и когда его следует использовать?

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

Создать Символ можно, вызвав конструктор Symbol(), который создает уникальный символ при каждом вызове. Даже если мы вызываем конструктор Symbol() с одинаковым аргументом, каждый созданный символ будет отличаться.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // возвращает false

Символы часто используются для определения (уникальных) свойств объектов, особенно когда мы хотим, чтобы это свойство было скрытым или приватным. Они также охватывают свойства, которые не учитываются при итерации по объектам с использованием for...in или for...of и не возвращаются методом Object.keys(). К тому же, символы позволяют создавать "псевдо" приватные свойства.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'This is private';

console.log(obj[privateProperty]); // 'This is private'
console.log(Object.keys(obj)); // []

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

Что такое WeakMap и WeakSet?

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

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

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

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // перезаписываем ссылку

// john удаляется из памяти!

WeakSet аналогичен тому, что WeakMap по отношению к Map. Это набор объектов, но он не препятствует сборке мусора, если объект не видим нигде больше. В нем отсутствуют типичные методы Set, такие как `size` и `clear`, а метод `add` принимает только объекты.

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

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // перезаписываем ссылку

// john удаляется из памяти!

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

Флешкарты JavaScript