Frontend | Вопросы собесов

Какие особенности в js ? Спросят с вероятностью 3% Это высокоуровневый, интерпретируемый язык программирования, который обладает рядом уникальных особенностей и возможностей. Рассмотрим основные из них: 1️⃣Динамическая типизация Является языком с динамической типизацией, что означает, что тип переменной определяется во время выполнения, а не во время компиляции. Тип переменной может изменяться в процессе выполнения программы.

let variable = 42; // Число
variable = 'Hello, world!'; // Строка

2️⃣Функции первого класса Являются объектами первого класса, что означает, что функции могут быть присвоены переменным, переданы как аргументы другим функциям и возвращены из других функций.

function greet(name) {
  return `Hello, ${name}`;
}

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
  return fn(value);
}

console.log(executeFunction(greet, 'Bob')); // Hello, Bob

3️⃣Замыкания (Closures) Это функции, которые имеют доступ к переменным из своей внешней функции даже после того, как внешняя функция завершила выполнение. Это позволяет создавать функции с привязанными к ним переменными из внешнего окружения.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4️⃣Прототипное наследование Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.

const animal = {
  speak: function() {
    console.log(`${this.name} издает звук`);
  }
};

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук

5️⃣Асинхронность и события Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения. Использование коллбеков:

function fetchData(callback) {
  setTimeout(() => {
    callback('Данные получены');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование промисов:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование async/await:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // Данные получены (через 1 секунду)
}

getData();

6️⃣Интуитивно понятная работа с объектами Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов. Деструктуризация:

const person = {
  name: 'Alice',
  age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

Операторы расширения:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

Обладает множеством уникальных особенностей, таких как динамическая типизация, функции первого класса, замыкания, прототипное наследование, асинхронное программирование с коллбеками, промисами и async/await, интуитивно понятная работа с объектами и массивами, а также событийно-ориентированное программирование. Эти возможности делают его мощным и гибким инструментом для веб-разработки и других приложений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Jobski - твой помощник при поиске работы в IT Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий. Узнать больше #реклама jobski.ru О рекламодателе

Что такое dns ? Спросят с вероятностью 3% DNS (Domain Name System) — это система, которая переводит доменные имена, понятные человеку, в IP-адреса, понятные компьютерам и сетевым устройствам. Основная задача DNS — облегчить доступ к ресурсам в Интернете, позволяя использовать легко запоминаемые доменные имена вместо сложных числовых IP-адресов. Основные функции 1️⃣Разрешение доменных имен: ✅Основная функция DNS заключается в преобразовании доменных имен (например, www.example.com) в соответствующие им IP-адреса (например, 93.184.216.34), чтобы веб-браузеры и другие интернет-клиенты могли находить и обращаться к нужным ресурсам. 2️⃣Обратное разрешение (Reverse DNS): ✅Обратное разрешение — это процесс преобразования IP-адресов обратно в доменные имена. Это используется для проверки подлинности или при проведении сетевой диагностики. Как он работает Процесс разрешения доменного имени включает несколько этапов и компонентов: 1️⃣Введение DNS-кэша: ✅Браузер и операционная система сначала проверяют свои локальные кэши на наличие записи о недавно разрешенном доменном имени. Если запись найдена и не истекла, используется закэшированный IP-адрес. 2️⃣Запрос к DNS-серверу: ✅Если локальный кэш не содержит нужной записи, запрос отправляется к DNS-серверу вашего интернет-провайдера (ISP) или другого конфигурируемого DNS-сервера (например, Google Public DNS). 3️⃣Рекурсивный запрос: ✅DNS-сервер провайдера может выполнять рекурсивный запрос, запрашивая информацию у других DNS-серверов, если он сам не знает ответа. Этот процесс включает несколько шагов: ✅Запрос к корневому DNS-серверу. ✅Корневой сервер направляет к DNS-серверу верхнего уровня домена (TLD, например, .com, .org). ✅Сервер верхнего уровня направляет к авторитетному DNS-серверу конкретного домена. 4️⃣Авторитетные DNS-серверы: ✅Авторитетный DNS-сервер для домена (например, example.com) содержит окончательную информацию об IP-адресе для запрашиваемого доменного имени и возвращает её DNS-серверу провайдера. 5️⃣Ответ клиенту: ✅DNS-сервер провайдера кэширует полученный IP-адрес и отправляет его обратно клиенту (вашему браузеру или операционной системе). 6️⃣Доступ к ресурсу: ✅Клиент использует полученный IP-адрес для установления соединения с нужным сервером и получения запрашиваемых данных. Допустим, вы вводите в браузере www.example.com: 1️⃣Браузер проверяет локальный DNS-кэш. 2️⃣Если записи нет, браузер отправляет запрос на DNS-сервер провайдера. 3️⃣DNS-сервер провайдера выполняет рекурсивный запрос: ✅Запрашивает корневой DNS-сервер. ✅Корневой сервер направляет к серверу TLD .com. ✅Сервер TLD направляет к авторитетному DNS-серверу example.com. 4️⃣Авторитетный DNS-сервер example.com возвращает IP-адрес, например, 93.184.216.34. 5️⃣DNS-сервер провайдера кэширует этот IP-адрес и возвращает его браузеру. 6️⃣Браузер устанавливает соединение с сервером по IP-адресу 93.184.216.34 и загружает страницу. DNS (Domain Name System) — это система, которая преобразует доменные имена в IP-адреса и наоборот. Она позволяет пользователям вводить легко запоминаемые доменные имена вместо сложных IP-адресов для доступа к ресурсам в Интернете. DNS включает в себя процессы проверки кэша, рекурсивные запросы к DNS-серверам и использование различных типов записей для разрешения имен и управления ресурсами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Коммутатор ЦОД MES5500-32 Eltex за 1 минуту - 32x40G/100G (QSFP+ / QSFP28) - 2x10G (SFP+) - RS-232 (RJ-45) - OOB - USB 2.0 Пропускная способность - 6,4 Тбит/с 2 модуля питания с горячей заменой: PM600-220/12 — 220В AC PM600-48/12 — 48В DC Настройка: - CLI через Telnet, SSH (Cisco-like) - веб-интерфейс - SNMP Комплектация: - Сертификат  - Паспорт устройства  - Комплект крепления в 19"стойку - Пылезащитные заглушки для портов Узнать цену #реклама eltexcm.ru О рекламодателе

👨‍💻 Джун: Слушай, вот стажировку я прошел, где теперь можно чекнуть вакансии на работу? 🍷 Мидл: Ооо, тебе помогут ребята с канала Джун работает 💯 Карьеру нужно начинать с хорошими работодателями. Твое резюме будет ликовать, ведь контент выходит каждый день, работа ждет тебя, мой друг! 😏 Не упускай возможность и подписывайся, чтобы не потерять

Что такое merge и rebase, в чем отличие друг от друга ? Спросят с вероятностью 7% merge и rebase — это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. 1️⃣Предположим, у вас есть две ветки: main и feature. 2️⃣В ветке feature вы сделали несколько коммитов. 3️⃣Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

В результате получается история, включающая коммит слияния:

A---B---C---F---G (main)
     \       /
      D---E (feature)

Где F и G — коммиты в ветке main, а D и E — коммиты в ветке feature. Коммит G — это коммит слияния, который объединяет изменения из feature в main. Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. 1️⃣Предположим, у вас есть две ветки: main и feature. 1️⃣В ветке feature вы сделали несколько коммитов. 3️⃣Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

В результате история переписывается, как если бы коммиты из feature были сделаны на основе самой свежей версии main:

A---B---C---F---G (main)
                 \
                  D'---E' (feature)

Где D' и E' — это новые коммиты, созданные при перебазировании, основанные на последних изменениях из main. Основные отличия 1️⃣История коммитов: ✅Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. ✅Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 2️⃣Коммиты слияния: ✅Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. ✅Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 3️⃣Конфликты: ✅Merge: Конфликты решаются один раз при слиянии. ✅Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 4️⃣Применение: ✅Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. ✅Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Когда использовать ✅Используйте `merge`, когда вы хотите сохранить всю историю разработки, включая все ветвления и слияния. Это полезно для командной работы, где важно видеть весь контекст изменений. ✅Используйте rebase, когда вы хотите поддерживать чистую и линейную историю. Это особенно полезно для интеграции изменений в основную ветку перед созданием pull request'ов, чтобы история коммитов была более понятной. Merge объединяет изменения из одной ветки в другую, создавая новый коммит слияния и сохраняя всю историю. Rebase переписывает историю, делая её линейной, перемещая коммиты из одной ветки на базу другой. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

📕 Прогер, как ты расширяешь свой кругозор в сфере IT? Не достаточно знать что-то одно, мысля глобально и изучая смежные отрасли, ты не только становишься умнее, но и увеличиваешь свою востребованность и свой заработок. 🗿 Не обязательно читать заумные книги и смотреть подкасты - это долго. У нас есть решение: 🔥 Полезные статьи - концентрат знаний. 🔥 Советы - короткие сообщения, которые будут увеличивать твою эффективность. 🔥 Инструменты - tool-сайты в разы упростят и ускорят твою работу. 🧑‍💻 Время, силы, желание - ресурсы, которые нужно использовать с умом. Подпишись на канал Заметки прогера, IT ниша скажет "спасибо" за такого специалиста.

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

😭 Джун: Как мне найти работу в IT, если опыта нет? 🧑‍💻 Мидл: Просто зайди на канал Джун стажер и подбери стажировку по душе. 📕 Админы отбирают самые сочные вакансии от ведущих компаний, к тому же контент выходит каждый день. 🔥 Не упускай возможность и подписывайся, чтобы не потерять

Что такое hoisting ? Спросят с вероятностью 7% Поднятие (hoisting) — это механизм, при котором объявления переменных и функций поднимаются вверх своей области видимости во время компиляции, до фактического выполнения кода. Это означает, что вы можете использовать переменные и функции до их объявления в коде. Hoisting переменных Для переменных, объявленных с использованием var, только само объявление поднимается, а присвоение значения остается на своем месте. Это может привести к неожиданным результатам.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

Интерпретируется как:

var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5

Переменные, объявленные с помощью let и const, также поднимаются, но находятся в так называемой "временной мертвой зоне" (temporal dead zone, TDZ) до тех пор, пока выполнение кода не дойдет до строки их объявления. Попытка доступа к таким переменным до их объявления вызывает ошибку.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
console.log(c); // 15

Hoisting функций Функции, объявленные с помощью function declaration, полностью поднимаются — как объявление, так и их определение. Это позволяет вызывать функции до их объявления в коде.

hoistedFunction(); // "This function is hoisted"

function hoistedFunction() {
  console.log("This function is hoisted");
}

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

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
  console.log("This function is not hoisted");
};

Важные моменты 1️⃣Переменные, объявленные с помощью `var`, поднимаются, но их значение становится undefined до присвоения. 2️⃣Переменные, объявленные с помощью let ито такое поднимаются, но остаются недоступными до фактического объявления в коде, что вызывает ошибку при доступе. 3️⃣Функции, объявленные как function declaration, полностью поднимаются и могут быть вызваны до своего объявления. 4️⃣Функции, объявленные как function expression, поднимаются только как переменные, а присвоение происходит на месте, что делает их недоступными до присвоения. Поднятие (hoisting) — это механизм, при котором объявления переменных и функций поднимаются вверх своей области видимости во время компиляции, позволяя использовать их до фактического объявления в коде. Однако, переменные, объявленные с let и const, остаются недоступными до их фактического объявления. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

👨‍💻 Будущий специалист, ты знаешь, какая самая частая ошибка новичка в сфере IT? Отсутствие практики убивает в тебе потенциал ✈️ Как с этим бороться, мой друг? Найди работу и прокачивай свои скилы на конкретных задачах 🔥 У нас ты будешь находить большое количество вакансий каждый день. Понятие работы перестанет быть для тебя размытым. Подпишись на канал и не откладывай свой прогресс в долгий ящик.

Бесплатное обучение по продвижению бизнеса в интернете 5 августа стартует интенсив для предпринимателей от Яндекс Рекламы. За 4 недели научим запускать рекламу в интернете, даже если раньше вы никогда этого не делали. В программе: Реклама в Яндексе — какие выбрать инструменты для продвижения бизнеса Юнит-экономика — как рассчитать бюджет на рекламу, чтобы не уйти в минус УТП для вашего бизнеса — как выделяться на фоне конкурентов Запуск рекламы — как самостоятельно настроить кампанию Анализ и оптимизация — что улучшить в рекламе Вас ждут: 5 вебинаров от практикующих экспертов Яндекса Задания с самопроверкой и дополнительные материалы Закрытое сообщество предпринимателей для обмена опытом Узнать подробности и зарегистрироваться: Зарегистрироваться #реклама 16+ yandex.ru О рекламодателе

🧑‍💻 Если твой английский позволяет ответить только на вопрос "Do you speak English", то с этим нужно что-то делать, будучи программистом. 🫤 Ты в курсе, что ... - говорят по-английски — 20% из всех людей. - Большое кол-во IT документации написано на английском. Хочешь понимать код лучше? Изучи язык, который используется в его основе. 📕 На нашем канале ты постепенно будешь набираться опыта, в этом тебе помогут: - Тесты для изучения английского: проверьте свои знания на практике. - Английский через мемы: учите язык весело и с интересом. - Шпаргалки для повторения: закрепите знания быстро и эффективно. - Английский сленг программиста: станьте настоящим профи в коммуникации. 🔥 Маленький шаг в изучении иностранного откроет перед тобой большие возможности будущего специалиста и значительно повысит твое зп. 🌸 Подпишись, do it!

ТОП-4 Курса по Data Science Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. 🎓Освойте продвинутую математику с самых азов 💻Научитесь создавать ML-модели и работать с нейронными сетями ✅Получите реальный опыт на практических проектах 🏠Начните работать удаленно 💰Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

📌 Вопрос из таблицы? 💬 Спрашивают в ЦИФРА% собеседований Запросы к серверу можно писать в различных частях кода в зависимости от архитектуры вашего приложения и используемых технологий. Основное правило — писать серверные запросы там, где это наиболее логично с точки зрения структуры и логики вашего кода. Рассмотрим несколько распространенных подходов и ситуаций. 1️⃣ Клиент-серверные приложения 🤔 Веб-приложения (JavaScript/TypeScript) Для веб-приложений запросы к серверу обычно выполняются на стороне клиента (в браузере) с использованием JavaScript или TypeScript. Чаще всего это делается с помощью API, таких как fetch или axios. Пример с использованием fetch:

function fetchData() {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

🤔 Веб-приложения с использованием библиотек/фреймворков Когда вы используете фреймворки, такие как React, Angular или Vue, запросы к серверу обычно выполняются в компонентах или сервисах. Пример с использованием React:

import React, { useEffect, useState } from 'react';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <div>
            {data ? <div>Data: {data}</div> : <div>Loading...</div>}
        </div>
    );
}

🤔 Мобильные приложения Для мобильных приложений, разработанных с использованием таких технологий, как React Native, Swift или Kotlin, запросы к серверу также выполняются в коде приложения. Пример с использованием React Native:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <View>
            {data ? <Text>Data: {data}</Text> : <Text>Loading...</Text>}
        </View>
    );
}

2️⃣ Серверные приложения 🤔 Серверные скрипты (Node.js) В случае серверных приложений на Node.js запросы к другим серверам могут выполняться для интеграции с внешними API или микросервисами. Пример с использованием axios:

const axios = require('axios');

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

🤔 Бэкенд-фреймворки (Django, Flask) В бэкенд-фреймворках, таких как Django или Flask, запросы к другим серверам часто выполняются в функциях обработки запросов (view-функциях) или в бизнес-логике приложения. Пример с использованием Django (Python):

import requests
from django.http import JsonResponse

def fetch_data(request):
    response = requests.get('https://api.example.com/data')
    if response.status_code == 200:
        return JsonResponse(response.json())
    else:
        return JsonResponse({'error': 'Failed to fetch data'}, status=response.status_code)

🤔 Заключение Запросы к серверу можно писать в различных частях вашего кода в зависимости от архитектуры приложения и используемых технологий. Важно, чтобы запросы выполнялись в логически обоснованных местах, а их логика была хорошо инкапсулирована и легко тестируема. 🤔 Краткое объяснение Запросы к серверу пишут в коде клиента или сервера, в зависимости от архитектуры приложения. Важно делать это в логически обоснованных местах и обрабатывать возможные ошибки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе