👁‍🗨 CODORUM

На собесах, в дополнение к техническим вопросам и заданию, иногда внезапно задают общие вопросы, поэтому сегодня немного расширим наш общий кругозор, вместо разбора очередного технического вопроса 🙌 👉 Каких известных людей из мира JS вы знаете? Казалось бы вопроса проще некуда не придумать и будет очень хорошо, если мы, как минимум, будем знать самого важного человека из мира JS – самого создателя Брендана Эйха, которому, кстати, завтра (4 июля) день рождения! 🎂 Брендан Эйх – программист, создавший JavaScript в 1995 году всего за 10 дней, работая в компании Netscape. Сначала язык назывался Mocha 🥴 (кофе Моккачино/Мокко с итал. mocaccino ☕), потом LiveScript, и уже впоследствии — JavaScript 🟨 Интересно, что JavaScript задумывался как легкий язык для скриптов в браузере – и никто тогда не представлял и не ожидал, что он станет основой современной веб-разработки 👁‍🗨

Рассмотрим тип объекта Promise в JavaScript ⚜️ Promise – это тип объекта, который используется для работы с асинхронными операциями и представления результата их выполнения 🔀 Промисы принимают два параметра: "решение" (resolve) и "отклонение операции" (reject) 🚥 А также у Промисов есть методы: then для обработки результата resolve и catch для обработки ошибки reject 👁‍🗨 Код со скрина:

const LoginPromise = new Promise((resolve, reject) => {

   const password = '123';

   if (password === 'codorum') { resolve('success'); }
   else { reject('wrong password'); }
});

LoginPromise
   .then((result) => { console.log(result); })
   .catch((error) => { console.error(error); });

Рекурсия ‒ это процесс вызова функцией самой себя для решения определенной задачи или вычисления определенного значения до тех пор, пока не будет достигнуто базовое условие или сделано достаточное количество вызовов 🔁 В примере кода на скрине есть рекурсивная функция по нахождению факториала числа 🧮 И эта функция будет выполняться снова и снова пока не будет достигнуто условие в if ⛔ Каждое повторение выполнения функции уменьшает значение n, которое на третьей итерации уменьшится до единицы (до условия прекращения выполнения функции) 👁‍🗨

Как сделать плавное поднятие блока вверх при hover наведении в CSS? 🟦 👉 Для этого нужна комбинация из всего 2-х свойств: ➖ свойство transition в классе блока с указанием значения времени, за которое будет выполнятся анимация смещения блока ➖ свойство transform в псевдоклассе hover для блока с указанием расстояния и направления смещения блока Код из видео:

.card {
  width: 100px;
  height: 150px;
  display: grid;
  text-align: center;
  place-items: center;
  background-color: #141117;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s; /* время, за которое выполняется смещение */
} 

.card:hover {
  transform: translateY(-5px); /* направление и расстояние */
  box-shadow: 0px 5px 5px #14111790;
}

Благодаря методу startsWith можно проверить начинается ли строка с указанной буквы или символа в JavaScript 🔦 Применение метода стандартное: указываем строку и метод startsWith через точку, в скобках указываем букву, наличие которой необходимо проверить в начале строки 🔬 Важно учесть, что нужно уточнять регистр буквы, которую мы проверяем: верхний или нижний. Если буква будет правильной, но регистр будет не тот - получим значение false 👁‍🗨

Встроенные функции (built-in functions) — это готовые функции, уже встроенные в JavaScript, которые можно использовать без дополнительного объявления. Они значительно упрощают работу, позволяя быстро выполнять распространенные задачи 🪡 Примеры: 🔸 eval() — выполняет строку как код 🔸 parseInt() — преобразует строку в целое число В JavaScript глобальных встроенных функций – около 12. Но четко зафиксировать их часто бывает тяжело, так как: 👉 стандарт ECMAScript регулярно обновляется и в каждой новой версии могут появляться новые методы и функции; 👉 есть встроенные объекты (Math, String, Array и т. п.), содержащие много своих методов (функции), которые часто называют встроенными (но фактически они не являются глобальными встроенными функциями, позже разберем почему).

При помощи Spread оператора можно легко объединить массивы или объекты в JavaScript 🤝 🪵 Для того чтобы объединить массивы, достаточно объявить новую константу и в квадратных скобках перечислить массивы, которые необходимо объединить через запятую, указав перед ними многоточия. В данном случае таким многоточием обозначается Spread оператор. 🧱 Для объединения объектов рецепт точно такой же, но вместо квадратных скобок используются фигурные скобки.

C помощью HTML-тега span можно стилизовать определенный текст или слово в предложении не задев стиль остального текста предложения 🟧 span — это HTML-тег, используемый для определения инлайнового элемента, который может содержать текст или другие встроенные элементы 🎞 👉 В CSS можно использовать селекторы для определения стилей элементов, обернутых в span-теги: ➖ на скрине у нас есть предложение внутри блока div, обернутое в тег <p></p> ➖ внутри этого предложения часть строки, которой присвоен класс accent, обёрнута в тег <span></span> ➖ теперь эту часть строки можно индивидуально стилизовать через класс accent

Y

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Как проверить, является ли число конечным в JavaScript? Или оно бесконечное? ♾ В JavaScript проверить, является ли число конечным, можно с помощью встроенной функции isFinite() isFinite() автоматически преобразует аргумент в число, если это возможно. В отличие от метода объекта Number.isFinite() 👁‍🗨

Метасимвол — это один из типов символов, которые в сумме помогают формировать более точные регулярные выражения для поиска групп символов или паттернов в строках 🔍 В видео мы рассмотрели 2 метасимвола, которые присутствуют в регулярном выражении для поиска слов, начинающихся с буквы "a" *⃣ 👉 А именно: ➖ \b - метасимвол, указывающий на то, что мы ищем букву в начале слова ➖ \w+ - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком Код со скрина:

let str = "ah sh*t, here we go again..."

// ✦ Регулярное выражение
let regexp = /\ba\w+/g;

// "/" - символ, в который оборачиваются выражения
// "\b" - метасимвол, указывающий на то, что мы ищем букву в начале слова
// "a" - первая буква слов, которые мы ищем
// "\w+" - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком
// "/g" - глобальный поиск (флаг)

console.log(str.match(regexp));

Пост для новичков канала 🖖 В сентябре мы написали сайт-визитку на ReactJS. Кому интересно — приглашаем к просмотру ⚛️ Плейлист с частями доступен на нашем ютуб канале 🪪 В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании разных CSS анимаций 🟦 Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть. На финальный результат можно взглянуть в 20-й части 👈

for...in и for...of — это два разных типа циклов в JavaScript, и они используются для разных целей 🟨 ➖ for...in используется для перебора свойств объектов ➖ for...of используется для перебора значений объектов, которые являются итерабельными (например массивы, строки, коллекции и так далее) Код со скрина:

const person = { name: 'John', age: 30, job: 'developer' };
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

const fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit);
}

Небольшая история разделения псевдоклассов и псевдоэлементов 📘 В CSS2 все псевдоклассы и псевдоэлементы записывались с одним двоеточием 👉 :hover, :before, :after В CSS3 решили разделить: 👉 : — для псевдоклассов (например, :hover, :nth-child) 👉 :: — для псевдоэлементов (например, ::before, ::after) Но некоторые псевдоклассы, такие как ::selection, хотя и имеют двойные двоеточия, не являются полноценными псевдоэлементами — это исключение из правила ⚠ в случае с ::selection – это особый случай, ::selection отвечает за "интерактивную часть элемента", а не отдельный DOM-элемент, как у настоящих псевдоэлементов 👁‍🗨

Благодаря методу replace можно заменять слова или символы в строке 🎭 ➖ первым аргументом, передаваемым методу указываем слово или символ, которое нужно заменить ➖ вторым - слово или символ, на которое нужно заменить По умолчанию метод найдет первое совпадение и заменит его, но если нужно заменить все совпадения - можно использовать глобальный флаг /g. Также методу можно передавать аргументы в виде функций 👁‍🗨

В JavaScript есть достаточное разнообразие циклов. Рассмотрим цикл do...while 🟨 do...while – это цикл, который сначала выполняет блок кода, а затем проверяет условие продолжения выполнения 🔂 Цикл гарантирует, что блок кода выполнится по крайней мере один раз, даже если условие не будет соблюдено ⚠ На скрине пример использования цикла: после запуска будет проведено 5 итераций, на каждой итерации значение переменной i увеличивается на единицу, затем проверяется условие в блоке while "i < 5". Если условие выполняется - цикл будет продолжать повторять выполнение, пока i не станет больше 5 или не будет равно 5 👁‍🗨