Собеседования по JavaScript стали более сложными из-за широкого круга тем, которые могут быть затронуты. Техническое интервью может включать алгоритмические вопросы или общие запросы JavaScript. В качестве альтернативы компания может попросить вас создать проект и объяснить свой подход к написанию кода.

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

Прежде чем приступить к технической подготовке, важно спросить себя, как подходить к ней структурировано, а не прыгать от одной статьи к другой или пытаться проводить случайные алгоритмические тесты.

Старый и новый Javascript (var и let, const и область видимости)

Некоторые понятия имели решающее значение для понимания в прошлом, но их важность уменьшилась. Если вы начали изучать JavaScript с 2015 года, вы можете ответить на следующие вопросы, заявив, что они устарели:

  1. Что такое немедленно вызываемая функция и вариант ее использования? Это функция, которая вызывается при объявлении. В основном он использовался для создания определенной области для определенной функции в программе (в настоящее время у нас есть классы, модули и т. д.).
  2. Что такое замыкания и как они работают?
  3. Каков вариант использования var?

Ajax,.fetch(), обещания и асинхронность/ожидание

Ajax — это традиционная техника, которая была представлена ​​на ранних стадиях Javascript, и ее синтаксис имеет некоторые шаблоны. Его функция заключалась в том, чтобы перезагрузить часть данных для вашего веб-сайта без необходимости перезагрузки сети. Для получения дополнительной информации проверьте: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

.fetch() — это текущий способ получения и отправки данных и связи с сервером. Если вы работали с XMLHttpRequest раньше, вы помните проблемы и шаблоны, с которыми вам приходилось иметь дело. API выборки возвращает обещание.

Что такое обещание? Обещание в JavaScript представляет собой возможное завершение задачи. Когда JavaScript запускается в браузере, промисы хранятся в очереди сообщений, а не в стеке, поэтому остальная часть кода продолжается нормально (помните, что JavaScript работает в одном потоке).

async await В чем разница между Promise и Async/Await? В общем, Async/Await — это новый синтаксический сахар, который позволяет вам работать с промисами синхронно, так что вы не попадете в ад обратных вызовов».

const fetchPromise = fetch("https://random-data-api.com/api/app/random_app");
fetchPromise.then(response => response.json);
// retrieve the data with a promise
async function logJSONData() {
  const response = await fetch("https://random-data-api.com/api/app/random_app");
  const jsonify = await response.json();
  console.log(jsonData);
}
// retrieve the data with an async/await

Что такое среда выполнения Javascript и цикл обработки событий?

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

Важно отметить, что JavaScript не ограничивается работой в браузерах; он также может работать в Node.js или Deno.

Стоит знать, что при запуске Javascript в браузере запускается цикл обработки событий. Цикл событий — это особый жизненный цикл, в котором:

1. Функции хранятся в стеке, который можно проверить и отладить. Стек вызовов инициирует выполнение методов и любых других методов, которые они вызывают, размещая их друг над другом. Затем браузер начинает очищать стек сверху по принципу LIFO (последним пришел, первым вышел). Это означает, что он всегда будет сначала обрабатывать самый верхний вызов в стеке.

2. Обещания, асинхронные вызовы и HTTP-запросы хранятся в так называемой очереди сообщений
3. Объекты и массивы хранятся в куче.

Неизменяемость в Javascript

Стоит знать, что во время собеседований часто можно услышать вопросы о неизменности Javascript. Вопрос может иметь различные формы, но давайте сначала углубимся в тему и объясним ее. Javascript имеет примитивные типы: Boolean, Number и String. Когда мы создаем переменную примитивного типа, память сразу же выделяется в стек. С другой стороны, когда мы создаем массив или объект, браузер (среда выполнения) создает ссылочное значение, которое сохраняется в куче. И у вас может быть несколько ссылок, указывающих на один и тот же объект в куче.

let number = 5;
let newNumber = number;
number = 1;
// the variable newNumber still equals to 5, while we changed the variable number to 1


let array = [1, 2, 3]
let newArray = array; // newArray is just pointing with its reference to the heap to array
array.push(4);
// newArray and array are both pointing to: [1,2,3,4]

Функции обратного вызова

Обратный вызов Javascript — это функция, которая должна выполняться после того, как ее родительская функция (более высокого порядка) завершила свое выполнение. В настоящее время мы можем в основном говорить о стрелочной функции.

setTimeout(() => {
  console.log('Yay! I am a callback function');
}, 1000) 
// arrow function act as our callback function triggered after 1 second

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

  1. Что такое ложные значения в JavaScript?
  2. Что такое цикл событий в JavaScript и как он работает?
  3. В чем разница между var, let и const?
  4. Объясните концепцию неизменности в JavaScript.
  5. Как вы можете манипулировать DOM в JavaScript?
  6. Какие существуют типы данных в JavaScript?
  7. Объясните подъем.
  8. Что такое стрелочные функции?
  9. Что такое функция высшего порядка в JavaScript?
  10. В чем разница между let array = [1,2,3]; array.push(4) и [...array, 4]?

В заключение в этой статье были рассмотрены наиболее важные концепции JavaScript. Хотя собеседования могут различаться, эта «обманка» позволяет вам ознакомиться со всеми необходимыми концепциями и подготовиться к собеседованию.

Если вам понравилась эта статья, не забудьте аплодировать