100 наиболее часто задаваемых вопросов и ответов на собеседованиях по JavaScript — Часть 1

JavaScript (JS) — это облегченный, интерпретируемый или компилируемый точно в срок язык программирования с первоклассными функциями. Хотя он наиболее известен как язык сценариев для веб-страниц, его также используют многие небраузерные среды, такие как Node.js, Apache CouchDB и Adobe Acrobat. JavaScript — основанный на прототипах, мультипарадигменный, однопоточный, динамический язык, поддерживающий объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили.

Мы будем изучать JavaScript, отвечая на самые часто задаваемые вопросы о JavaScript на собеседовании.

Серия вопросов и ответов для интервью по JavaScript

• Часть 1
• "Часть 2"

Добро пожаловать в учебник Tech Talks

Если вы, ребята, хотите потренироваться для JavaScript-интервью на пробном видео-интервью, напишите мне по электронной почте [email protected].

Вопросы

Вопрос 1. Что такое JavaScript?
Вопрос 2. Что такое primitive types в JavaScript?
or
Объясните различные data types в JavaScript?
Вопрос 3. В чем разница между undefined и null в JavaScript?
Вопрос 4. Что такое escape-символы в JavaScript?
Вопрос 5. Что делает оператор Logical AND (&&)?
Вопрос 6. Что делает оператор Logical OR (||)?< br /> Вопрос 7. Как быстрее всего преобразовать строку в число?
Вопрос 8. Какие существуют типы значений имени ошибки в JavaScript?
Вопрос 9. Пожалуйста, объясните Self Invoking Function
Вопрос 10. Объясните разницу между объявлением функции и выражением функции.
Вопрос 11. Что такое DOM?
Вопрос 12. Пожалуйста, объясните разницу между attributes и property?
Вопрос 13. Что такое cookies? Как вы будете создавать create, read и delete файл cookie с помощью JavaScript?
Вопрос 14. Что такое Event Propagation?
Вопрос 15. Что такое пузырьковое воспроизведение событий?
Вопрос 16. Что такое захват событий?< br /> Вопрос 17. Объясните разницу между методами event.preventDefault() и event.stopPropagation()?
Вопрос 18. Как узнать, использовался ли в элементе метод event.preventDefault() ?
Вопрос 19. Что такое замыкание?
Вопрос 20 . Сколько способов создать массив в JavaScript?
Вопрос 21. Как очистить массив в JavaScript?

Ответы

Если вам лень читать больше текста, вы можете посмотреть видео со всеми вопросами здесь

1. Что такое JavaScript?

Общее определение JavaScript:

• JavaScript — это язык сценариев, который позволяет создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое.
• JavaScript — самый популярный язык веб-скриптов, используемый как для клиентской, так и для серверной разработки.
• Поддержка возможностей объектно-ориентированного программирования.
• Код JavaScript можно вставлять в HTML-страницы, которые могут быть поняты и выполнены веб-браузерами.

2. Какие примитивные типы есть в JavaScript?

Типы данных, поддерживаемые JavaScript:

• Нить
• Число
• логический
• Символ
• BigInt
• Нулевой
• Неопределенный

3. В чем разница между undefined и null в JavaScript?

undefined — это значение по умолчанию

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

console.log(12);

• свойство, которого нет в объекте. Движок JavaScript делает это за нас, присваивая неопределенные значения.

let _undefinedVar;
  const doNothing = () => {};
  const someObj = {
    ab : “Tech Talks”,
    bc : “With AK”,
    cd : “Subscribe, Link in Bio”,
  };
  console.log(_undefinedVar); // undefined
  console.log(doNothing()); // undefined
  console.log(someObj[“d”]); // undefined

null is

• значение, которое не представляет никакого значения.
• значение, которое было явно определено для переменной.
• Например, мы получаем значение null, когда метод fs.readFile не выдает ошибку.

fs.readFile('path/to/file', (err,data) => {
     console.log(e); //prints null when no error occurred
     if(e){
       console.log(e);
     }
     console.log(data);
   }
);

сравнение null и undefined

• При сравнении null и undefined мы получаем true при использовании == и false при использовании ===.

console.log(null == undefined); // logs true
console.log(null === undefined); // logs false

JavaScript?

• Мы используем escape-символы backslash (\) при работе со специальными символами, такими как ampersands (&), apostrophes (‘), double quotes (“ ”) и single quotes (‘ ’).
• Все, что заключено в escape-символах, отображается JavaScript.
• Шесть дополнительных escape-символов также доступны в JavaScript:

\b — Возврат

\f — Подача формы

\n — новая строка

\r — Возврат каретки

\t — Горизонтальный табулятор

\v — Вертикальный табулятор

• Они никоим образом не выполняются в коде HTML или JS.
• Первоначально они были разработаны для управления факсимильными аппаратами, телетайпами и пишущими машинками.

5. Что делает логический оператор И?

• Оператор && или Logical AND находит первое ложное выражение в своих операндах и возвращает его.
• Если он не находит ни одного ложного выражения, он возвращает последнее выражение.
• Он использует короткое замыкание, чтобы предотвратить ненужную работу.

   console.log(false && 10 && []); // false
   console.log(" " && true && 10); // 10

6. Что делает логический оператор ИЛИ?

• Оператор || или Logical OR находит первое истинное выражение в своих операндах и возвращает его.
• Это также использует короткое замыкание, чтобы предотвратить ненужную работу.

console.log(null || 10 || undefined); //prints 10

function printChannelName(name) {
  var n = name || "Tech Talks With AK";
  console.log(n);
}

printChannelName(); //prints "Tech Talks With AK"

7. Как быстрее всего преобразовать строку в число?

Согласно Документации MDN Unary Plus (+) — это самый быстрый способ преобразования строки в число, поскольку он не выполняет никаких операций над значением, если оно уже является числом.

8. Какие существуют типы значений имени ошибки в JavaScript?

В JavaScript существует 6 значений имени ошибки.

• Ошибка Eval — возникает при обнаружении ошибки в eval() (в более новых версиях JS ее нет).
• Ошибка диапазона — генерируется при использовании числа за пределами указанного диапазона.
• Ошибка ссылки. Возникает при использовании необъявленной переменной.
• Синтаксическая ошибка. Эта ошибка возникает при использовании неправильного синтаксиса.
• Ошибка типа. Эта ошибка возникает при попытке использовать значение вне диапазона типов данных.
• Ошибка URI — генерируется из-за использования недопустимых символов.

9. Пожалуйста, объясните функцию самовызова.

• Функции, которые вызываются автоматически, называются Self Invoking Functions.
• Они также известны как Immediately Invoked Function Expressions и Self Executing Anonymous Functions.
• Общий синтаксис Self Invoking Function:

// A function is defined and then invoked
(function_name () {
    return ()
}) ();

• Однако, если есть необходимость automatically выполнить функцию в том месте, где она задана, и не вызывать ее повторно, то можно использовать anonymous functions. Такие функции не имеют имени. Итак, имя.

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

function declaration и function expression можно различать на основе

• Определение
• Строгий режим
• Время использования
• Когда использовать

Определение

• Функция, объявленная как отдельная инструкция в основном потоке кода, называется function declaration.
• Когда функция создается внутри выражения или другой синтаксической конструкции, она называется function expression.

Строгий режим

• Когда объявление функции within a code block in the Strict mode, оно видно везде внутри этого блока, но не за его пределами.
• Это не относится к функциональному выражению.

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

• Создается функциональное выражение when the execution reaches it. Функциональное выражение можно использовать с этого момента.
• Объявление функции, с другой стороны, can be called before the same is defined.

Когда использовать

• Объявление функции предлагает better readability и предлагает more freedom in organizing the code.
• Функциональные выражения обычно restricted to be used when there is a need for a conditional declaration.

11. Что такое ДОМ?

• DOM расшифровывается как Document Object Model и представляет собой интерфейс (API) для документов HTML и XML.
• Когда браузер впервые читает (анализирует) HTML-документ, он создает большой объект, действительно большой объект на основе HTML-документа, это DOM.
• Это древовидная структура, созданная на основе HTML-документа.
• DOM используется для взаимодействия и изменения структуры DOM или конкретных элементов или узлов.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document Object Model</title>
</head>
<body>
   <div>
    <p>
        <span></span>
    </p>
    <label></label>
    <input>   // other elements
   </div>
</body>
</html>

Графическое представление DOM приведенного выше кода выглядит так

Объект документа в JavaScript представляет DOM.

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

• JavaScript может изменять все элементы HTML на странице.
• JavaScript может изменить все атрибуты HTML на странице.
• JavaScript может изменить все стили CSS на странице.
• JavaScript может удалять существующие элементы и атрибуты HTML
• JavaScript может добавлять новые элементы и атрибуты HTML
• JavaScript может реагировать на все существующие HTML-события на странице.
• JavaScript может создавать новые HTML-события на странице

12. Объясните, пожалуйста, разницу между атрибутами и свойствами?

• Объекты JS DOM имеют свойства, похожие на переменные экземпляра для определенных элементов.
• Свойство может иметь различные типы данных.
• Доступ к свойствам можно получить, взаимодействуя с объектом в Vanilla JS или используя метод jQuery prop().
• Атрибуты находятся не в DOM, а в HTML.
• Они похожи на свойства, но не так способны.
• Рекомендуется работать со свойствами, а не с атрибутами, если они доступны. В отличие от свойства атрибут имеет строковый тип данных.

13. Что такое файлы cookie? Как вы будете создавать, читать и удалять файлы cookie с помощью JavaScript?

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

Создание файла cookie:

Самый простой способ создать файл cookie с помощью JS — присвоить документу строковое значение.

document.cookie = “key1 = value1; key2 = value2; … ; keyN= valueN; expires = date”;

Чтение файла cookie:

• Чтение файла cookie с помощью JS так же просто, как и его создание.
• Объект cookie — это файл cookie, используйте эту строку всякий раз, когда вы хотите получить доступ к файлу cookie.
• Строка document.cookie содержит список пар name = value, где semicolon separates each pair.
• name представляет имя файла cookie, а value представляет соответствующее строковое значение файла cookie.
• Для разбиения строки на ключ и значение вы можете использовать метод split().

Удаление файла cookie:

• Просто setting the expiration date (истекает) до времени, которое уже прошло.
• Некоторые веб-браузеры не позволяют удалить файл cookie, если вы не укажете путь к файлу cookie.
• Следовательно, определение cookie path важно для обеспечения того, чтобы правильный файл cookie был deleted.assign строковым значением для документа.

14. Что такое распространение событий?

• Когда событие происходит в элементе DOM, это событие не происходит полностью в этом одном элементе.
• В фазе всплытия событие всплывает вверх или переходит к своему родителю, к бабушке и дедушке, к родителю бабушки и дедушки, пока не достигнет всего окна, в то время как на фазе захвата событие начинается с окна вниз к элементу, который вызвал событие или event.target.
• Этот процесс называется распространением событий.

Он имеет 3 фазы.

• Capturing Phase — событие начинается с окна, затем переходит к каждому элементу, пока не достигнет целевого элемента.
• Target Phase — событие достигло целевого элемента.
• Bubbling Phase — событие всплывает вверх от целевого элемента, затем поднимается вверх по каждому элементу, пока не достигнет окна.

15. Что такое пузырьковое воспроизведение событий?

Когда событие происходит в элементе DOM, это событие не происходит полностью в этом одном элементе.

В Bubbling Phase событие всплывает вверх или переходит к своему родителю, к бабушке и дедушке, к родителю бабушки и дедушки, пока не достигнет окна.

Если у нас есть пример такой разметки

<div class="grandparent">
    <div class="parent">
          <div class="child">1</div>
    </div>
</div>

И код javascript

function addEvent(el, event, callback, isCapture = false) {
       if (!el || !event || !callback || typeof callback !== 'function') return;
       if (typeof el === 'string') {
        el = document.querySelector(el);
       }; 
       el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {

       const child = document.querySelector('.child');
       const parent = document.querySelector('.parent');
       const grandparent = document.querySelector('.grandparent');

     addEvent(child, 'click', function (e) {
    console.log('child');
       });
      addEvent(parent, 'click', function (e) {
    console.log('parent');
      });
     addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
     });
     addEvent(document, 'click', function (e) {
    console.log('document');
     });
     addEvent('html', 'click', function (e) {
    console.log('html');
     });
     addEvent(window, 'click', function (e) {
    console.log('window');
     });
});

• Метод addEventListener() имеет третий необязательный параметр useCapture со значением по умолчанию false, событие произойдет в Bubbling phase.
• Если useCapture равно true, событие произойдет в Capturing Phase.
• Если мы нажмем на дочерний элемент, он выведет child, parent, grandparent, html, document and window соответственно на консоль.
• Все это событие — это пузырьковое событие.

16. Что такое захват событий?

Когда событие происходит в элементе DOM, это событие не полностью происходит только в одном этом элементе.
На этапе захвата событие начинается с окна до элемента, вызвавшего событие.

Если у нас есть пример такой разметки

<div class="grandparent">
    <div class="parent">
          <div class="child">1</div>
    </div>
</div>

И код javascript

function addEvent(el, event, callback, isCapture = false) {
     if (!el || !event || !callback || typeof callback !== 'function') return;
     if (typeof el === 'string') {
    el = document.querySelector(el);
     };
     el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
     const child = document.querySelector('.child');
     const parent = document.querySelector('.parent');
     const grandparent = document.querySelector('.grandparent');

     addEvent(child, 'click', function (e) {
    console.log('child');
     }, true);
     addEvent(parent, 'click', function (e) {
    console.log('parent');
     }, true);
  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  }, true);

  addEvent(document, 'click', function (e) {
    console.log('document');
  }, true);

  addEvent('html', 'click', function (e) {
    console.log('html');
  }, true)

  addEvent(window, 'click', function (e) {
    console.log('window');
  }, true)

});

• Метод addEventListener() имеет третий необязательный параметр useCapture со значением по умолчанию false, событие произойдет в Bubbling phase.
• Если useCapture равно true, событие произойдет в Capturing Phase.
• Если мы нажмем на дочерний элемент, он выведет window, document, html, grandparent, parent and child соответственно на консоль.
• Это захват событий

17. Объясните разницу между методами event.preventDefault() и event.stopPropagation()?

• Метод event.preventDefault() предотвращает поведение элемента по умолчанию.
• Если он используется в элементе формы, он предотвращает его отправку.
• Если он используется в якорном элементе, он предотвращает его навигацию.
• При использовании в контекстном меню это предотвращает его отображение или отображение.
• В то время как метод event.stopPropagation() останавливает распространение события.
• Это предотвращает возникновение события на этапе всплытия или захвата.

18. Как узнать, использовался ли в элементе метод event.preventDefault()?

• Мы можем использовать свойство event.defaultPrevented в объекте события.
• Он возвращает логическое значение, указывающее, был ли вызван метод event.preventDefault() в конкретном элементе.

19. Что такое закрытие?

• Closures создаются всякий раз, когда к переменной, определенной за пределами текущей области, обращаются из какой-либо внутренней области.
• Это дает нам доступ к области видимости внешней функции из внутренней функции.
• Другими словами, замыкание — это локально объявленная переменная, которая связана с функцией и остается в памяти, когда связанная функция возвращается.
• Замыкание содержит все локальные переменные, которые были в области видимости во время создания замыкания.
• В JavaScript замыкания создаются каждый раз при создании функции.
  Чтобы использовать замыкание, просто определите функцию внутри другой функции и откройте ее.

Давайте посмотрим на пример

• Без закрытия

function greet(message) {
  console.log(message);
}
function greeter(name, number) {
  return name + " says Hey!! He has " + number + " subscribers";
}
var message = greeter("Tech Talks", 1026);
greet(message);

• С закрытием

function greeter(name, number) {
  var message = name + " says Hey!! He has " + number + " subscribers";
  return function greet() {
    console.log(message);
  };
}
// Generate the closure
var TechTalksGreeter = greeter("Tech Talks", 1026);
// Use the closure
TechTalksGreeter();

20. Сколько способов создать массив в JavaScript?

Существует три разных способа создания массива в JavaScript, а именно:

• Создав экземпляр массива:

var someArray = new Array();

• По конструктору массива:

var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’)

• Используя литерал массива:

var someArray = [value1, value2,…., valueN];

21. Как очистить массив в JavaScript?

Есть четыре способа очистить массив в JavaScript.

• Присвоив пустой массив:

var array1 = [1, 22, 24, 46];
array1 = [ ];

• Присвоив длину массива 0:

var array1 = [1, 22, 24, 46];
array1.length=0;

• Выталкивая элементы массива:

var array1 = [1, 22, 24, 46];
while(array1.length > 0) {
array1.pop();
}

• Используя функцию массива сращивания:

var array1 = [1, 22, 24, 46];
array1.splice(0, array1.length)

Первоначально опубликовано на AnkitKumar.Dev

Если вы, ребята, хотите потренироваться для JavaScript-интервью на пробном видео-интервью, напишите мне по электронной почте [email protected]

Дальнейшее чтение

• Главные преимущества Flutter и почему вы должны попробовать Flutter в своем следующем проекте
• Как реализовать диплинкинг в приложении React Native с помощью React Navigation v5

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

Подписывайтесь на мой YouTube Канал

Следуйте за мной на Medium, Github и Twitter.

Вы также можете найти меня в LinkedIn.

Я также достаточно активен в Dev Community и пишу там небольшие темы.

Ваше здоровье!!! Удачного кодирования!!