JS собеседования – Telegram
JS собеседования
470 subscribers
108 photos
108 links
Подготовка к собеседованиям по JavaScript

Еще больше разобранных вопросов на сайте https://frontview-it.ru

Frontend собеседования - @frontview_it
Frontend работа - @frontview_vacancies
Все IT вакансии - @frontview_all_vacancies
Download Telegram
Асинхронность и синхронность — ключевые концепции, определяющие порядок выполнения кода.

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


console.log('First');
console.log('Second'); // Выполнится только после завершения первой строки


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


console.log('First');
setTimeout(() => console.log('Second'), 1000); // Выполнится через 1 секунду, не блокируя поток
console.log('Third'); // Выполнится сразу после 'First'


Асинхронность достигается через колбэки, промисы и async/await, что делает код более эффективным для задач с ожиданием.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍72
'use strict' — это директива, которая включает строгий режим выполнения кода. Она помогает избежать неявных ошибок, запрещая использование небезопасных конструкций и улучшая оптимизацию кода.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍81
Чтобы избежать callback hell, можно использовать промисы (Promises) или синтаксис async/await. Промисы позволяют организовать асинхронный код в цепочку, а async/await делает его более читаемым, похожим на синхронный.


// С промисами
fetchData()
.then(response => processData(response))
.then(result => saveData(result))
.catch(error => console.error(error));

// С async/await
async function handleData() {
try {
const response = await fetchData();
const result = await processData(response);
await saveData(result);
} catch (error) {
console.error(error);
}
}


Также можно разбивать код на отдельные функции, чтобы избежать вложенности. Это улучшает читаемость и поддерживаемость.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61
Метод slice возвращает новый массив или строку, содержащую копию части исходного массива или строки. Он принимает два аргумента: начальный индекс (включительно) и конечный индекс (не включительно), при этом не изменяя исходный массив или строку.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4💯4
🔘 Для подключения внешнего JavaScript-файла к HTML-странице используется тег <noscript> с атрибутом src. Этот тег обычно размещается внутри <head> или перед закрывающим тегом </body>.


<noscript src="path/to/noscript.js"></noscript>


Атрибут src указывает путь к файлу скрипта. Если файл находится в той же папке, что и HTML-документ, достаточно указать имя файла. Для файлов в других папках или на внешних ресурсах используется полный или относительный путь.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🤩2
Условное присваивание с помощью логических операторов выполняется через операторы && и ||. Например, a = b || c присвоит переменной a значение b, если оно истинно, иначе — значение c.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
🟡 Метод Math.round() округляет число до ближайшего целого. Если дробная часть числа больше или равна 0.5, число округляется вверх, иначе — вниз.


const num1 = 3.7;
const num2 = 3.2;
console.log(Math.round(num1)); // 4
console.log(Math.round(num2)); // 3


Для отрицательных чисел правило аналогично: -3.7 округляется до -4, а -3.2 до -3. Метод всегда возвращает целое число, удаляя дробную часть.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
var имеет функциональную область видимости и может быть переопределен или объявлен повторно. let и const имеют блочную область видимости, но let позволяет изменять значение переменной, а const — нет, так как она предназначена для констант.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51
▶️Метод concat используется для объединения массивов или добавления элементов в конец массива. Он не изменяет исходный массив, а возвращает новый массив, содержащий результат объединения.


const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2); // [1, 2, 3, 4]


Метод может принимать несколько аргументов, включая массивы или отдельные элементы.


const arr = [1];
const newArr = arr.concat(2, [3, 4]); // [1, 2, 3, 4]


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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍71
Цикл do...while выполняет блок кода как минимум один раз, а затем продолжает выполнение, пока условие истинно. В отличие от while, условие проверяется после выполнения тела цикла, что гарантирует хотя бы одну итерацию.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51
➡️ Таймер, созданный с помощью setInterval, можно остановить с помощью функции clearInterval, передав ей идентификатор, возвращенный setInterval. Это позволяет прервать выполнение циклического вызова функции.


const intervalId = setInterval(() => {
console.log("Tick");
}, 1000);

clearInterval(intervalId); // Остановка таймера


Идентификатор intervalId сохраняется при создании таймера и используется для его остановки. Без вызова clearInterval таймер будет выполняться бесконечно.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61
Метод map применяет функцию к каждому элементу массива, возвращая новый массив с результатами. Метод filter создает новый массив, включая только те элементы, которые удовлетворяют условию в переданной функции. Метод reduce последовательно обрабатывает элементы массива, накапливая результат на основе переданной функции и начального значения.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
👉 localStorage и sessionStorage — это механизмы хранения данных в браузере, позволяющие сохранять пары ключ-значение. Данные в localStorage сохраняются даже после закрытия браузера и не имеют срока действия, пока не будут удалены вручную. sessionStorage работает аналогично, но данные сохраняются только на время сессии и удаляются при закрытии вкладки или браузера.


localStorage.setItem('key', 'value'); // Сохранение данных
const data = localStorage.getItem('key'); // Получение данных


Оба хранилища доступны только в рамках одного источника (протокол, домен, порт) и поддерживают только строковые данные. Для работы с объектами необходимо использовать JSON.stringify и JSON.parse.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61
Event Bubbling — это процесс, при котором событие сначала обрабатывается на целевом элементе, а затем всплывает вверх по дереву DOM к его родительским элементам. Event Capturing — это противоположный процесс, при котором событие сначала обрабатывается на верхнем уровне дерева DOM и затем погружается вниз до целевого элемента.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
🟢Hoisting — это механизм, при котором объявления переменных и функций перемещаются вверх своей области видимости перед выполнением кода. Для переменных, объявленных через var, hoisting поднимает только объявление, но не инициализацию, что может привести к undefined.


console.log(x); // undefined, так как объявление поднято, но не значение
var x = 5;

foo(); // "Hello", функция поднята полностью
function foo() {
console.log("Hello");
}


Для let и const hoisting также происходит, но доступ к переменным до объявления вызывает ошибку.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51
Тернарный оператор позволяет записать условное выражение в компактной форме: условие ? выражение1 : выражение2. Если условие истинно, выполняется выражение1, иначе — выражение2. Он часто используется для присваивания значений или возврата результатов в зависимости от условия.

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41
Объект в JS — это коллекция пар ключ-значение, где ключи являются строками (или символами), а значения могут быть любого типа. Объекты используются для хранения структурированных данных.

Добавить свойство в объект можно несколькими способами. Через точечную нотацию:


const obj = {};
obj.name = "John"; // Добавление свойства name


Или через квадратные скобки:


obj["age"] = 30; // Добавление свойства age


Также свойства можно добавить при создании объекта:


const obj = { name: "John", age: 30 };


Эти способы позволяют динамически изменять структуру объекта.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍71
🔴Для преобразования строки в число в JS можно использовать несколько методов.

Функция Number() преобразует строку в число, включая числа с плавающей точкой:


const num = Number("42"); // 42


Метод parseInt() преобразует строку в целое число, игнорируя нечисловые символы:


const int = parseInt("42px"); // 42


Метод parseFloat() преобразует строку в число с плавающей точкой:


const float = parseFloat("42.5"); // 42.5


Также можно использовать унарный оператор +:


const num = +"42"; // 42


Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
event.preventDefault() отменяет стандартное поведение элемента, например, отправку формы или переход по ссылке. event.stopPropagation() останавливает всплытие события по DOM-дереву, предотвращая его обработку родительскими элементами.


document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault(); // Отменяет переход по ссылке
event.stopPropagation(); // Останавливает всплытие
});


Эти методы полезны для управления поведением событий и предотвращения нежелательных действий.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
▶️Объектная модель документа (DOM) — это программный интерфейс для HTML и XML документов, который представляет структуру документа в виде дерева объектов. Каждый узел этого дерева соответствует элементу, атрибуту или тексту на странице.


const element = document.getElementById('example');
element.textContent = 'Hello, DOM!';


DOM позволяет изменять структуру, стили и содержимое документа динамически с помощью JavaScript. Это основа для интерактивных веб-приложений.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
▶️Promise.all принимает массив промисов и возвращает новый промис, который выполнится, когда все переданные промисы завершатся успешно. Если хотя бы один промис завершится с ошибкой, весь Promise.all также завершится с ошибкой.


Promise.all([promise1, promise2])
.then(results => console.log(results));


Promise.race возвращает промис, который завершается, как только завершается первый промис из массива, независимо от его результата (успех или ошибка).


Promise.race([promise1, promise2])
.then(result => console.log(result));


Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ JS собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6