Приклади карток 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()); // "Hello World"

function myFunction() {
  return "Hello World";
}

Підняття не відбувається для змінних, оголошених з допомогою let та const.

Що таке стрілкова функція і які її переваги?

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

Для порівняння, традиційна функція може виглядати так:

функция сума(a, b) {
  повернути a + b;
}

Її еквівалент у форматі стрілкової функції виглядатиме так:

const сума = (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() виконується, коли Promise виконано, а .catch() - коли відхилено. У обох випадках результат операції або причина відхилення Promise передається як аргумент.

Що таке зворотний виклик (callback)?

Callback, також відома як callback функція, це функція, яка передається як аргумент до іншої функції і потім виконується (викликається назад) після завершення цієї функції. Callback функції часто використовуються в JavaScript, особливо в асинхронних операціях, таких як запити AJAX або обробка подій.

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

Використання такої функції на практиці може виглядати наступним чином:

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

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

У цьому випадку функція `executeAfterTimeout` отримує функцію `callback` як параметр, яка буде виконана після того, як пройде вказаний час. Callback функції надзвичайно корисні для управління асинхронним потоком керування в JavaScript.

Що таке оператор об'єднання нульових значень і як він працює?

Оператор об'єднання з нулем (??) - це логічний оператор, який повертає праву частину операції, коли ліва частина є null або не визначена. Іншими словами, коли змінна є пустою, оператор об'єднання з нулем повертає визначене значення як результат.

Основний формат використання:

let value = null ?? 'значення за замовчуванням';

У цьому випадку, оскільки ліва частина (value) є null, результатом буде 'значення за замовчуванням'. Крім того, цей оператор відрізняється від оператора OR (||), оскільки OR повертає праву частину, якщо ліва частина є false (false, 0, '', null, не визначена, NaN), тоді як оператор об'єднання з нулем повертає праву частину тільки тоді, коли ліва частина є null або не визначена.

Приклад з OR:

let value1 = 0 || 'значення за замовчуванням';
console.log(value1); // вивід: 'значення за замовчуванням', тому що 0 це false значення

Приклад з оператором об'єднання з нулем:

let value2 = 0 ?? 'значення за замовчуванням';
console.log(value2); // вивід: 0 тому що 0 не є null або не визначеним

Таким чином, на відміну від OR, оператор об'єднання з нулем не вважає 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] = 'Це приватне';

console.log(obj[privateProperty]); // 'Це приватне'
console.log(Object.keys(obj)); // []

Немає визначеного правила, коли варто використовувати Символ. Вони зазвичай використовуються, коли ми хочемо створити унікальну властивість об'єкту, яка не може бути легко побачена або змінена, або ми хочемо визначити методи, які впливають на поведінку об'єктів на низькому рівні.

Що таке WeakMap і WeakSet?

WeakMap та WeakSet - це спеціальні версії об'єктів JavaScript Map та Set, які не перешкоджають автоматичному звільненню пам'яті збірником сміття.

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