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

Обучаем 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 О рекламодателе

🤔Что такое цепочка прототипов ? Цепочка прототипов (prototype chain) — это механизм в JavaScript, с помощью которого объекты могут наследовать свойства и методы друг у друга. Этот механизм лежит в основе объектно-ориентированной модели JavaScript. 🚩Основные концепции 🟠Прототипы Каждый объект в JavaScript имеет свойство __proto__ (или скрытое свойство [[Prototype]]), которое указывает на его прототип. Прототип — это другой объект, от которого объект наследует свойства и методы. Объекты могут быть созданы с использованием конструктора, и все объекты, созданные одним и тем же конструктором, наследуют от одного и того же прототипа. 🟠Цепочка прототипов Если свойство или метод не найдено у объекта, JavaScript будет искать его в прототипе объекта. Этот процесс продолжается вверх по цепочке прототипов до тех пор, пока не будет найдено свойство или не будет достигнут конец цепочки (обычно это Object.prototype). Если свойство не найдено в цепочке прототипов, результатом будет undefined. Рассмотрим простой пример, чтобы проиллюстрировать, как работает цепочка прототипов: В этом примере myDog наследует метод speak от Animal.prototype и метод bark от Dog.prototype. Когда вызывается myDog.speak(), JavaScript сначала ищет метод speak в myDog. Поскольку его там нет, он переходит к Dog.prototype, где тоже его не находит, и затем переходит к Animal.prototype, где метод speak найден и выполняется.

// Создаем объект 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

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

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

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

🚩Особенности 🟠Прототипы по умолчанию Все объекты, созданные с использованием литерала объекта {}, имеют в качестве прототипа Object.prototype. Все функции, включая функции-конструкторы, имеют свойство prototype, которое указывает на прототип объектов, созданных этой функцией. 🟠Методы исодит к Animal.pro. Методы, такие как toString(), hasOwnProperty(), isPrototypeOf(), находятся в Object.prototype и доступны всем объектам через цепочку прототипов.

const obj = {};
console.log(obj.toString()); // [object Object]
console.log(obj.hasOwnProperty('toString')); // false, т.к. метод унаследован

🟠Изменение прототипа объекта Прототип объекта можно изменить с помощью метода Object.setPrototypeOf(), но это не рекомендуется из-за потенциальных проблем с производительностью.

const cat = {
  meow() {
    console.log('Мяу!');
  }
};

const myCat = Object.create(cat);
myCat.name = 'Мурка';
myCat.meow(); // Мурка мяукает.

Object.setPrototypeOf(myCat, {});
myCat.meow(); // Ошибка, так как метод больше не существует в цепочке прототипов

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

Большая конференция Яндекс Рекламы на ВТБ Арене 22 октября приглашаем маркетологов и специалистов по рекламе обсудить новые технологии и рекламные тренды. Ключевые участники рынка поделятся опытом и расскажут: ✅ Как развиваться специалистам в сфере рекламы ✅ Как продвигаться и продавать в интернете ✅ Какие тренды в маркетинге появляются сейчас Вас ждут доклады на актуальные темы, конкурсы и возможности для нетворкинга. Встречаемся 22 октября на ВТБ Арене. Будем вести прямую трансляцию — вы сможете посмотреть выступления, даже если не планируете приехать лично. Конференция бесплатная, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

🤔 Как развернуть строку в js ? Есть несколько способов развернуть строку. Один из наиболее распространенных способов — это преобразование строки в массив, разворот массива и затем преобразование массива обратно в строку. Использование методов массива split, reverse и join Преобразование строки в массив символов с помощью split(''). Разворот массива с помощьюпросят с веро Преобразование массива обратно в строку с помощью join('').

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('hello')); // 'olleh'

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

function reverseString(str) {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

console.log(reverseString('hello')); // 'olleh'

Использование рекурсии Рекурсивное разбиение строки и объединение символов в обратном порядке.

function reverseString(str) {
  if (str === '') {
    return '';
  } else {
    return reverseString(str.substr(1)) + str[0];
  }
}

console.log(reverseString('hello')); // 'olleh'

Использование деструктуризации и метода reduce Преобразование строки в массив с помощью оператора распространения (spread operator)

function reverseString(str) {
  return [...str].reduce((acc, char) => char + acc, '');
}

console.log(reverseString('hello')); // 'olleh'

Использование Array.from и reduceRight Преобразование строки в массив с помощью Array.from.

function reverseString(str) {
  return Array.from(str).reduceRight((acc, char) => acc + char, '');
}

console.log(reverseString('hello')); // 'olleh'

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

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

🤔Что нужно сделать, чтобы поменять данные в хранилище redux ? Чтобы изменить данные, нужно выполнить несколько шагов: создать действие (action), определить редюсер (reducer), который будет обрабатывать это действие и обновлять состояние, и затем отправить действие (dispatch action) в хранилище. Рассмотрим эти шаги более подробно. 🚩Шаги для изменения данных в хранилище 🟠Создание действия (action) Это объект, который описывает, что должно произойти. Он должен содержать как минимум свойство type, которое указывает на тип действия. Дополнительно можно добавить любые данные, которые нужны для обновления состояния.

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

export const setValue = (value) => ({
  type: 'SET_VALUE',
  payload: value,
});

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

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    case 'SET_VALUE':
      return {
        ...state,
        count: action.payload,
      };
    default:
      return state;
  }
};

export default counterReducer;

🟠Создание хранилища (store): Создается с использованием функции createStore из библиотеки Redux. Хранилище объединяет редюсеры и обеспечивает централизованное управление состоянием.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

🟠Подключение Redux к React (или другому фреймворку): Нужно подключить его через провайдер (Provider), который делает хранилище доступным для всех компонентов в дереве компонентов.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

🟠Использование состояния и отправка действий в компонентах: Для получения состояния из хранилища и отправки действий используются хуки useSelector и useDispatch из библиотеки react-redux.

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, setValue } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(setValue(10))}>Set to 10</button>
    </div>
  );
};

export default App;

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