Часті питання та відповіді на співбесіді з JavaScript

Наявність JavaScript у вашому портфоліо збільшує шанси отримати роль розробника програмного забезпечення. Тим не менш, давайте перевіримо поширені запитання співбесіди щодо JavaScript.

JavaScript є однією з найбільш використовуваних мов у веб-розробці. Зараз він використовується для розробки практично будь-яких типів програм.

Перш ніж переходити до питань співбесіди, давайте розглянемо переваги вивчення JavaScript.

JavaScript — це легка, інтерпретована або своєчасно скомпільована мова програмування. Це одна з основних мов всесвітньої мережі. Ви знаєте дві інші основні мови www. Краще пошукайте їх, якщо ні.

JavaScript в основному створюється для Інтернету. Але тепер це не лише для Інтернету. За допомогою таких середовищ, як Node, Deno тощо, ми можемо запускати його майже на будь-якій платформі.

Давайте перевіримо деякі його переваги.

Переваги JavaScript

  • Легко почати. Ви можете навчитися цьому навіть без будь-яких знань кодування.
  • Велика громада навколо нього. Ви отримаєте всю необхідну допомогу, якщо ви десь застрягли.
  • Існує багато бібліотек/фреймворків, створених за допомогою JavaScript, що допомагає швидше розробляти програми.
  • Ми можемо розробляти фронтенд, бекенд, програми для Android, iOS тощо з JavaScript. З ним ми можемо створювати практично будь-які типи додатків. Але він більш надійний у веб-розробці.
  • Зміст

    Які типи даних існують у JavaScript?

    Типи даних використовуються для зберігання різних типів даних. Типи даних відрізняються від однієї мови програмування до іншої. У JavaScript ми маємо 8 типів даних. Давайте розглянемо їх по одному.

    • Номер
    • Рядок
    • Логічний
    • Невизначено
    • Нуль
    • BigInt
    • символ
    • Об’єкт

    Усі типи даних, крім Object, називаються примітивними значеннями. І вони незмінні.

    Які вбудовані методи в JavaScript?

    Вбудовані методи в JavaScript відрізняються для кожного типу даних. Ми можемо отримати доступ до цих вбудованих методів за допомогою відповідного типу даних. Давайте розглянемо деякі вбудовані методи для різних типів даних і структур даних.

  • Номер
  • Рядок
    • toLowerCase
    • починається з
    • chartAt
  • Масив
  • Існує багато вбудованих методів для кожного типу даних. Ви можете перевірити посилання на всі вбудовані методи різних типів даних і структур даних.

    Як створити масив у JavaScript?

    Масиви є однією з основних структур даних у JavaScript. Масиви можуть містити будь-які типи даних, оскільки JavaScript є динамічним. Давайте подивимося, як створювати масиви в JavaScript.

    Ми можемо створити масив за допомогою квадратних дужок[]. Створювати об’єкти просто й швидко

    // Empty array
    const arr = [];
    
    // Array with some random values
    const randomArr = [1, "One", true];
    
    console.log(arr, randomArr);

    Ми можемо створити масив за допомогою конструктора Array. Люди рідко використовують конструктор для створення масивів у загальних проектах.

    // Empty array
    const arr = new Array();
    
    // Array with some random values
    const randomArr = new Array(1, "One", true);
    
    console.log(arr, randomArr);

    Масиви JavaScript є змінними, тобто ми можемо змінювати їх як забажаємо після створення.

    Як створити об’єкт у JavaScript?

    Окрім масиву, об’єкт є ще однією основною структурою даних у JavaScript. Об’єкти використовують для зберігання пари ключ-значення. Ключ має бути незмінним значенням, тоді як значенням може бути будь-що. Давайте подивимося, як створювати об’єкти в JavaScript.

    Ми можемо створювати об’єкти за допомогою фігурних дужок {}. Створювати об’єкти просто й швидко.

    // Empty object
    const object = {};
    
    // Object with some random values
    const randomObject = { 1: 2, one: "Two", true: false };
    
    console.log(object, randomObject);

    Ми можемо створювати об’єкти за допомогою конструктора об’єктів. Люди рідко використовують це в загальних проектах.

    // Empty object
    const object = new Object();
    
    // Object with some random values
    const randomObject = new Object();
    randomObject[1] = 2;
    randomObject["one"] = "Two";
    randomObject[true] = false;
    
    console.log(object, randomObject);

    Об’єкти JavaScript є змінними, тобто ми можемо змінювати їх після створення, як ви бачите у другому прикладі.

    Як налагодити код JavaScript?

    Налагодження коду непросте. І це відрізняється від однієї мови програмування до іншої, від одного проекту до іншого тощо; давайте подивимося, як часто використовуються для налагодження JavaScript.

    1. Лісозаготівля

    Ми можемо використовувати оператори console.log у багатьох місцях нашого коду, щоб визначити помилку. Код припинить виконання наступних рядків коду, якщо в попередньому рядку є помилка.

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

    2. Інструменти розробника

    JavaScript здебільшого використовується для розробки веб-додатків. Таким чином, майже всі браузери тепер мають інструменти розробника, які допомагають налагодити код JavaScript.

    Одним із найбільш використовуваних методів налагодження є встановлення точок зупину в інструментах розробника. Точки зупинки зупиняють виконання JavaScript і дають усю інформацію про виконання на даний момент.

    Ми можемо встановити кілька точок зупину навколо місця, де ми отримуємо помилки, і подивитися, що їх спричиняє. Це найефективніший спосіб налагодження веб-програм JavaScript.

    3. IDE

    Ми можемо використовувати IDE для налагодження JavaScript. VS Code підтримує налагодження за допомогою точок зупину. Функція налагодження може відрізнятися залежно від IDE, яку ви використовуєте. Але більшість IDE матимуть цю функцію.

    Як додати код JavaScript у файл HTML?

    Ми можемо додати HTML-файл JavaScript за допомогою тегу script. Ви можете перевірити приклад нижче.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>techukraine.net</title>
      </head>
      <body>
        <h1>techukraine.net</h1>
    
        <script>
          // JavaScript code goes here
          console.log("This is JavaScript code");
        </script>
      </body>
    </html>

    Що таке файли cookie?

    Файли cookie — це пари ключ-значення, які використовуються для зберігання невеликої інформації. Інформація може бути будь-якою. Ми можемо встановити термін дії файлів cookie, які будуть видалені після закінчення терміну дії. Вони широко використовуються для зберігання інформації користувачів.

      7 найкращих інструментів ротації посилань для ефективного маршрутизації трафіку

    Файли cookie не видалятимуться, навіть якщо ми оновимо сторінку, поки ми їх не видалимо або термін їх дії не закінчиться. Ви можете перевірити файли cookie будь-якої веб-програми/веб-сторінки в будь-якому браузері, відкривши інструменти розробника.

    Ми можемо прочитати файл cookie в JavaScript за допомогою document.cookie. Він поверне всі файли cookie, які ми створили.

    console.log("All cookies", document.cookie);

    Він поверне порожній рядок, якщо немає файлів cookie.

    Ми можемо створити файли cookie, встановивши пару ключ-значення для документа.cookie. Давайте розглянемо приклад.

    document.cookie = "one=One;";

    У наведеному вище синтаксисі один ключ cookie, а One є його значенням. Ми можемо додати більше атрибутів до файлу cookie, наприклад домен, шлях, термін дії тощо; кожен з них повинен бути розділений крапкою з комою (;). Усі атрибути є необов’язковими.

    Давайте розглянемо приклад з атрибутами.

    document.cookie = "one=One;expires=Jan 31 2023;path=/;";

    У наведеному вище коді ми додали термін дії та шлях до файлу cookie. Якщо термін дії не вказано, файл cookie буде видалено після сеансу. Шляхом за замовчуванням буде шлях до файлу. Формат терміну придатності має бути в GMT.

    Давайте подивимося, як створити кілька файлів cookie.

    document.cookie = "one=One;expires=Jan 31 2023;path=/;";
    document.cookie = "two=Two;expires=Jan 31 2023;path=/;";
    document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

    Файли cookie не будуть перезаписані, якщо під час встановлення кількох файлів cookie ключ або шлях відрізняються. Якщо ключ і шлях однакові, попередній файл cookie буде перезаписано. Перегляньте наведений нижче приклад, який перезапише попередній набір файлів cookie.

    document.cookie = "one=One;expires=Jan 31 2023;path=/;";
    document.cookie = "one=Two;path=/;";

    Ми видалили термін дії файлу cookie та змінили значення.

    Використовуйте дату закінчення майбутньої дати, коли ви тестуєте код, щоб він працював правильно. Якщо ви збережете ту саму дату 31 січня 2023 року навіть після 31 січня 2023 року, файли cookie не створюватимуться.

    Ми побачили, як створювати та оновлювати файли cookie. Давайте подивимося, як видалити файли cookie.

    Видалити файли cookie легко. Просто змініть термін дії файлу cookie на будь-яку минулу дату. Перевірте приклад нижче.

    // Creating cookies
    document.cookie = "one=One;expires=Jan 31 2023;path=/;";
    document.cookie = "two=Two;expires=Jan 31 2023;path=/;";
    document.cookie = "three=Three;expires=Jan 31 2023;path=/;";
    
    // Deleting the last cookie
    document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

    Ви не знайдете останній файл cookie в списку файлів cookie, оскільки він видаляється в останньому рядку коду. Ось і все для міні-посібника з печива.

    Які існують різні фреймворки JavaScript?

    Існує багато фреймворків JavaScript. React, Vue, Angular тощо для розробки інтерфейсу користувача. Express, Koa, Nest тощо для розробки на стороні сервера. NextJS, Gatsby тощо, для створення статичного сайту. React Native, Ionic тощо для розробки мобільних додатків. Ми згадали тут деякі фреймворки JavaScript. Ви можете знайти більше фреймворків, на вивчення яких знадобиться багато часу. Досліджуйте, коли вони вам потрібні.

    Закриття в JavaScript

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

    function outer() {
      const a = 1;
      function inner() {
        // We can access all the data from the outer function scope here
        // The data will be available even if we execute this function outside the outer function 
        // as inners' closure formed while creating it
        console.log("Accessing a inside inner", a);
      }
      return inner;
    }
    
    const innerFn = outer();
    innerFn();

    Закриття широко використовуються в програмах JavaScript. Можливо, ви використовували їх раніше, не усвідомлюючи, що вони є закриттями. Про закриття можна дізнатися набагато більше. Переконайтеся, що ви повністю вивчили цю концепцію.

    Підйом в JavaScript

    Підйом — це процес у JavaScript, у якому оголошення змінних, функцій і класів переміщується до верхньої частини області перед виконанням коду.

    // Accessing `name` before declaring
    console.log(name);
    
    // Declaring and initializing the `name`
    var name = "techukraine.net";

    Якщо ви запустите наведений вище код, ви не побачите жодної помилки. Але в більшості мов ви отримаєте помилку. Результат буде невизначеним, оскільки hoisting лише переміщує оголошення вгору, і він не ініціалізує його до рядка номер 3.

    Змініть var на let або const наступним чином і запустіть код знову.

    // Accessing `name` before declaring
    console.log(name);
    
    // Declaring and initializing the `name`
    const name = "techukraine.net";

    Тепер ви отримаєте помилку посилання про те, що ми не можемо отримати доступ до змінної до її ініціалізації.

    ReferenceError: Cannot access 'name' before initialization

    Отже, тут let і const введено в ES6, до якого неможливо отримати доступ до ініціалізації, як свідчить помилка. Це пояснюється тим, що змінні, оголошені за допомогою let або const, перебуватимуть у часовій мертвій зоні (TDZ) до моменту ініціалізації рядка. Ми не можемо отримати доступ до змінних із TDZ.

    Каррінг в JavaScript

    Каррі — це техніка для перетворення функцій із багатьма параметрами в меншу кількість параметрів із декількома викликами. З його допомогою ми можемо перетворити функцію add(a, b, c, d) на add(a)(b)(c)(d) викликану. Давайте подивимося на прикладі того, як це зробити.

    function getCurryCallback(callback) {
      return function (a) {
        return function (b) {
          return function (c) {
            return function (d) {
              return callback(a, b, c, d);
            };
          };
        };
      };
    }
    
    function add(a, b, c, d) {
      return a + b + c + d;
    }
    
    const curriedAdd = getCurryCallback(add);
    
    // Calling the curriedAdd
    console.log(curriedAdd(1)(2)(3)(4));

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

    Різниця між документом і вікном

    Вікно – це самий верхній об’єкт у браузері. Він містить всю інформацію про вікно браузера, як-от історію, місцезнаходження, навігатор тощо; він доступний у всьому світі в JavaScript. Ми можемо використовувати його безпосередньо в нашому коді без імпорту. Ми можемо отримати доступ до властивостей і методів об’єкта вікна без вікна.

    Документ є частиною віконного об’єкта. Увесь HTML-код, завантажений на веб-сторінку, перетворюється на об’єкт документа. Об’єкт документа посилається на спеціальний елемент HTMLDocument, який матиме різні властивості та методи, як і всі елементи HTML.

      Оживіть домашню сторінку свого браузера за допомогою цих 10 випадкових генераторів веб-сайтів

    Вікно об’єкт представляє вікно браузера, а документ – документ HTML, завантажений у цьому вікні браузера.

    Різниця між стороною клієнта та стороною сервера

    Клієнтська сторона відноситься до кінцевого користувача, який використовує програму. Серверна сторона стосується веб-сервера, на якому розгорнуто програму.

    У термінології зовнішнього інтерфейсу ми можемо сказати, що браузер на комп’ютерах користувачів – на стороні клієнта, а хмарні служби – на стороні сервера.

    Різниця між innerHTML і innerText

    І innerHTML, і innerText є властивостями елементів HTML. Ми можемо змінити вміст елемента HTML за допомогою цих властивостей.

    Ми можемо призначити рядок HTML властивості innerHTML, яка відображається як звичайний HTML. Перевірте наведений нижче приклад.

    const titleEl = document.getElementById("title");
    
    titleEl.innerHTML = '<span style="color:orange;">techukraine.net</span>';

    Додайте один елемент із заголовком id до свого HTML і додайте наведений вище сценарій до файлу JavaScript. Запустіть код і подивіться результат. Ви будете techukraine.net в оранжевому кольорі. І якщо ви перевірите елемент, він буде всередині тегу span. Отже, innerHTML візьме рядок HTML і відтворить його як звичайний HTML.

    InnerText з іншого боку візьме звичайний рядок і відобразить його таким, яким він є. Він не відображатиме жодного HTML, як innerHTML. Змініть innerHTML на innerText у наведеному вище коді та перевірте результат.

    const titleEl = document.getElementById("title");
    
    titleEl.innerText="<span style="color:orange;">techukraine.net</span>";

    Тепер ви побачите точний рядок, який ми надали на веб-сторінці.

    Різниця між let і var

    Ключові слова let і var використовуються для створення змінних у JavaScript. Ключове слово let введено в ES6.

    Let є блочною областю, а var є функціональною.

    {
      let a = 2;
      console.log("Inside block", a);
    }
    console.log("Outside block", a);

    Запустіть наведений вище код. Ви отримаєте повідомлення про помилку в останньому рядку, оскільки ми не можемо отримати доступ до let за межами блоку, тому що це область блоку. Тепер змініть його на var і запустіть знову.

    {
      var a = 2;
      console.log("Inside block", a);
    }
    console.log("Outside block", a);

    Ви не отримаєте жодної помилки, оскільки ми також можемо отримати доступ до змінної a поза блоком. Тепер давайте замінимо блок функцією.

    function sample() {
      var a = 2;
      console.log("Inside function", a);
    }
    sample();
    console.log("Outside function", a);

    Ви отримаєте помилку посилання, якщо ви запустите наведений вище код, оскільки ми не можемо отримати доступ до var a it поза функцією, оскільки це область видимості функції.

    Ми можемо переоголосити змінні за допомогою ключового слова var, але ми не можемо переоголосити змінні за допомогою ключового слова let. Давайте розглянемо приклад.

    var a = "techukraine.net";
    var a = "Chandan";
    console.log(a);
    let a = "techukraine.net";
    let a = "Chandan";
    console.log(a);

    Перший фрагмент коду не викличе жодної помилки, а значення a буде змінено на останнє призначене значення. Другий фрагмент коду видасть помилку, оскільки ми не можемо повторно оголосити змінні за допомогою let.

    Різниця між сховищем сеансу та локальним сховищем

    Сховище сеансів і локальне сховище використовуються для зберігання інформації на комп’ютерах користувачів, до якої можна отримати доступ без Інтернету. Ми можемо зберігати пари ключ-значення як у сховищі сеансу, так і в локальному сховищі. І ключ, і значення буде перетворено на рядки, якщо ви надасте будь-який інший тип даних або структуру даних.

    Зберігання сеансу буде очищено після його завершення (коли браузер закрито). Пам’ять про місцезнаходження не буде очищено, доки ми її не очистимо.

    Ми можемо отримувати доступ, оновлювати та видаляти сховище сеансу та місцеположення за допомогою об’єктів sessionStorage та localStorage відповідно.

    Що таке NaN у JavaScript?

    NaN скорочено називається Not-a-Number. Це означає, що щось не є допустимим/дійсним числом у JavaScript. У деяких випадках ми отримаємо NaN як вихід, наприклад 0/0, undefined * 2, 1 + undefined, null * undefined тощо,

    Що таке лексичний огляд?

    Лексична область стосується доступу до змінних із батьківської області. Скажімо, у нас є функція з двома внутрішніми функціями. Внутрішня функція може отримати доступ до змінних області видимості своїх двох батьківських функцій. Подібним чином функція 2-го рівня може отримати доступ до зовнішньої області видимості функції. Розглянемо це на прикладі.

    function outermost() {
      let a = 1;
      console.log(a);
      function middle() {
        let b = 2;
        // `a` are accessible here
        console.log(a, b);
        function innermost() {
          let c = 3;
          // both `a` and `b` are accessible here
          console.log(a, b, c);
        }
        innermost();
      }
      middle();
    }
    outermost();

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

    Що передається за значенням і за посиланням?

    Передача за значенням і передача за посиланням — це два способи передати аргументи функції в JavaScript.

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

    function sample(a) {
      // changing the value of `a`
      a = 5;
      console.log("Inside function", a);
    }
    let a = 3;
    sample(a);
    console.log("Outside function", a);

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

    Передача за посиланням: передає посилання на дані функції. Отже, коли ми вносимо будь-які зміни у функцію, це також змінюватиме вихідні дані.

    function sample(arr) {
      // adding a new value to the array
      arr.push(3);
      console.log("Inside function", arr);
    }
    let arr = [1, 2];
    sample(arr);
    console.log("Outside function", arr);

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

    Примітка: усі примітивні типи даних передаються за значенням, а непримітивні – за посиланням.

    Що таке мемоізація?

    Запам’ятовування — це техніка, яка зберігає обчислені значення в кешах і використовує їх, коли вони нам знадобляться знову, не обчислюючи їх знову. Це прискорить виконання коду, якщо обчислення дуже важкі. Існує компроміс щодо зберігання, який не є великою проблемою порівняно з часом.

    const memo = {};
    function add(a, b) {
      const key = `${a}-${b}`;
    
      // checking whether we computed the value already or not
      if (memo[key]) {
        console.log("Not computing again");
        return memo[key];
      }
    
      // adding the newly computed value to cache
      // here cache is a simple global object
      memo[key] = a + b;
      return memo[key];
    }
    
    console.log(add(1, 2));
    console.log(add(2, 3));
    console.log(add(1, 2));

    Це простий приклад, який демонструє запам’ятовування. Тут додавання двох чисел не є важким обчисленням. Це лише для демонстрації.

    Що таке параметр відпочинку?

    Параметр rest використовується для збору всіх решти параметрів у функції. Припустімо, у нас є функція, яка прийматиме щонайменше 2 аргументи та може приймати максимум будь-яку кількість параметрів. Оскільки у нас немає максимальної кількості аргументів, ми можемо зібрати перші 2 параметри за допомогою звичайних змінних, а всі інші — за допомогою параметра rest за допомогою оператора rest.

    function sample(a, b, ...rest) {
      console.log("Rest parameter", rest);
    }
    
    sample(1, 2, 3, 4, 5);

    Параметр rest буде масивом останніх трьох аргументів у наведеному вище прикладі. Завдяки цьому ми можемо мати будь-яку кількість параметрів для функції.

      Виправте групу або ресурс не в правильному стані для виконання потрібної операції

    Одна функція може мати лише один параметр rest. А параметр rest має бути останнім у порядку параметрів.

    Що таке деструктуризація об’єктів?

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

    const object = { a: 1, b: 2, c: 3 };
    
    // Object destructuring
    const { a, b, c } = object;
    
    // Now, a, b, c will be used as normal variables
    console.log(a, b, c);

    Ми можемо змінити змінні деструктурованих змінних у тому самому рядку наступним чином.

    const object = { a: 1, b: 2, c: 3 };
    
    // Changing the names of `a` and `b`
    const { a: changedA, b: changedB, c } = object;
    
    // Now, changedA, changedB, c will be used as normal variables
    console.log(changedA, changedB, c);

    Що таке деструктуризація масиву?

    Деструктуризація масиву використовується для доступу до змінних із масиву та призначення їх змінним. Давайте розглянемо приклад.

    const array = [1, 2, 3];
    
    // Array destructuring
    // It's based on the index of the array
    const [a, b, c] = array;
    
    // Now, we can use a, b, c as normal variables
    console.log(a, b, c);

    Що таке захоплення подій і підсвічування подій?

    Захоплення подій і підсвічування подій є двома способами поширення подій у HTML DOM. Припустимо, є два елементи HTML, один в одному. І подія відбувається на внутрішньому елементі. Тепер режим поширення подій визначатиме порядок виконання цих подій.

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

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

  • Події починають виконуватися від самого верхнього елемента до цільового елемента вниз.
  • Подія на цільовому елементі буде виконана знову.
  • Розповсюдження події вибухання відбуватиметься знову, доки не підніметься найвищий елемент.
  • Ми можемо зупинити поширення події, викликавши метод event.stopPropogation в обробнику події.

    Що таке обіцянки в JavaScript?

    Об’єкт Promise використовується для асинхронних операцій, які в майбутньому завершаться успішно або невдало.

    Обіцянка може перебувати в одному з наступних станів.

  • очікування – коли операція ще триває.
  • виконано – коли операція завершена успішно. Ми матимемо результати (якщо такі є) у стані успіху.
  • відхилено – коли операція завершена без збою. У нас буде причина (помилка), чому це не вдалося.
  • Давайте розглянемо два приклади випадків успіху та невдачі.

    // Promise which will complete successfully
    const successPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ message: "Completed successfully" });
      }, 300);
    });
    successPromise
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
      });
    
    // Promise which will complete with failure state
    const failurePromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error("Failing the promise for testing"));
      }, 300);
    });
    failurePromise
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
      });

    Ви можете мати більше одного, а потім об’єднати, якщо потрібно. Попередньо повернуті дані будуть прийняті під час наступного зворотного виклику.

    Поясніть різні типи області дії в JavaScript

    У JavaScript є два типи області видимості. Глобальна область і локальна область.

    Можливо, ви також чули про область дії функції та область дії блоку. Це локальні області для var і let, const відповідно.

    Що таке функції самовиклику?

    Функції, що викликають себе, є безіменними функціями, які будуть виконані відразу після створення. Давайте розглянемо кілька прикладів.

    // Without any parameters
    (function sayHello() {
      console.log("Hello, World!");
    })();
    
    // With parameters
    (function add(a, b) {
      console.log("Sum", a + b);
    })(1, 2);

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

    Що таке функції стрілок?

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

    // arrow functions will return by default if it doesn't have any brackets
    let add = (a, b) => a + b;
    
    console.log(add(1, 2));

    Існують деякі відмінності між функціями стрілок і звичайними функціями.

    • Функції зі стрілками не мають власної прив’язки this. Ключове слово this у функції стрілки посилається на її батьківську область this.
    • Функції зі стрілками не можна використовувати як функції конструктора

    Що таке зворотні виклики?

    Зворотний виклик — це функція, яка передається іншій функції, яка викликається всередині цієї функції. Використання зворотних викликів є звичайною справою в JavaScript. Давайте розглянемо приклад.

    function sample(a, b, callback) {
      const result = a + b;
      callback(result);
    }
    
    function finished(result) {
      console.log("Finished with", result);
    }
    
    sample(1, 2, finished);

    Функція finished передається як зворотний виклик до зразка. Готова функція викликається з результатом після виконання певної дії. Ви побачите використання зворотних викликів переважно в асинхронних операціях, таких як promises, setTimeout тощо,

    Які є різні типи помилок?

    Давайте перевіримо деякі помилки в JavaScript.

    ReferenceError: ця помилка виникне, якщо доступна змінна, до якої ми маємо доступ.

    TypeError: JavaScript видасть цю помилку, якщо помилка не збігається з іншими типами помилок. Це також станеться, коли ми спробуємо виконати дію, яка не сумісна з даними.

    SyntaxError: ця помилка виникне, якщо синтаксис JavaScript неправильний.

    Є й інші типи помилок. Але це типові типи помилок у JavaScript.

    Які різні області дії змінних у JavaScript?

    У JavaScript є дві області дії змінних. Змінні, оголошені за допомогою ключового слова var, матимуть функціональну область, а змінні, оголошені за допомогою let і const, матимуть блочну область.

    Зверніться до 17-го запитання, щоб дізнатися більше про область дії цих змінних.

    Що таке escape-символи в JavaScript?

    Зворотний слеш є символом екранування в JavaScript. Він використовується для друку деяких спеціальних символів, які ми не можемо друкувати загалом. Скажімо, ми хочемо надрукувати апостроф (‘) всередині рядка, що ми не можемо зробити зазвичай, оскільки рядок закінчуватиметься на другому апострофі. У цьому випадку ми використаємо символ екранування, щоб уникнути закінчення рядка в цій точці.

    const message="Hi, I"m techukraine.net';
    console.log(message);

    Ми можемо досягти вищезазначеного результату без використання символу екранування, замінивши зовнішні одинарні апострофи подвійними апострофами. Але це лише приклад того, як використовувати символ втечі. Існують інші символи, для яких нам обов’язково потрібен escape-символ, наприклад n, t, тощо,

    Що таке BOM і DOM?

    Об’єктна модель браузера (BOM): усі браузери мають BOM, що представляє поточне вікно браузера. Він містить наш верхній віконний об’єкт, який використовується для керування вікном браузера.

    Об’єктна модель документа (DOM): браузери створюють DOM, коли HTML завантажується в структурі дерева. Ми можемо маніпулювати елементами HTML за допомогою DOM API.

    Що таке екранний об’єкт?

    Об’єкт екрану є однією з властивостей глобального об’єкта вікна. Він містить різні властивості екрана, на якому відображається поточне вікно браузера. Деякі з властивостей: ширина, висота, орієнтація, глибина пікселів тощо,

    Висновок

    До всіх наведених вище питань можуть бути додаткові запитання. Отже, вам потрібно підготувати концепції щодо всіх вищезазначених питань.

    Ви також можете ознайомитися з поширеними запитаннями та відповідями на співбесідах у Java.

    Приємного навчання 🙂