Как конвертировать массив в объект на JavaScript? Для этого можно воспользоваться обычным развертыванием с участием Spread оператора 🟨

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

👉 При развертывании:
➖ элементы массива будут конвертированы в свойства объекта
➖ создадутся стандартные ключи для свойств в виде индексов элементов из массива

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇

С помощью метода charAt можно узнать какой символ связан с заданным индексом в строке 🔗

Для этого достаточно задать строку и метод charAt через точку, указав в скобках индекс 🔍

Существует аналогичный противоположный метод indexOf, который возвращает индекс заданного символа из строки 👁‍🗨

Код со скрина:

// ✦ Получение символа по индексу из строки
let string = "Codorum";

function findSymbol(a) { console.log(a, "- это индекс символа", string.charAt(a)) }

findSymbol(5);


// ✦ Получение индекса символа из строки
function findIndex(a) { console.log(`Индекс символа ${a} =`, string.indexOf(a)) }

findIndex("C");

С 8 марта, дорогие наши прекрасные дамы! 🦄🪻🦋

Вы – наше вдохновение и мотивация. Ваши улыбки согревают наши сердца, а ваш образ дарует элегантность и веру в красоту этому миру как ничто другое. Пусть эта весна расцветет в ваших сердцах, наполнив их гармонией 🌸

Будьте любимы, окрылены мечтами и согреты искренними чувствами. С праздником! 💖

© Видео создано нашим веб-дизайнером Workford ✨

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Какая разница между декларацией функции (function declaration) и функциональным выражением (function expression)?

🔸 Function Declaration:
объявляется отдельным оператором function и доступна во всём блоке благодаря hoisting.

🔸 Function Expression:
присваивается переменной, не поднимается hoisting, то есть не может быть вызвана до объявления.

Вот почему пиксели – не лучшая единица измерения для разметки страницы 📏

Так как у экранов устройств разное разрешение, следовательно, разное количество пикселей по ширине и высоте экрана, используя фиксированную единицу измерения пиксель для разметки страницы, она будет отображаться на разных устройствах по-разному в плане масштаба 💻🖥

Почему единицы измерения viewport хорошее решение для адаптивной верстки? 📐

Эти относительные единицы измерения рассчитываются подобно процентам. Берётся размер окна браузера и рассчитывается сколько пикселей будет равно одному проценту. Благодаря viewport единицам элементы страницы лаконично ложатся и масштабируются под разные размеры экранов 🧮

throw – это оператор ключевое слово, использующийся для генерации собственных исключений или ошибок 🔴

Он позволяет создавать различные сценарии обработки ошибок в следствие выполнения функций ⚠

На скрине пример использования: есть функция "checkNumber", которая принимает переменную "variable". В блоке if прописано условие по проверке значения переменной. Если значение переменной не является числом, создается новая ошибка через оператор throw 🔌

Функция запускается в блоке try и если переменная является числом то она выводится в консоль, иначе в консоль выводится ошибка, которую была создана оператором throw 👁‍🗨

HTTP-заголовки – это часть протокола HTTP, которая передает дополнительную информацию вместе с HTTP-запросом или HTTP-ответом. Они состоят из пар ключ-значение и используются для передачи метаданных между клиентом (например, браузером) и сервером. Заголовки могут указывать тип содержимого, информацию о кэшировании, параметры авторизации, язык, тип браузера, разрешения для кросс-доменных запросов и многое другое 📄

👉 Основные типы HTTP-заголовков:
➖ Заголовки запроса (Request Headers)
➖ Заголовки ответа (Response Headers)
➖ Заголовки тела (Entity Headers)
➖ Заголовки маршрутизации (General Headers)

В JavaScript существуют разные типы операторов. В виде специальных символов или ключевых слов, использующихся для выполнения различных действий с переменными и значениями. Операторы могут выполнять арифметические, сравнительные, логические и другие операции 🟨

Также есть различное множество групп операторов символов: арифметические, логические, побитовые, тернарный, операторы присваивания, сравнения, унификации. На скрине продемонстрированы арифметические операторы, логические, операторы сравнения и тернарный оператор *⃣

В будущем рассмотрим вторую часть операторов символов и остановимся на каждой группе отдельно 👁‍🗨

Как подключить шрифт в CSS локально из папки проекта? 🔤

👉 Для этого:
➖ опционально создаём папку для шрифтов внутри проекта
➖ добавляем в нее файл шрифта
➖ в файле index.css добавляем CSS-правило @font-face
➖ добавляем в него свойство font-family с указанием шрифта
➖ добавляем свойство src, в котором указываем путь к шрифту

Подробнее в видео 👁‍🗨

Код из видео:

@font-face {
  font-family: "Название_шрифта";
  src: url("./fonts/Название_шрифта.ttf") format("truetype");
}

body {
  font-family: "Название_шрифта", sans-serif;
}

Для проведения одинаковых операций с каждым элементом массива в JavaScript, допустим для умножения каждого элемента массива на 2, может очень пригодится метод массива map (в данном случае идет речь именно о методе массива, а не о структуре данных Map) 🗺

Достаточно прописать небольшую конструкцию в скобках. В случае с кодом со скрина мы указали, что каждое число массива должно быть умножено на 2 👁‍🗨

Код со скрина:

// умножение каждого элемента массива на 2
let numbers = [3, 10, 7];
let doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);

Props – это короткое название для свойств от слова "properties", которые передаются компонентам из родительских в дочерние. Они позволяют компонентам взаимодействовать и обмениваться данными, делая React-проекты более гибкими ⚛

На скрине грубый и не совсем целесообразный, но наглядный пример обмена пропсом data между родительским компонентом ParentComponent и дочерним компонентом ChildComponent, который "хранит" переменную text 📬

Родительский компонент передает пропс data дочернему компоненту, который использует переменную text от пропса в своем синтаксисе в указанном месте ({props.data}). А синтаксис дочернего компонента, в свою очередь, отображается в родительском компоненте 👁‍🗨

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Что такое анонимная функция в JavaScript?

Анонимная функция – это функция без имени. Она часто используется там, где нет необходимости вызывать её повторно. Такие функции удобно передавать в качестве аргументов или использовать в качестве колбэков 🥷

Анонимными могут быть как стандартные функции, так и стрелочные функции. Пример анонимной функции и стрелочной анонимной функции на скрине 👁‍🗨

Методом Math.random можно сгенерировать случайное нецелое число в JavaScript 🎰

Но как сгенерировать случайное целое число? – Это можно сделать благодаря связке из методов Math.floor и Math.random 🎱

На скрине представлены способы генерации нецелого и целого числа 🎲

Чтобы сгенерировать случайное целое число – передаем методу Math.floor аргумент-выражение: Math.random помноженное на верхнюю границу + 1 👁‍🗨

👉 Math.random генерирует случайное нецелое число от 0 до 1
👉 Math.floor округляет числа до наименьшего целого

Как быстро равномерно распределить блоки по ширине пространства? 🟦

👉 При помощи свойства display со значением flex и свойства justify-content со значением:
➖ space-around и ширина пространства будет разделена на количество секций равное количеству блоков, каждый блок станет по центру секции
➖ space-between и блоки будут распределены по ширине пространства равномерно, но блоки уже не будут центрированы по секциям и также не будут добавлены отступы по бокам пространства

То есть со вторым значением space-between будут созданы одинаковые отступы между блоками, распределенными по ширине пространства 👁‍🗨

React компонент – это один из основных элементов, из которых состоят приложения или сайты на React ⚛

Компонентом может быть как самостоятельная страница сайта, так и какая-нибудь встроенная в страницу сайта функция, допустим, если речь идет о сайте на React 🧩

Типов компонентов существует довольно много, по каждому из которых мы пройдемся в будущих постах 📚

👉 На скрине простой пример компонента на Реакт:
➖ в самом вверху подключаются библиотеки и заголовочные файлы
➖ после объявления компонента добавляются функции
➖ а после ключевого слова return прописывается внешний вид компонента на HTML

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇