Frontend | Вопросы собесов
@easy_javascript_ru
19.3K subscribers
33 photos
1 video
914 links
Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp

Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky
Download Telegram
About
Blog
Apps
Platform
Join
Frontend | Вопросы собесов
19.3K subscribers
Frontend | Вопросы собесов
Как увеличить в размере при наведении элемент, не сдвигая соседние ?
Спросят с вероятностью 7%

Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

Пример использования
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>


Объяснение

✅`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (transform: scale(1.2)), которое происходит при наведении.
✅`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y).
✅Контейнер с `display: flex;` иак увеличить в Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них. gap добавляет пространство между элементами.

Почему это важно?

✅Эффективность пользовательского интерфейса: Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами.
✅Стабильность макета: Применение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов.
✅Плавные анимации: Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.

Чтобы увеличить элемент при наведении, не сдвигая соседние элементы, используйте CSS свойство transform: scale вместе с transition для плавного перехода.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍39❤10
7.83K views
Frontend | Вопросы собесов
Какова основная цель использования дженериков в типизированных языках программирования, таких как TypeScript?
Anonymous Quiz
9%
Увеличить производительность программы за счёт статической типизации.
22%
Обеспечить строгую типизацию переменных во время компиляции.
60%
Повысить гибкость кода путём обобщения типов.
9%
Автоматически конвертировать типы данных при выполнении.
👍20❤1
2.17K voters7.5K views
Frontend | Вопросы собесов
Для чего нужен оператор spread ?
Спросят с вероятностью 7%

Оператор spread (...) используется для разворачивания (распространения) элементов массивов или свойств объектов. Он позволяет удобным образом копировать массивы и объекты, объединять их, передавать элементы массивов в функции и многое другое.

Примеры:

1️⃣Копирование массива
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // [1, 2, 3]


Используя оператор spread, мы создаем копию массива originalArray. Изменения в copiedArray не будут затрагивать originalArray.

2️⃣Объединение массивов
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]


Оператор spread позволяет легко объединять несколько массивов в один.

3️⃣Копирование объекта
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

console.log(copiedObject); // { a: 1, b: 2 }


С помощью оператора spread можно копировать свойства одного объекта в другой.

4️⃣Объединение объектов
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };

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


Оператор spread позволяет объединять несколько объектов в один.

5️⃣Передача элементов массива в качестве аргументов функции
const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;

console.log(sum(...numbers)); // 6


Здесь оператор spread используется для передачи элементов массива numbers в функцию sum в качестве отдельных аргументов.

Почему это важно?

✅Удобство и читаемость кода: Оператор spread упрощает код, делая его более читаемым и понятным.
✅Эффективность: Он позволяет легко манипулировать массивами и объектами без необходимости использования сложных методов и циклов.
✅Непрямое копирование: Оператор spread создает неглубокие копии (shallow copies) массивов и объектов, что предотвращает нежелательные изменения исходных данных.

Оператор spread (...) используется для разворачивания массивов и объектов, что позволяет легко копировать, объединять и передавать данные.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍40🔥9❤6🤯1
7.82K views
Frontend | Вопросы собесов
В каком случае функция меняет контекст ?
Спросят с вероятностью 3%

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

1️⃣Вызов функции как метода объекта

Когда функция вызывается как метод объекта, контекст (this) ссылается на этот объект.
const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // 'Alice'

В этом примере this внутри функции greet ссылается на объект obj.

2️⃣Вызов функции без контекста (как обычная функция)

Когда функция вызывается как обычная функция (не как метод объекта), контекст (this) ссылается на глобальный объект (window в браузере или global в Node.js). В строгом режиме (strict mode) контекст будет undefined.
function globalFunction() {
  console.log(this);
}

globalFunction(); // В нестрогом режиме: window (в браузере), в строгом режиме: undefined


3️⃣Вызов конструктора (с использованием new)

Когда функция вызывается с использованием ключевого слова new, она работает как конструктор, и контекст (this) ссылается на новый объект, созданный этой функцией.
function Person(name) {
  this.name = name;
}

const person = new Person('Bob');
console.log(person.name); // 'Bob'


4️⃣Явное задание контекста с помощью call, apply и bind

Позволяют явно задать контекст (this) для функции.

✅`call`: вызывает функцию с указанным контекстом и аргументами.
✅`apply`: вызывает функцию с указанным контекстом и аргументами в виде массива.
✅`bind`: возвращает новую функцию, которая при вызове имеет указанный контекст.

Пример:
function greet() {
  console.log(this.name);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Dave' };

greet.call(person1); // 'Charlie'
greet.apply(person2); // 'Dave'

const boundGreet = greet.bind(person1);
boundGreet(); // 'Charlie'


5️⃣Стрелочные функции

Не имеют своего собственного контекста (this). Вместо этого они наследуют контекст из внешней функции, в которой были объявлены. Это поведение называется "лексическим this".
const obj = {
  name: 'Eve',
  greet: function() {
    const arrowFunction = () => {
      console.log(this.name);
    };
    arrowFunction();
  }
};

obj.greet(); // 'Eve'

В этом примере this внутри стрелочной функции ссылается на объект obj, потому что стрелочная функция была объявлена внутри метода greet этого объекта.

6️⃣Методы как коллбеки

Когда методы объектов передаются как коллбеки, контекст может измениться. Это часто происходит, если метод используется вне контекста своего объекта.
const obj = {
  name: 'Frank',
  greet: function() {
    console.log(this.name);
  }
};

setTimeout(obj.greet, 1000); // undefined или ошибка, так как this ссылается на глобальный объект или undefined в строгом режиме


Чтобы сохранить контекст, можно использовать bind:
setTimeout(obj.greet.bind(obj), 1000); // 'Frank'


Функция меняет контекст (this) в зависимости от способа ее вызова. Контекст может быть объектом, если функция вызывается как метод; новым объектом, если функция вызывается как конструктор; глобальным объектом или undefined, если функция вызывается как обычная функция; явно заданным при использовании call, apply или bind; или унаследованным из внешней функции в случае стрелочных функций.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍50❤4🤯3😁1
8.01K views
Frontend | Вопросы собесов
Какие способы работы с асинхронным кодом знаешь ?
Спросят с вероятностью 7%

Существует несколько способов работы с асинхронным кодом. Основные из них включают использование обратных вызовов (callbacks), промисов (Promises) и асинхронных функций (async/await). Рассмотрим каждый из них более подробно.

1️⃣Обратные вызовы (Callbacks)

Это функции, которые передаются как аргументы в другие функции и вызываются после завершения асинхронной операции. 
function fetchData(callback) {
    setTimeout(() => {
        callback('Data received');
    }, 1000);
}

fetchData((data) => {
    console.log(data); // 'Data received'
});


2️⃣Промисы (Promises)

Предоставляют более элегантный способ работы с асинхронным кодом, избегая "ад колбэков" (callback hell). Промис может находиться в одном из трёх состояний: ожидание (pending), выполнен (fulfilled) или отклонён (rejected).
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // 'Data received'
    })
    .catch((error) => {
        console.error(error);
    });


3️⃣Асинхронные функции (Async/Await)

Это синтаксическая надстройка над промисами, которая позволяет писать асинхронный код так, как будто он синхронный, что делает его более читабельным и удобным.
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

async function fetchAsyncData() {
    try {
        const data = await fetchData();
        console.log(data); // 'Data received'
    } catch (error) {
        console.error(error);
    }
}

fetchAsyncData();


4️⃣Асинхронные итераторы (Async Iterators) и генераторы (Generators)

Используются для обработки потоков данных асинхронно, что полезно, например, при чтении данных из сетевых запросов или файлов.
async function* asyncGenerator() {
    let i = 0;
    while (i < 3) {
        yield new Promise((resolve) =>
            setTimeout(() => resolve(i++), 1000)
        );
    }
}

(async () => {
    for await (let value of asyncGenerator()) {
        console.log(value); // 0, затем 1, затем 2 (с интервалом в 1 секунду)
    }
})();


Почему это важно?

✅Управление асинхронностью: Все эти способы позволяют эффективно управлять асинхронными операциями, такими как сетевые запросы, таймеры и взаимодействие с базами данных.
✅Читаемость и поддерживаемость кода: Использование промисов и async/await делает код более читаемым и поддерживаемым по сравнению с колбэками, особенно в сложных сценариях.
✅Ошибки и обработка исключений: Промисы и async/await предоставляют удобные механизмы для обработки ошибок, что делает код более устойчивым и надёжным.

Основные способы работы с асинхронным кодом включают колбэки, промисы и async/await. Каждый из них предоставляет свои преимущества для управления асинхронными операциями, делая код более читабельным и удобным для поддержки.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍36❤9🔥8
9.42K views
Frontend | Вопросы собесов
Какое значение свойства position в CSS определяет координаты элемента относительно его начальной позиции?
Anonymous Quiz
33%
absolute
8%
fixed
55%
relative
5%
sticky
👍34😁11👾9✍1🤯1
2.85K voters8.6K views
Frontend | Вопросы собесов
Что такое миксины ?
Спросят с вероятностью 7%

Миксины (mixins) — это способ повторного использования кода в различных контекстах. Позволяют вам создавать фрагменты кода, которые могут быть включены в другие объекты или классы. Это помогает избежать дублирования кода и упрощает его поддержку и расширение.

Миксины

Часто используются для добавления методов или свойств к классам. Это позволяет комбинировать функциональность из разных источников.
let sayHiMixin = {
    sayHi() {
        console.log(`Привет, ${this.name}`);
    },
    sayBye() {
        console.log(`Пока, ${this.name}`);
    }
};

class User {
    constructor(name) {
        this.name = name;
    }
}

// Копируем методы sayHiMixin в User.prototype
Object.assign(User.prototype, sayHiMixin);

let user = new User("Вася");
user.sayHi(); // Привет, Вася
user.sayBye(); // Пока, Вася


В этом примере миксин sayHiMixin добавляет методы sayHi и sayBye к классу User.

Миксины в CSS (Sass/SCSS)

Обычно используются в препроцессорах, таких как Sass или Less. Миксины позволяют определять наборы стилей, которые можно повторно использовать в различных местах стилей.
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
            border-radius: $radius;
}

.box { 
    @include border-radius(10px);
    width: 100px;
    height: 100px;
    background-color: lightblue;
}


В этом примере миксин border-radius определяет стили для создания скругленных углов. Затем он используется в классе .box для применения этих стилей.

Почему это важно?

✅Повторное использование кода: Миксины позволяют избежать дублирования кода, что упрощает его поддержку и уменьшает вероятность ошибок.
✅Организация кода: Миксины помогают организовать код, разделяя общую функциональность на логические блоки.
✅Удобство и гибкость: С миксинами легко добавлять или изменять функциональность, не затрагивая основные классы или стили.

Миксины — это способ повторного использования кода. Они позволяют добавлять общие методы и свойства к классам (в JavaScript) или повторно использовать наборы стилей.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍40❤4
10.3K views
Frontend | Вопросы собесов
Какой фреймворк первоначально популяризировал концепцию двустороннего связывания данных?
Anonymous Quiz
28%
React
42%
Angular
17%
Vue.js
12%
Ember.js
👍15👾6
3.23K voters9.52K views
Frontend | Вопросы собесов
Как передать данные из родительского компонента в дочерний ?
Спросят с вероятностью 7%

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.

Шаги для передачи данных из родительского компонента в дочерний

1️⃣Создание родительского компонента:
✅В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
✅Затем передаем эти данные в дочерний компонент через пропсы.

2️⃣Приём данных в дочернем компоненте:
✅В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.

Рассмотрим пример, где родительский компонент передает строку message в дочерний компонент.

Родительский компонент (ParentComponent.js):
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;


Дочерний компонент (ChildComponent.js):
import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;


Пояснение

1️⃣В родительском компоненте `ParentComponent`:
✅Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
✅В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.

2️⃣В дочернем компоненте ChildComponent:
✅Принимаем пропс message через параметр props.
✅Используем props.message для отображения переданной строки внутри тега <p>.

Дополнительные примеры

Родительский компонент (ParentComponent.js):
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;


Дочерний компонент (ChildComponent.js):
import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;


В React данные передаются из родительского компонента в дочерний с помощью пропсов. В родительском компоненте данные передаются дочернему компоненту через атрибуты JSX, а в дочернем компоненте эти данные принимаются и используются через объект props.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍45❤6🔥3
9.51K views
Frontend | Вопросы собесов
В чем заключается основное отличие между объявлениями переменных let и const в JavaScript?
Anonymous Quiz
12%
let поддерживает возврат к глобальному объявлению, const нет.
18%
const требует начальной инициализации, let нет.
63%
let может быть объявлен без начального значения, const всегда требует инициализацию.
7%
const позволяет изменять значение после инициализации, let нет.
👍34🤔19❤8😁2
3.04K voters8.72K views
Frontend | Вопросы собесов
Что делает $emit ?
Спросят с вероятностью 7%

$emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные.

Как его использовать

1️⃣В дочернем компоненте:
✅Используйте метод $emit, чтобы отправить событие.
✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту.

2️⃣В родительском компоненте:
✅Слушайте это событие, используя директиву v-on или её сокращение @.
✅Обработайте событие в методе родительского компонента.

Дочерний компонент (ChildComponent.vue)
<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>


Родительский компонент (ParentComponent.vue)
<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>


Пояснение

1️⃣В дочернем компоненте `ChildComponent`:
✅Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent.
✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.

2️⃣В родительском компоненте ParentComponent:
✅Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.
✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.

Почему это важно?

✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.
✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.
✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍14🤔9❤2🔥2
9.37K views
Frontend | Вопросы собесов
Что такое интерполяция ?
Спросят с вероятностью 7%

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

Почему это нужно?

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

Как это используется?

Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции ${}.

Пример кода:
const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;

console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.


В данном примере переменные name и age интерполируются в строку greeting.

🤔 Как это работает и почему это удобно?

✅ Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.

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

✅ Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.

Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:
const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;

console.log(result); // Вывод: Сумма 5 и 10 равна 15.


Интерполяция — это метод вставки значений и выражений в строки, который улучшает читаемость и удобство работы с текстом в коде. Например, это делается с помощью шаблонных строк и конструкции ${}.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
Please open Telegram to view this post
VIEW IN TELEGRAM
👍47❤2
9.08K viewsedited  
Frontend | Вопросы собесов
В JavaScript, что происходит, если метод или свойство не найдено в объекте, но есть в его прототипе?
Anonymous Quiz
5%
Происходит ошибка отсутствия свойства.
48%
Метод или свойство вызывается или возвращается из прототипа.
27%
Поиск продолжается в прототипе родительского объекта.
20%
Возвращается undefined.
👍26❤2🤯1
2.61K voters8.63K views
Frontend | Вопросы собесов
📌 Как отрисовать компоненты на основе массива ?

💬 Спрашивают в 7% собеседований

В современных фреймворках, таких как React, отрисовка компонентов на основе массива данных — это стандартная задача. Она позволяет динамически создавать элементы интерфейса на основе данных, что делает код более гибким и адаптируемым к изменениям.

🤔 Почему это нужно?

Отрисовка компонентов на основе массива данных позволяет:

➕ Динамически создавать и отображать элементы интерфейса.

➕ Управлять отображением элементов на основе данных (например, список задач, карточки пользователей и т.д.).

➕ Избегать дублирования кода, создавая компоненты в цикле.

🤔 Как это используется?

Для этого обычно используется метод массива .map(), который перебирает массив данных и возвращает новый массив с JSX-элементами.

Примеры:

1️⃣ Подготовка данных:

Предположим, у нас есть массив объектов с данными пользователей:
const users = [
  { id: 1, name: 'Иван', age: 30 },
  { id: 2, name: 'Мария', age: 25 },
  { id: 3, name: 'Петр', age: 40 },
];


2️⃣ Создание компонента для отрисовки каждого пользователя:

Создадим компонент User, который принимает данные пользователя через props:
function User({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Возраст: {age}</p>
    </div>
  );
}


3️⃣ Отрисовка списка пользователей:

Используем метод .map() для создания списка компонентов User на основе массива users:
function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User key={user.id} name={user.name} age={user.age} />
      ))}
    </div>
  );
}


Здесь важно использовать уникальный key для каждого элемента списка, чтобы React мог оптимально управлять рендерингом этих элементов.

4️⃣ Использование в основном компоненте:

Наконец, используем компонент UserList в основном компоненте приложения:
function App() {
  return (
    <div>
      <h1>Список пользователей</h1>
      <UserList users={users} />
    </div>
  );
}

export default App;


🤔 Почему это удобно и важно:

➕ Динамичность: Мы можем легко изменить массив users, и наш интерфейс автоматически обновится.

➕ Читаемость: Код становится более структурированным и легче поддерживается.

➕ Оптимизация: Использование ключей позволяет React эффективно обновлять элементы, минимизируя количество изменений в DOM.

Отрисовка компонентов на основе массива данных позволяет динамически создавать элементы интерфейса и улучшает читаемость и поддержку кода.

🪙 1429 вопроса на Frontend разработчика

🔒 База собесов | 🔒 База тестовых
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤6🔥4😁2👀1
8.78K viewsedited  
Frontend | Вопросы собесов
Как изменяется контекст this в JavaScript при использовании стрелочной функции вместо обычной функции?
Anonymous Quiz
17%
this всегда указывает на глобальный объект.
13%
this становится undefined.
51%
this наследуется от окружающего лексического контекста.
20%
this всегда указывает на объект, который вызвал функцию.
👍28
2.56K voters8.5K views
Frontend | Вопросы собесов
Как добавить слушатель события ?
Спросят с вероятностью 7%

Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

Почему это нужно?

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

Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

1️⃣Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.

Пример:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>


В этом примере мы получаем элемент кнопки по её id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.

2️⃣React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

Пример:
import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;


В этом примере мы определяем функцию handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.

3️⃣jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.

Пример:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>


В этом примере мы используем jQuery для добавления обработчика события click к кнопке.

Почему это удобно и важно:
✅Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
✅Гибкость: Возможность реагировать на различные действия пользователей.
✅Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

Добавление слушателя события позволяет реагировать на действия пользователя и делает приложения интерактивными. В зависимости от технологии (чистый JavaScript, React или jQuery) процесс добавления слушателя может немного отличаться, но цель остается той же — улучшить взаимодействие пользователя с приложением.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍33❤8
8.38K views
Frontend | Вопросы собесов
Назови отличия директив v show и v if ?
Спросят с вероятностью 7%

v-show и v-if — это две директивы, которые используются для условного отображения элементов в DOM. Однако они работают по-разному и имеют разные случаи использования. Рассмотрим их отличия более детально.

Основные отличия

1️⃣Рендеринг в DOM:
✅v-if: Элемент с v-if рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM.
✅v-show: Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display.

2️⃣Переключение состояния:
✅v-if: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка.
✅v-show: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display.

3️⃣Использование в условиях:
✅v-if: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко.
✅v-show: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно.

Примеры:

С v-if:
<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">Этот текст отображается только если isVisible истинно</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> будет добавляться или удаляться из DOM при каждом нажатии на кнопку.

С v-show:
<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">Этот текст всегда присутствует в DOM, но может быть скрыт</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> всегда присутствует в DOM, но его видимость контролируется с помощью CSS.

✅v-if: Условное добавление и удаление элементов в DOM.
✅v-show: Условное изменение видимости элементов с помощью CSS.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍19🤔8❤3
8.46K views
Frontend | Вопросы собесов
Какие структуры данных есть в js ?
Спросят с вероятностью 7%

Существует несколько основных структур данных, которые используются для хранения и управления данными. Рассмотрим их подробнее:

1️⃣Массивы (Arrays)
✅Что это: Упорядоченные списки элементов.
✅Зачем нужны: Для хранения коллекций данных, которые можно обрабатывать по индексу.
✅Как использовать: 
          let fruits = ["Apple", "Banana", "Cherry"];
     console.log(fruits[0]); // Apple

✅Пример использования: Хранение списка товаров в корзине интернет-магазина.

2️⃣Объекты (Objects)
✅Что это: Наборы пар "ключ-значение".
✅Зачем нужны: Для хранения данных в виде ассоциативных массивов, где ключами могут быть строки или символы.
✅Как использовать:
          let person = {
       name: "John",
       age: 30
     };
     console.log(person.name); // John

✅Пример использования: Хранение информации о пользователе.

3️⃣Map (Карты)
✅Что это: Коллекции пар "ключ-значение", где ключи могут быть любого типа.
✅Зачем нужны: Для хранения данных с уникальными ключами, с более гибкими возможностями по сравнению с объектами.
✅Как использовать:
          let map = new Map();
     map.set('name', 'John');
     map.set(1, 'one');
     console.log(map.get('name')); // John

✅Пример использования: Хранение настроек с ключами различного типа.

4️⃣Set (Множества)
✅Что это: Коллекции уникальных значений.
✅Зачем нужны: Для хранения множества значений, где каждое значение уникально.
✅Как использовать:
          let set = new Set();
     set.add(1);
     set.add(1); // Значение не добавится, так как оно уже существует
     console.log(set.size); // 1

✅Пример использования: Хранение уникальных тегов из списка статей.

5️⃣WeakMap (Слабые карты)
✅Что это: Коллекции пар "ключ-значение", где ключи являются объектами и имеют слабые ссылки.
✅Зачем нужны: Для хранения данных с автоматическим удалением неиспользуемых объектов.
✅Как использовать:
          let weakMap = new WeakMap();
     let obj = {};
     weakMap.set(obj, 'value');
     obj = null; // Теперь объект может быть удалён из памяти

✅Пример использования: Хранение метаданных объектов без риска утечек памяти.

6️⃣WeakSet (Слабые множества)
✅Что это: Коллекции объектов, где каждое значение может быть удалено автоматически, если больше не используется.
✅Зачем нужны: Для хранения уникальных объектов с возможностью автоматического удаления.
✅Как использовать:
          let weakSet = new WeakSet();
     let obj = {};
     weakSet.add(obj);
     obj = null; // Теперь объект может быть удалён из памяти

✅Пример использования: Отслеживание объектов без риска утечек памяти.

7️⃣String (Строки)
✅Что это: Последовательности символов.
✅Зачем нужны: Для хранения и обработки текстовых данных.
✅Как использовать:
          let greeting = "Hello, world!";
     console.log(greeting.length); // 13

✅Пример использования: Хранение и манипулирование текстовой информацией, такой как имена пользователей или сообщения.

8️⃣Typed Arrays (Типизированные массивы)
✅Что это: Массивы, которые предоставляют массивы с фиксированной длиной для различных типов данных.
✅Зачем нужны: Для работы с бинарными данными и оптимизации производительности.
✅Как использовать:
          let buffer = new ArrayBuffer(16);
     let int32View = new Int32Array(buffer);
     int32View[0] = 42;
     console.log(int32View[0]); // 42

✅Пример использования: Обработка данных в WebGL или манипулирование бинарными данными.

Есть массивы, объекты, Map, Set, WeakMap, WeakSet, строки и типизированные массивы. Они нужны для хранения и управления различными типами данных, от упорядоченных списков до ассоциативных массивов и уникальных наборов значений.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
❤31👍23🔥3
8.93K views
Frontend | Вопросы собесов
Что делает метод apply ?
Спросят с вероятностью 7%

Метод apply позволяет вызвать функцию с определённым значением this и передать аргументы в виде массива (или массивоподобного объекта). Он является частью прототипа функции и используется для управления контекстом выполнения функции и передачи аргументов.

Зачем он нужен

Метод apply полезен в ситуациях, когда:
1️⃣Нужно вызвать функцию с конкретным значением this.
2️⃣Необходимо передать аргументы в виде массива, особенно когда их количество заранее неизвестно.

Как он используется

Синтаксис метода apply выглядит так:
function.apply(thisArg, [argsArray])


✅thisArg: Значение, используемое для this при вызове функции.
✅argsArray: Массив или массивоподобный объект, содержащий аргументы для функции.

Пример 
function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello', '!']); // Вывод: "Hello, Alice!"


В этом примере:
✅Функция greet принимает два аргумента и использует this.name.
✅Метод apply вызывает greet с this, указывающим на объект person, и передает массив аргументов ['Hello', '!'].

Зачем использовать apply вместо других методов

Особенно удобен, когда аргументы уже находятся в массиве. Если бы использовался метод call, пришлось бы передавать аргументы вручную:
greet.call(person, 'Hello', '!'); // То же самое, но аргументы передаются по отдельности


Еще один пример: использование с встроенными методами

Метод apply можно использовать для передачи массивов встроенным функциям, которые не работают напрямую с массивами. Например, использование метода Math.max для нахождения максимального значения в массиве:
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); // 7


Здесь:
✅Math.max ожидает список отдельных чисел, а не массив.
✅apply передает массив как набор отдельных аргументов.

Метод apply вызывает функцию с определённым значением this и аргументами в виде массива. Это удобно, когда аргументы уже находятся в массиве и нужно управлять контекстом выполнения функции.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍36✍2❤1
8.4K views
Frontend | Вопросы собесов
Что такое самовызывающаяся функция ?
Спросят с вероятностью 7%

Самовызывающаяся функция (IIFE, Immediately Invoked Function Expression) — это функция, которая вызывается сразу же после её объявления. Используется для создания локальной области видимости и изоляции кода от глобальной области видимости.

Зачем нужны самовызывающиеся функции

Самовызывающиеся функции используются для:
1️⃣Изоляции переменных и предотвращения их попадания в глобальную область видимости.
2️⃣Создания замыканий.
3️⃣Инициализации кода, который должен выполняться сразу после загрузки страницы или выполнения скрипта.

Как пишется самовызывающаяся функция

Синтаксис IIFE выглядит следующим образом:
(function() {
  // код функции
})();


Или с использованием стрелочных функций:
(() => {
  // код функции
})();


Примеры:

Изоляция переменных
(function() {
  var message = 'Hello, World!';
  console.log(message); // Вывод: Hello, World!
})();

console.log(message); // Ошибка: message is not defined


В этом примере переменная message существует только внутри IIFE и недоступна вне её.

Создание замыканий
var counter = (function() {
  var count = 0;
  return function() {
    count += 1;
    return count;
  };
})();

console.log(counter()); // Вывод: 1
console.log(counter()); // Вывод: 2


Здесь IIFE создаёт локальную переменную count, к которой можно получить доступ только через возвращаемую функцию.

Инициализация кода
(function() {
  console.log('IIFE выполнена сразу после объявления!');
})();


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

Самовызывающаяся функция (IIFE) — это функция, которая вызывается сразу после её объявления. Она используется для изоляции переменных и создания замыканий.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых
👍41❤6🔥1
8.1K views