Frontend Interview - собеседования по Javascript / Html / Css

​Что такое вычисляемые свойства и как их использовать?

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

Вычисляемые свойства в объектных литералах задаются в квадратных скобках [].

let propName = 'name';
let person = {
    [propName]: 'Alice'
};
console.log(person.name); // 'Alice'

Использование вычисляемых свойств
1. Динамическое имя свойства на основе переменной

let key = 'age';
let person = {
    name: 'Alice',
    [key]: 25
};

console.log(person.name); // 'Alice'
console.log(person.age);  // 25

2. Использование выражений в качестве имен свойств

let i = 0;
let obj = {
    ['prop_' + ++i]: i,
    ['prop_' + ++i]: i,
    ['prop_' + ++i]: i
};

console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }

3. Вложенные вычисляемые свойства

let prefix = 'user';
let index = 1;
let users = {
    [prefix + index]: { name: 'Alice' },
    [prefix + (index + 1)]: { name: 'Bob' }
};

console.log(users.user1.name); // 'Alice'
console.log(users.user2.name); // 'Bob'

4. Использование функции для вычисления имен свойств

function createKey(base, index) {
    return base + index;
}

let obj = {
    [createKey('key', 1)]: 'value1',
    [createKey('key', 2)]: 'value2'
};

console.log(obj.key1); // 'value1'
console.log(obj.key2); // 'value2'

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

let studentName1 = 'Alice';
let studentName2 = 'Bob';

let grades = {
    [studentName1]: 85,
    [studentName2]: 92
};

console.log(grades.Alice); // 85
console.log(grades.Bob);   // 92

Использование вычисляемых свойств для формирования запросов
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.

function getFilterKey(filterName) {
    return `filter_${filterName}`;
}

let filters = {};
filters[getFilterKey('age')] = 25;
filters[getFilterKey('location')] = 'New York';

console.log(filters); // { filter_age: 25, filter_location: 'New York' }

👉 @frontendInterview

My Language Skills

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

Примеры:

{"Java": 10, "Ruby": 80, "Python": 65}
// ["Ruby", "Python"]

{"Hindi": 60, "Dutch" : 93, "Greek": 71}
// ["Dutch", "Greek", "Hindi"]

{"C++": 50, "ASM": 10, "Haskell": 20}
// []

👉 @frontendInterview

Алгоритмы

В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.

👉 @frontendInterview

​Как можно узнать, есть ли в двух множествах Set общие элементы?

Метод isDisjointFrom() позволяет проверить, имеют ли два множества хотя бы один общий элемент. Возвращает true, если множества не имеют общих элементов, и false, если хотя бы один элемент совпадает.

Проверку, которую выполняет метод, можно выразить так:
A ∩ B = ∅

Пример
В одной компании два разработчика, Анна и Павел, решили организовать учебный кружок по программированию. Чтобы понять, могут ли они вести занятия вместе, им нужно проверить, есть ли у них пересекающиеся области знаний. В этом им поможет метод isDisjointFrom():

const annaSkills = new Set(['JavaScript', 'HTML', 'CSS', 'Vue.js']);
const pavelSkills = new Set(['Python', 'Node.js', 'PostgreSQL', 'Redis']);

console.log(annaSkills.isDisjointFrom(pavelSkills));
// true, т.к. у Ани и Павла нет общих навыков

Как мы видим, у них нет общих навыков, но тут оказалось, что Анна забыла указать, что она также знает Node.js.

/ Добавим навык в существующее множество.
annaSkills.add('Node.js');

console.log(annaSkills.isDisjointFrom(pavelSkills));
// false, т.к. Node.js уже есть в обоих множествах

👉 @frontendInterview

Тестировщик vs Разработчик

👉 @frontendInterview

👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻

Сливаем вам базу с курсами и книгами от известных онлайн школ по Frontend:

(23 ГБ) — Основы веба
(46 ГБ) — HTML/CSS/Верстка
(53 ГБ) — JavaScript
(31 ГБ) — React
(17 ГБ) — TypeScript
(33 ГБ) — Vue / Angular / Svelte
(56 ГБ) — Webpack / Vite / Git
(43 ГБ) — Next.js / Nuxt.js
(68 ГБ) — Figma и Веб-дизайн
(76 ГБ) — Анимации и UI/UX
(44 ГБ) — WordPress
(37 ГБ) — Архитектура фронтенда
(21 ГБ) — Тестирование фронта

Скачивать ничего не нужно — все выложили в Telegram

Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт

Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.

Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.

👉 @frontendInterview

​Как можно убрать пробелы в начале и конце строки?

При работе с полями ввода <input> и <textarea> может встречаться ситуация, когда пользователи добавляют пробелы в начале или конце текста. В некоторых случаях это не критично — например, в чатах или мессенджерах. Но есть ситуации, где важно получить чистые данные без лишних пробелов, как при вводе email для авторизации.

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

Метод также помогает получить чистые данные в required-полях. Атрибут required указывает, что поле формы обязательно для заполнения, но он не всегда правильно работает с пробельными символами. Если пользователь введёт только пробелы в поле с атрибутом required, браузер может посчитать поле заполненным, хотя фактически полезной информации там нет.

Пример

const phrase = '     А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.\n   '
console.log(phrase.length)
// 124

const phraseWithoutSpaces = phrase.trim()
console.log(phraseWithoutSpaces)
// 'А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.'

console.log(phraseWithoutSpaces.length)
// 115

Метод не принимает аргументов и работает напрямую со строкой, на которой вызван:

const str = '  Привет, Дока!   '
console.log(str.trim()) // 'Привет, Дока!'

👉 @frontendInterview

⚡️ Дождались! Ребята сделали крутейший канал про Frontend

Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами

Подписывайтесь: @FrontendPortal

👉 @frontendInterview