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

⚡️ IT-обучение теперь в Telegram! В cвязи с недавнем замедлением Ютуба — лучшие обучающие каналы переехали в Telegram Вот каналы для айтишников: 👩‍💻 Frontend: @Frontend ⚙️ Backend: @Backend 🤓 Общее айти: @portalToIT 👩‍💻 Python: @Python 📱 GitHub: @GitHub 👩‍💻 Java: @Java 👩‍💻 C#: @Csharp 👩‍💻 С/С++: @Cpp 🖥 Базы Данных & SQL: @SQL 👩‍💻 Golang: @Golang 👩‍💻 PHP: @PHP 👩‍💻 Моб. разработка: @MobDev 👩‍💻 Разработка игр: @GameDev 👩‍💻 DevOps: @DevOps 🖥 Data Science: @DataScience 🤔 Хакинг & ИБ: @InfoSec 🐞 Тестирование: @QA 📱 Маркетинг: @Marketing 🖥 Дизайн: @Design ➡️ Сохраняйте себе, чтобы не потерять

🤔 Что известно про отладку js ? Отладка JS кода — это процесс поиска и исправления ошибок, которые возникают в программном обеспечении. Этот процесс важен для выявления логических ошибок, неправильных значений переменных и других проблем, которые могут возникнуть во время разработки. Рассмотрим основные инструменты и методы для отладки JavaScript кода. 🚩Основные инструменты 🟠Консоль разработчика в браузере Все современные браузеры (Chrome, Firefox, Edge, Safari) имеют встроенные инструменты для разработчиков, которые включают консоль для вывода сообщений, просмотра значений переменных и выполнения JavaScript кода в реальном времени. Пример использования консоли в Chrome: 1⃣Откройте инструменты разработчика (F12 или Ctrl+Shift+I). 2⃣Перейдите на вкладку "Console". 3⃣Используйте console.log(), console.error(), console.warn() для вывода сообщений в консоль.

console.log('Это сообщение для отладки');
console.error('Это сообщение об ошибке');
console.warn('Это предупреждающее сообщение');   

🟠Точки останова (breakpoints) Точки останова позволяют приостановить выполнение кода на определенной строке, чтобы можно было исследовать текущее состояние программы (значения переменных, выполнение функций и т.д.). Пример использования точек останова в Chrome: 1⃣Откройте инструменты разработчика и перейдите на вкладку "Sources". 2⃣Найдите и откройте файл JavaScript. 3⃣Щелкните на номер строки, где хотите установить точку останова. 4⃣Обновите страницу и выполнение остановится на установленной точке останова. 🟠Интерактивное выполнение кода Инструменты разработчика позволяют выполнять JavaScript код в реальном времени через консоль. Пример: 1⃣Откройте инструменты разработчика и перейдите на вкладку "Console". 2⃣Введите и выполните произвольный JavaScript код, например:

let x = 10;
let y = 20;
console.log(x + y); // 30

🟠Просмотр вызовов функций (Call Stack) Инструменты разработчика позволяют отслеживать вызовы функций и видеть, как они были вызваны друг другом. Пример: Когда выполнение приостановлено на точке останова, откройте вкладку "Call Stack" в инструментах разработчика, чтобы увидеть последовательность вызовов функций. 🚩Методы Использование console.log() Это простой и распространенный метод для вывода значений переменных и сообщений на разных этапах выполнения кода.

function add(a, b) {
    console.log('Аргументы:', a, b);
    return a + b;
}

let result = add(5, 3);
console.log('Результат:', result);

Отладочные утверждения (Assertions) Метод console.assert() позволяет выполнять утверждения и выводить сообщение, если условие ложно.

let x = 5;
console.assert(x === 5, 'x должно быть равно 5');
console.assert(x === 10, 'x должно быть равно 10'); // Выведет сообщение   

Ставь 👍 и забирай 📚 Базу знаний

Senior-разработчик создал крутейший канал про SQL Благодаря простым картинкам даже новичок научится разрабатывать приложения с использованием баз данных. Присоединяйтесь: @SQL

🔥 Ресурсы для подготовки к работе в IT! 🔥 1️⃣ База собеседований IT – это уникальная коллекция собеседований от реальных топовых компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и многие другие! 🏢 Мы собрали 150+ собеседований, чтобы ты мог подготовиться к интервью с уверенностью и успехом. 2️⃣ База тестовых заданий – твоё секретное оружие для успешного прохождения этапов отбора! 📋 Здесь ты найдёшь 121+ тестовых заданий от тех же топовых компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries. Решай реальные задачи и набирайся опыта для будущих собеседований! 🎯 Присоединяйся к базам и прокачай свои шансы на успешное трудоустройство!

🤔 От чего зависит this ? Значение this зависит от контекста, в котором функция вызывается. Понимание того, как this определяется в различных ситуациях, является ключом к правильному использованию функций и методов в JavaScript. Рассмотрим основные правила и примеры. 🚩Основные правила Глобальный контекст или контекст функции: В глобальном контексте (вне любой функции) или внутри обычной функции (не метода объекта) this ссылается на глобальный объект, который является window в браузере или global в Node.js.

      console.log(this); // window в браузере или global в Node.js

   function globalFunction() {
     console.log(this); // window в браузере или global в Node.js
   }
   
   globalFunction();

Методы объекта: Когда функция вызывается как метод объекта, this ссылается на объект, который использовался для вызова метода.

      const obj = {
     name: 'Alice',
     greet: function() {
       console.log(this.name);
     }
   };
   
   obj.greet(); // 'Alice'

Конструкторы и классы: this ссылается на вновь созданный объект.

      function Person(name) {
     this.name = name;
   }
   
   const person = new Person('Bob');
   console.log(person.name); // 'Bob'
   
   class Animal {
     constructor(name) {
       this.name = name;
     }
   }
   
   const animal = new Animal('Charlie');
   console.log(animal.name); // 'Charlie'

Явное задание this с помощью call, apply и bind: Методы call и apply позволяют вызывать функцию с явно заданным значением this. Метод bind создает новую функцию, которая при вызове имеет определенное значение this.

function sayHello() {
     console.log(this.name);
   }
   
   const person = { name: 'David' };
   
   sayHello.call(person); // 'David'
   sayHello.apply(person); // 'David'
   
   const boundSayHello = sayHello.bind(person);
   boundSayHello(); // 'David'

🚩Значение this зависит от контекста вызова: 🟠В глобальном контексте и обычных функциях this ссылается на глобальный объект (window или global). 🟠В методах объекта this ссылается на сам объект. 🟠В конструкторах и классах this ссылается на вновь созданный объект. 🟠С помощью call, apply и bind можно явно задать значение this. 🟠Стрелочные функции захватывают this из окружающего лексического контекста. 🟠Вложенные функции могут иметь различное значение this, что можно решить с помощью стрелочных функций или сохранения контекста внешней функции. Ставь 👍 и забирай 📚 Базу знаний

CodHub теперь в Telegram! Бесплатные обучающие материалы, которые лучше платных — книги, ресурсы, статьи и курсы топовых вузов страны тут: 👩‍💻 Материалы по Python 👩‍💻 Материалы по Frontend 👩‍💻 Материалы по Java 👩‍💻 Материалы по С# 👩‍💻 Материалы по C/C++ 👩‍💻 Материалы по Хакингу 🖥 Материалы по SQL 👩‍💻 Материалы по Kotlin/Swift 👩‍💻 Материалы по Linux 🐞 Материалы по QA 👩‍💻 Материалы по Go 👩‍💻 Материалы по PHP Подписываетесь: @CodHub_tg

Обучаем Java-разработчиков оплата после выхода на работу В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты. Если задуматься, то все в выигрыше: — ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя; — в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше; — мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут; — мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов. Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку! Узнать больше #реклама 16+ kata.academy О рекламодателе

🤔 Как js понимает, что есть следующий прототип ? Использует скрытое свойство [[Prototype]] (также известное как __proto__) для каждого объекта, чтобы установить связь с его прототипом. Это позволяет объекту наследовать свойства и методы от другого объекта. 🚩Как она работает 🟠Свойство `__proto__`: Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], доступное как proto (неофициальный, но широко поддерживаемый способ доступа). Оно указывает на прототип объекта, от которого этот объект наследует свойства и методы. Это свойство устанавливается автоматически при создании объекта. 🟠Поиск свойства или метода: Когда вы пытаетесь получить доступ к свойству или методу объекта, JavaScript сначала ищет его на самом объекте. Если свойство или метод не найдено, поиск продолжается в объекте, на который указывает proto. Этот процесс продолжается вверх по цепочке прототипов до тех пор, пока не будет найдено свойство или не будет достигнут конец цепочки (обычно это Object.prototype). Рассмотрим пример, чтобы проиллюстрировать, как работает цепочка прототипов:

// Создаем объект Animal
function Animal(name) {
  this.name = name;
}

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

// Создаем объект Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Наследование прототипа Animal
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

const myDog = new Dog('Рекс', 'Лабрадор');

myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

🚩Как JS ищет свойства и методы 1⃣Первый уровень поиска: Когда вы вызываете myDog.speak(), JavaScript сначала ищет метод speak на самом объекте myDog. 2⃣Поиск в прототипе: Поскольку myDog не имеет собственного метода speak, JavaScript смотрит на объект, на который указывает myDog.__proto__. В данном случае это Dog.prototype. 3⃣Продолжение поиска: Если метод speak не найден в Dog.prototype, JavaScript продолжает искать в Dog.prototype.__proto__, который указывает на Animal.prototype. 4⃣Нахождение метода: Метод speak найден в Animal.prototype, и он вызывается. 5⃣Конец цепочки: Если бы метод speak не был найден в Animal.prototype, JavaScript продолжил бы поиск в Animal.prototype.__proto__, который указывает на Object.prototype. Если метод не найден и в Object.prototype, возвращается undefined. 🚩Операторы для проверки цепочки прототипов: Операторвень поиска: Проверяет, является ли объект экземпляром конструктора, следуя по цепочке прототипов.

console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Object); // true

Метод isPrototypeOf: Проверяет, находится ли объект в цепочке прототипов другого объекта.

      console.log(Animal.prototype.isPrototypeOf(myDog)); // true
   console.log(Dog.prototype.isPrototypeOf(myDog)); // true
   

Метод Object.getPrototypeOf: Возвращает прототип объекта.

console.log(Object.getPrototypeOf(myDog) === Dog.prototype); // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true
   

Ставь 👍 и забирай 📚 Базу знаний

👩‍💻 Программирование уже в Telegram! Вот 10 обучающих каналов по самым востребованным направлениям в IT. Выбирай своё направление: 👩‍💻 Frontend: @code_ready 👩‍💻 Backend: @backend_ready 👩‍💻 Python: @python_ready 👩‍💻 Java: @java_ready 👩‍💻 C/C++: @cpp_ready 👩‍💻 C#: @csharp_ready 🖥 Базы Данных & SQL: @sql_ready 👩‍💻 Весь IT: @roadmap_ready 📖 IT Архив: @archive_ready 🖥 Design: @time_design 📌 Ресурсы, гайды, шпаргалки, книги и задачи для каждого языка программирования.

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Как обратиться к методу в цепочке? Нужно вызвать этот метод через объект. Если метод не найден на самом объекте, интерпретатор JavaScript будет подниматься по цепочке прототипов до тех пор, пока не найдет метод или не достигнет вершины цепочки (обычно это Object.prototype). Рассмотрим пример с использованием функций-конструкторов и прототипов:

// Создаем конструктор Animal
function Animal(name) {
  this.name = name;
}

// Добавляем метод speak к прототипу Animal
Animal.prototype.speak = function() {
  console.log(`${this.name} издает звук.`);
};

// Создаем конструктор Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

// Наследуем прототип Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Добавляем метод bark к прототипу Dog
Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

// Создаем экземпляр Dog
const myDog = new Dog('Рекс', 'Лабрадор');

// Обращение к методам
myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

🚩Пошаговое выполнение 1⃣Создание экземпляра `myDog`: Когда вы создаете новый экземпляр Dog, функция-конструктор Dog вызывается, и у нового объекта myDog появляются свойства name и breed. 2⃣Наследование прототипа: Объект myDog наследует методы speak и bark через цепочку прототипов. myDog.__proto__ указывает на Dog.prototype. Dog.prototype.__proto__ указывает на Animal.prototype. 3⃣Вызов метода speak: Когда вы вызываете myDog.speak(), интерпретатор сначала ищет метод speak на объекте myDog. Не найдя его там, он поднимается по цепочке прототипов и находит метод speak в Animal.prototype. 4⃣Вызов метода bark: Когда вы вызываете myDog.bark(), интерпретатор сначала ищет метод bark на объекте myDog. Не найдя его там, он поднимается по цепочке прототипов и находит метод bark в Dog.prototype. 🚩Проверка наличия метода Если вы хотите проверить, где именно находится метод в цепочке прототипов, можно использовать метод hasOwnProperty для проверки собственного свойства объекта и оператор in для проверки наличия свойства в объекте или его прототипах.

console.log(myDog.hasOwnProperty('speak')); // false, так как метод унаследован
console.log('speak' in myDog); // true, так как метод найден в цепочке прототипов

console.log(myDog.hasOwnProperty('bark')); // false, так как метод унаследован
console.log('bark' in myDog); // true, так как метод найден в цепочке прототипов

Чтобы обратиться к методу в цепочке прототипов, достаточно вызвать метод через объект. Если метод не найден на самом объекте, JavaScript будет подниматься по цепочке прототипов до тех пор, пока не найдет метод или не достигнет вершины цепочки (обычно это Object.prototype). Ставь 👍 и забирай 📚 Базу знаний

Хайс — банк для бизнеса, который ценит ваше время Счёт ИП, дебетовая карта физлица, поддержка без роботов и только нужные сервисы — всё в одном приложении. Откройте расчетный счет в Хайсе и получите 3 месяца бесплатного обслуживания в подарок! Перейти на сайт Финансовые услуги оказывает: АО КБ "Модульбанк". #реклама 16+ hicebank.ru О рекламодателе

🤔 Что сделать, чтобы settimeout выполнился позже ? Функция setTimeout используется для выполнения кода через определенное количество времени. Иногда возникает необходимость, чтобы setTimeout выполнялся позже или задержка была увеличена. Для этого можно изменить время задержки, переданное в качестве второго аргумента функции setTimeout. 🚩Пример использования setTimeout с увеличением задержки Если вам нужно, чтобы код выполнялся через более длительное время, вы можете просто увеличить значение задержки (в миллисекундах).

// Выполнить функцию через 2 секунды (2000 миллисекунд)
setTimeout(() => {
  console.log('Прошло 2 секунды');
}, 2000);

// Выполнить ту же функцию через 5 секунд (5000 миллисекунд)
setTimeout(() => {
  console.log('Прошло 5 секунд');
}, 5000);

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

let delay = 3000; // Задержка в миллисекундах (3 секунды)

// Выполнить функцию через динамически заданное время
setTimeout(() => {
  console.log(`Прошло ${delay / 1000} секунд`);
}, delay);

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

let delay = 1000; // Начальная задержка в миллисекундах (1 секунда)
let increment = 1000; // Увеличение задержки на 1 секунду

function delayedFunction() {
  console.log(`Функция выполнена после ${delay / 1000} секунд`);
  delay += increment; // Увеличить задержку
  setTimeout(delayedFunction, delay); // Вызвать функцию с новой задержкой
}

// Начальный вызов функции
setTimeout(delayedFunction, delay);

Изменение существующей задержки Если нужно изменить задержку для уже запланированного вызова setTimeout, этого сделать нельзя напрямую. Однако, можно отменить текущий таймер и запланировать новый с новой задержкой.

let timeoutId;
let delay = 2000; // Начальная задержка 2 секунды

function startTimeout() {
  timeoutId = setTimeout(() => {
    console.log('Таймер сработал');
  }, delay);
}

function changeDelay(newDelay) {
  clearTimeout(timeoutId); // Отменить текущий таймер
  delay = newDelay; // Обновить задержку
  startTimeout(); // Запланировать новый таймер с новой задержкой
}

// Запустить начальный таймер
startTimeout();

// Изменить задержку через 1 секунду
setTimeout(() => {
  changeDelay(5000); // Изменить задержку на 5 секунд
}, 1000);

Ставь 👍 и забирай 📚 Базу знаний

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