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

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

👍26❤4

7.56K views09:10

🤔 Какое свойство объекта функции указывает на её контекст исполнения?

Anonymous Quiz

👍10😁3

2.42K voters6.65K views16:10

Как работает promiseall ?
Спросят с вероятностью 7%

Promise.all — это метод, который позволяет обрабатывать несколько промисов одновременно и возвращает один промис, который завершится, когда все переданные промисы будут выполнены (или когда один из них будет отклонен).

Основные особенности:

1️⃣Параллельное выполнение промисов:
Promise.all принимает массив промисов и выполняет их параллельно. Он завершится успешно, когда все промисы в массиве будут выполнены.

2️⃣Возвращает один промис:
Метод возвращает один промис, который:
✅Выполняется с массивом результатов, если все промисы в массиве были успешно выполнены.
✅Отклоняется с причиной отклонения первого промиса, который был отклонен.

3️⃣Отклонение при первой ошибке:
Если один из промисов в массиве отклоняется, Promise.all сразу отклоняет весь промис, не дожидаясь выполнения остальных.

Синтаксис

Promise.all(iterable);

✅iterable: Массив или другой итерируемый объект, элементы которого являются промисами или значениями.

Рассмотрим пример, где мы запускаем несколько асинхронных операций одновременно и ждем их завершения.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // ['First', 'Second', 'Third']
  })
  .catch((error) => {
    console.error('One of the promises failed:', error);
  });

Если один из промисов отклоняется, Promise.all отклоняет весь результат.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'Error in Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // This line will not be executed
  })
  .catch((error) => {
    console.error('One of the promises failed:', error); // 'Error in Second'
  });

Promise.all также можно использовать с async/await для более удобной работы с асинхронным кодом.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

async function runPromises() {
  try {
    const results = await Promise.all([promise1, promise2, promise3]);
    console.log(results); // ['First', 'Second', 'Third']
  } catch (error) {
    console.error('One of the promises failed:', error);
  }
}

runPromises();

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

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

👍25❤3

7.38K views09:10

🤔 Какое значение вернёт выражение typeof null?

Anonymous Quiz

🔥6

2.71K voters6.88K views16:10

В чем отличие map от обычного объекта ?
Спросят с вероятностью 7%

Объекты и Map используются для хранения пар ключ-значение. Однако, у них есть различия, которые могут сделать Map более подходящим для определенных задач по сравнению с обычными объектами. Вот основные отличия:

1️⃣Типы ключей

✅Объекты: Ключами могут быть только строки или символы. Другие типы, такие как числа или объекты, автоматически преобразуются в строки.

    const obj = {};
  obj[1] = 'one'; // Ключ преобразуется в строку '1'
  console.log(obj['1']); // 'one'

  const a = { key: 'a' };
  const b = { key: 'b' };
  obj[a] = 'value'; // Ключ преобразуется в '[object Object]'
  console.log(obj['[object Object]']); // 'value'

✅Map: Ключами могут быть любые значения, включая объекты, функции и примитивы.

    const map = new Map();
  map.set(1, 'one');
  console.log(map.get(1)); // 'one'

  const a = { key: 'a' };
  const b = { key: 'b' };
  map.set(a, 'valueA');
  map.set(b, 'valueB');
  console.log(map.get(a)); // 'valueA'
  console.log(map.get(b)); // 'valueB'

2️⃣Итерация

✅Объекты: Осуществляется с помощью циклов for...in или методов Object.keys(), Object.values() и Object.entries().

    const obj = { a: 1, b: 2 };
  for (const key in obj) {
    console.log(key, obj[key]);
  }

  Object.keys(obj).forEach(key => console.log(key, obj[key]));

✅Map: Имеет встроенные методы для итерации, такие как map.keys(), map.values() и map.entries(). Эти методы возвращают итерируемые объекты.

    const map = new Map([['a', 1], ['b', 2]]);
  for (const [key, value] of map) {
    console.log(key, value);
  }

  map.forEach((value, key) => console.log(key, value));

3️⃣Сохранение порядка

✅Объекты: Порядок свойств в объектах не гарантирован, хотя современные реализации JavaScript сохраняют порядок добавления свойств.

✅Map: Порядок добавления пар ключ-значение всегда сохраняется.

4️⃣Производительность

✅Объекты: Использование объектов может быть быстрее для создания и доступа к свойствам, но это зависит от реализации в конкретной среде выполнения.

✅Map: Map оптимизирован для частого добавления и удаления ключей и значений.

5️⃣Методы и свойства

✅Объекты: Не имеют встроенных методов для работы с коллекцией ключей и значений.

✅Map: Предоставляет множество встроенных методов, таких как set, get, has, delete, и свойства, такие как size.

    const map = new Map();
  map.set('key', 'value');
  console.log(map.has('key')); // true
  console.log(map.get('key')); // 'value'
  map.delete('key');
  console.log(map.size); // 0

6️⃣Прототипное наследование

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

    const obj = { a: 1 };
  console.log(obj.toString); // [Function: toString] - свойство унаследовано от Object.prototype

✅Map: В Map нет такой проблемы, так как он не использует цепочку прототипов для хранения данных.

    const map = new Map();
  map.set('a', 1);
  console.log(map.toString); // [Function: toString] - метод самого Map, а не его данных

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

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

👍30❤6🔥3

7.35K views09:10

Принцип сортировки массива

🤔 Что такое всплытие (hoisting) в JavaScript?

Anonymous Quiz

90%

Процесс поднятия переменных и функций

Механизм обработки ошибок

Метод оптимизации кода

👍8

2.45K voters6.72K views16:10

Что такое ts ?
Спросят с вероятностью 7%

TypeScript (TS) — это язык с открытым исходным кодом, разработанный и поддерживаемый Microsoft. Является строгой надстройкой над JavaScript, которая добавляет статическую типизацию и другие возможности, упрощая разработку больших и сложных приложений.

Основные особенности

1️⃣Статическая типизация:
Позволяет указывать типы переменных, параметров функций и возвращаемых значений. Это помогает выявлять ошибки на этапе компиляции, а не во время выполнения, что делает код более надежным и упрощает отладку

      let age: number = 25;
   let name: string = "Alice";

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

2️⃣Совместимость:
TypeScript полностью совместим. Любой корректный JavaScript-код также является корректным TypeScript-кодом. Это позволяет постепенно внедрять TypeScript в существующие проекты.

3️⃣Поддержка современных возможностей:
Поддерживает все современные стандарты JavaScript (ES6 и выше), а также предоставляет дополнительные возможности, такие как декораторы и асинхронные функции.

4️⃣Расширенные возможности ООП (объектно-ориентированного программирования):
Добавляет возможности, такие как классы, интерфейсы, абстрактные классы и модификаторы доступа (public, private, protected).

      class Person {
     private name: string;
     
     constructor(name: string) {
       this.name = name;
     }

     public greet(): void {
       console.log(`Hello, my name is ${this.name}`);
     }
   }

   const alice = new Person("Alice");
   alice.greet(); // Hello, my name is Alice

5️⃣Типы данных и интерфейсы:
TypeScript позволяет определять собственные типы и интерфейсы, что делает код более выразительным и понятным.

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const user: User = {
     id: 1,
     name: "Alice",
     email: "[email protected]"
   };

6️⃣Инструменты разработки:
Благодаря статической типизации и метаданным, TypeScript обеспечивает улучшенное автодополнение, рефакторинг и навигацию по коду в популярных редакторах кода, таких как Visual Studio Code.

7️⃣Компиляция:
Компилируется (или транслируется) в JavaScript. Это означает, что код TypeScript преобразуется в JavaScript, который затем может выполняться в любом браузере или среде выполнения JavaScript.

      // TypeScript
   let message: string = "Hello, TypeScript";

   // Компилированный JavaScript
   var message = "Hello, TypeScript";

Создание простого проекта может включать следующие шаги:

1️⃣Установка TypeScript:

      npm install -g typescript

2️⃣Инициализация проекта TypeScript:

      tsc --init

Это создаст файл tsconfig.json, в котором можно настроить параметры компиляции TypeScript.

3️⃣Создание TypeScript-файла:

      // src/index.ts
   const greet = (name: string): string => {
     return Hello, ${name};
   };

   console.log(greet("TypeScript"));

4️⃣Компиляция TypeScript в JavaScript:

tsc

Это создаст файл index.js в папке dist или другой указанной папке.

5️⃣Запуск скомпилированного JavaScript-кода:

      node dist/index.js

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

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24❤6

7.38K views09:10

Для чего нужны map, set ?
Спросят с вероятностью 7%

Map и Set — это структуры данных, введенные в ECMAScript 6 (ES6), которые предоставляют дополнительные возможности и более гибкую работу с коллекциями данных по сравнению с традиционными объектами и массивами. Вот основные особенности и случаи их использования:

Map

Это структура данных, которая позволяет хранить пары ключ-значение и поддерживает любые типы данных в качестве ключей.

Основные особенности:

1️⃣Любые типы ключей:
В ней ключами могут быть любые значения, включая объекты, функции и примитивы. Это отличает Map от объектов, где ключи могут быть только строками или символами.

      const map = new Map();
   map.set('a', 1);
   map.set(1, 'one');
   map.set({}, 'object');
   map.set(function() {}, 'function');
   console.log(map);

2️⃣Сохранение порядка:
Сохраняет порядок вставки элементов, что позволяет итерировать по элементам в порядке их добавления.

3️⃣Итерируемость:
Имеет встроенные методы для итерации, такие как map.keys(), map.values(), и map.entries(), что упрощает работу с коллекцией данных.

4️⃣Методы и свойства:
✅set(key, value): Добавляет новую пару ключ-значение в Map.
✅get(key): Возвращает значение, соответствующее ключу.
✅has(key): Возвращает true, если ключ присутствует в Map.
✅delete(key): Удаляет пару ключ-значение по ключу.
✅clear(): Очищает Map.
✅size: Возвращает количество элементов в Map.

Пример:

const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);

console.log(map.get('name')); // Alice
console.log(map.has('age')); // true
console.log(map.size); // 2

for (const [key, value] of map) {
  console.log(key, value);
}
// name Alice
// age 25

Set

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

Основные особенности:

1️⃣Только уникальные значения:
Set автоматически удаляет дубликаты значений, что позволяет легко создавать коллекции уникальных элементов.

2️⃣Итерируемость:
Set поддерживает итерацию и имеет встроенные методы для работы с коллекцией данных.

3️⃣Методы и свойства:
✅add(value): Добавляет новое значение в Set.
✅has(value): Возвращает true, если значение присутствует в Set.
✅delete(value): Удаляет значение из Set.
✅clear(): Очищает Set.
✅size: Возвращает количество элементов в Set.

Пример:

const set = new Set();
set.add(1);
set.add(2);
set.add(2); // Дубликат не добавится
set.add(3);

console.log(set.has(2)); // true
console.log(set.size); // 3

for (const value of set) {
  console.log(value);
}
// 1
// 2
// 3

Сравнение с традиционными структурами данных

Объекты и массивы:
✅Объекты используются для хранения пар ключ-значение, но ключи могут быть только строками или символами.
✅Массивы используются для хранения упорядоченных коллекций элементов, но они не гарантируют уникальность значений.

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

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

👍26❤5🔥1

7.5K views09:10

В чем разница uselayuouteffect и useeffect ?
Спросят с вероятностью 7%

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

useEffect

✅Когда выполняется:
Выполняется после того, как браузер закончил обновлять DOM. Это означает, что все изменения в DOM уже произошли, и браузер уже отрисовал интерфейс.

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

✅Поведение:
Не блокирует рендеринг. Это означает, что пользователь может видеть обновленный интерфейс перед выполнением побочного эффекта.

Пример:

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('useEffect: Выполняется после рендеринга');
    document.title = `Вы нажали ${count} раз`;

    return () => {
      console.log('useEffect: Очистка');
    };
  }, [count]);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

export default Example;

useLayoutEffect

✅Когда выполняется:
Выполняется синхронно после всех мутировавших эффектов DOM, но перед тем, как браузер обновит экран. Это означает, что изменения, сделанные в useLayoutEffect, будут видны пользователю до того, как браузер нарисует обновленный интерфейс.

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

✅Поведение:
Блокирует отрисовку до тех пор, пока эффект не будет выполнен. Это может привести к задержке в отображении интерфейса, если эффект выполняется долго.

Пример:

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

function Example() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log('useLayoutEffect: Выполняется после рендеринга, но перед отрисовкой');
    document.title =раз</p>
      <button onCl

    return () => {
      console.log('useLayoutEffect: Очистка');
    };
  }, [count]);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

export default Example;

Основные различия

1️⃣Время выполнения:
✅useEffect выполняется асинхронно после того, как браузер обновил экран.
✅useLayoutEffect выполняется синхронно перед тем, как браузер обновит экран.

2️⃣Использование:
✅useEffect лучше подходит для побочных эффектов, которые не влияют на компоновку и отрисовку интерфейса.
✅useLayoutEffect лучше подходит для побочных эффектов, которые должны быть выполнены перед отрисовкой, таких как измерение или изменения в DOM.

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥24👍8❤2

6.93K views09:10

Для чего нужен promiseall ?
Спросят с вероятностью 7%

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

Основные особенности

1️⃣Параллельное выполнение промисов:
Позволяет выполнять несколько асинхронных операций параллельно. Это особенно полезно, когда результаты этих операций независимы друг от друга.

2️⃣Единый промис в ответ:
Promise.all возвращает новый промис, который:
✅Завершается успешно, когда все промисы в массиве выполнены.
✅Отклоняется, если любой из промисов в массиве отклоняется.

3️⃣Сбор результатов:
Когда все промисы успешно выполнены, результирующий промис разрешается массивом результатов всех переданных промисов.

Синтаксис

Promise.all(iterable);

✅iterable: массив или любой итерируемый объект, элементы которого являются промисами или значениями.

Рассмотрим пример, где мы запускаем несколько асинхронных операций одновременно и ждем их завершения.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // ['First', 'Second', 'Third']
  })
  .catch((error) => {
    console.error('One of the promises failed:', error);
  });

Если один из промисов отклоняется, Promise.all отклоняет весь результат.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'Error in Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // This line will not be executed
  })
  .catch((error) => {
    console.error('One of the promises failed:', error); // 'Error in Second'
  });

Promise.all также можно использовать с async/await для более удобной работы с асинхронным кодом.

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));

async function runPromises() {
  try {
    const results = await Promise.all([promise1, promise2, promise3]);
    console.log(results); // ['First', 'Second', 'Third']
  } catch (error) {
    console.error('One of the promises failed:', error);
  }
}

runPromises();

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

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24❤1

6.92K views09:10

🤔 Какое из следующих ключевых слов используется для создания модуля в ECMAScript 6?

Anonymous Quiz

👍16❤1

2.1K voters6.03K views16:10

Что означает слово специфичность в css ?
Спросят с вероятностью 7%

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

Основные концепции

1️⃣Типы селекторов и их веса:
Специфичность определяется по типу селекторов, и каждый тип имеет свой вес. В порядке увеличения специфичности:

✅Элементы и псевдоэлементы (div, h1, p, ::before, ::after): вес 1.
✅Классы, атрибуты и псевдоклассы (.class, [type="text"], :hover, :nth-child): вес 10.
✅Идентификаторы (#id): вес 100.
✅Инлайновые стили (стили, заданные непосредственно в элементе с атрибутом style): вес 1000.
✅Важные правила (!important): не учитывают специфичность, а просто переопределяют другие правила.

2️⃣Правила вычисления специфичности:
Специфичность CSS выражается в виде чисел (a, b, c, d), где:
✅a — количество инлайновых стилей (1 или 0).
✅b — количество идентификаторов.
✅c — количество классов, атрибутов и псевдоклассов.
✅d — количество элементов и псевдоэлементов.

Примеры расчета специфичности

1️⃣Элементы и псевдоэлементы:

      div { color: red; } /* Специфичность: 0, 0, 0, 1 */
   p::before { content: ''; } /* Специфичность: 0, 0, 0, 2 */

2️⃣Классы, атрибуты и псевдоклассы:

      .example { color: blue; } /* Специфичность: 0, 0, 1, 0 */
   [type="text"] { color: green; } /* Специфичность: 0, 0, 1, 0 */
   :hover { color: yellow; } /* Специфичность: 0, 0, 1, 0 */

3️⃣Идентификаторы:

      #unique { color: orange; } /* Специфичность: 0, 1, 0, 0 */

4️⃣Инлайновые стили:

      <div style="color: purple;"></div> <!-- Специфичность: 1, 0, 0, 0 -->

5️⃣Комбинированные селекторы:

#unique .example:hover { color: pink; } /* Специфичность: 0, 1, 1, 1 */

Если два или более правил CSS применяются к одному и тому же элементу, приоритет будет у правила с наибольшей специфичностью.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Specificity Example</title>
  <style>
    p { color: red; } /* Специфичность: 0, 0, 0, 1 */
    .text { color: green; } /* Специфичность: 0, 0, 1, 0 */
    #unique { color: blue; } /* Специфичность: 0, 1, 0, 0 */
    .text#unique { color: orange; } /* Специфичность: 0, 1, 1, 0 */
  </style>
</head>
<body>
  <p class="text" id="unique">This is a paragraph.</p>
</body>
</html>

В этом примере, текст параграфа будет оранжевого цвета, так как правило .text#unique имеет наибольшую специфичность (0, 1, 1, 0).

Использование !important

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

p { color: red !important; } /* Перебивает все другие правила */

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

🔥

🔒

| 🔒

Please open Telegram to view this post

VIEW IN TELEGRAM

❤18👍15🔥2

6.37K views09:10

stopImmediatePropagation()

🤔 Какой метод используется для остановки распространения события в JavaScript?

Anonymous Quiz

27%

preventDefault()

cancelEvent()

62%

stopPropagation()

👍10😁3🎉1

2.11K voters5.64K views16:10

Forwarded from Идущий к IT

10$ за техническое собеседование на английском языке:

1. Отправьте запись технического собеседования на английском языке файлом на этот аккаунт
2. Добавьте ссылку на вакансию или пришлите название компании и должность
3. Напишите номер кошелка USDT (Tether) на который отправить 10$

🛡

Важно:

– Запись будет использована только для сбора данных о вопросах
– Вы останетесь анонимны
– Запись нигде не будет опубликована

🤝

Условия:

– Внятный звук, различимая речь
– Допустимые профессии:
• Любые программисты
• DevOps
• Тестировщики
• Дата сайнтисты
• Бизнес/Системные аналитики
• Прожекты/Продукты
• UX/UI и продукт дизайнеры

Please open Telegram to view this post

VIEW IN TELEGRAM

😁9

5.09K views18:26

Что известно про преобразование типов ?
Спросят с вероятностью 7%

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

Виды преобразования

1️⃣Неявное (автоматическое):
Это преобразование, которое происходит автоматически при выполнении операций с разными типами данных. Например, при сложении числа и строки JavaScript автоматически преобразует число в строку.

2️⃣Явное:
Это преобразование, которое выполняется разработчиком явно с использованием встроенных функций или операторов.

Примеры неявного

1️⃣Строковое преобразование:
При конкатенации строки с числом число автоматически преобразуется в строку.

      const result = 'The answer is ' + 42;
   console.log(result); // 'The answer is 42'

2️⃣Числовое преобразование:
При выполнении арифметических операций строка, содержащая число, автоматически преобразуется в число.

      const result = '42' - 10;
   console.log(result); // 32

3️⃣Логическое преобразование:
В логическом контексте (например, в условиях if) значения автоматически приводятся к логическому типу (true или false).

      if ('hello') {
     console.log('This is true'); // This is true
   }

   if (0) {
     console.log('This is false'); // This will not be executed
   }

Примеры явного

1️⃣Преобразование в строку:
Для явного преобразования в строку можно использовать метод String() или оператор + с пустой строкой.

      const num = 42;
   const str1 = String(num);
   const str2 = num + '';

   console.log(str1); // '42'
   console.log(str2); // '42'

2️⃣Преобразование в число:
Для явного преобразования в число можно использовать функции Number(), parseInt(), или parseFloat().

      const str = '42';
   const num1 = Number(str);
   const num2 = parseInt(str, 10);
   const num3 = parseFloat(str);

   console.log(num1); // 42
   console.log(num2); // 42
   console.log(num3); // 42

3️⃣Преобразование в логическое значение:
Для явного преобразования в логическое значение можно использовать функцию Boolean() или двойное отрицание !!.

      const value = 0;
   const bool1 = Boolean(value);
   const bool2 = !!value;

   console.log(bool1); // false
   console.log(bool2); // false

Таблица преобразования типов

| Значение | К строке | К числу | К логическому |
|-------------------|-------------------|------------------|-----------------|
| undefined | 'undefined' | NaN | false |
| null | 'null' | 0 | false |
| true | 'true' | 1 | true |
| false | 'false' | 0 | false |
| 42 | '42' | 42 | true |
| 0 | '0' | 0 | false |
| '' (пустая строка) | '' | 0 | false |
| '42' | '42' | 42 | true |
| 'hello' | 'hello' | NaN | true |
| {} (пустой объект) | '[object Object]' | NaN | true |
| [] (пустой массив) | '' | 0 | true |
| [42] | '42' | 42 | true |
| [1, 2, 3] | '1,2,3' | NaN | true |

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

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

🔐 База собесов | 🔐 База тестовых

👍12❤11

6.65K views09:10

Объект для асинхронных операций

🤔 Что такое promise и какие состояния у него есть?

Anonymous Quiz

86%

Массив для данных

Метод для синхронных операций

Функция для событий

👍12

2.2K voters6.15K views16:10

Как расшифровывается css ?
Спросят с вероятностью 7%

CSS расшифровывается как Cascading Style Sheets, что в переводе означает "каскадные таблицы стилей". Давайте рассмотрим каждый элемент этого термина:

1️⃣Cascading (каскадные):
Этот термин указывает на то, что стили применяются к элементам HTML в определенном порядке приоритетов. Когда стили конфликтуют (например, когда одно и то же свойство задано несколькими стилями), CSS использует каскадные правила для разрешения этих конфликтов. Эти правила включают:
✅Специфичность селекторов (различные типы селекторов имеют разный приоритет).
✅Порядок расположения в коде (последний стиль имеет больший приоритет).
✅Использование ключевого слова !important (приоритет выше всех обычных правил).

2️⃣Style (стили):
Стили определяют, как должны выглядеть элементы HTML на веб-странице. Это включает в себя множество свойств, таких как цвета, шрифты, размеры, расположение, отступы и многие другие аспекты внешнего вида.

3️⃣Sheets (таблицы):
CSS-правила обычно хранятся в файлах, которые называются таблицами стилей. Эти файлы могут быть внешними (подключенными к HTML-документу через элемент <link>), встроенными (внутри элемента <style> в самом HTML-документе) или инлайновыми (непосредственно в атрибутах стиля HTML-элементов).

Вот пример CSS, который показывает использование каскадных таблиц стилей для стилизации HTML-документа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Example</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .inline-style {
      color: red;
    }
  </style>
</head>
<body>
  <h1 class="heading inline-style">Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

В этом примере:
✅Внешний файл styles.css задает стили для body, h1 и элементов с классом .heading.
✅Встроенные стили в элементе <style> задают цвет текста для элементов с классом .inline-style.
✅Каскадные правила CSS определяют, что цвет текста элемента <h1> будет красным, так как инлайновые стили имеют наибольший приоритет.

CSS расшифровывается как Cascading Style Sheets, что означает "каскадные таблицы стилей". Это язык, используемый для описания внешнего вида и форматирования HTML-документов, поддерживающий каскадные правила для разрешения конфликтов между стилями.

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

🔐 База собесов | 🔐 База тестовых

😁13👍5❤1

6.3K views09:10

Какие функции есть в js ?
Спросят с вероятностью 7%

Существует несколько типов функций, каждая из которых имеет свои особенности и области применения. Вот основные виды функций:

1️⃣Функциональные выражения и объявленные функции

Объявленные функции (Function Declaration)

Объявленные с использованием ключевого слова function, идущего перед именем функции. Эти функции "всплывают" (hoisted), что означает, что они могут быть вызваны до их определения в коде.

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

console.log(greet('Alice')); // Hello, Alice!

Функциональные выражения (Function Expression)

Не "всплывают" и не могут быть вызваны до их определения.
const greet = function(name) {
  returned 
};

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

2️⃣Стрелочные функции (Arrow Functions)

Это сокращенный синтаксис для создания функций, введенный в ES6. Они не имеют собственного контекста this и не могут быть использованы в качестве методов или конструктора.

const greet = (name) => Hello, ${name}!;

console.log(greet('Charlie')); // Hello, Charlie!

3️⃣Анонимные функции

Часто используются в качестве аргументов для других функций или для создания замыканий.

setTimeout(function() {
  console.log('This will run after 1 second');
}, 1000);

4️⃣Функции-конструкторы

Для создания объектов. Они вызываются с ключевым словом new и обычно имеют заглавную букву в названии.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const alice = new Person('Alice', 30);
console.log(alice.name); // Alice

5️⃣Методы объекта

Являются свойствами объекта.

const person = {
  name: 'Alice',
  greet: function() {
    return Hello, my name is ${this.name};
  }
};

console.log(person.greet()); // Hello, my name is Alice

6️⃣Генераторы (Generators)

Могут быть приостановлены и возобновлены в любой момент. Они объявляются с помощью function* и используют ключевое слово yield.

function* generatorFunction() {
  yield 'First';
  yield 'Second';
  yield 'Third';
}

const gen = generatorFunction();
console.log(gen.next().value); // First
console.log(gen.next().value); // Second
console.log(gen.next().value); // Third

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

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

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => console.log(data));

8️⃣Функции обратного вызова (Callbacks)

Передаваемые в качестве аргументов в другие функции и вызываемые позже.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // { name: 'Alice' }
});

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

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

🔐 База собесов | 🔐 База тестовых

👍34🔥7❤2

6.65K views09:10

Number, String, Boolean, Object

🤔 Какие примитивные типы данных существуют в JavaScript?

Anonymous Quiz

16%

77%

Number, String, Boolean, Undefined, Null, Symbol, BigInt

Integer, Float, String, Boolean, Null

Array, Function, Object, Undefined

👍12

2.17K voters6.16K views16:10