Встроенные функции (built-in functions) — это готовые функции, уже встроенные в JavaScript, которые можно использовать без дополнительного объявления. Они значительно упрощают работу, позволяя быстро выполнять распространенные задачи 🪡

Примеры:
🔸 eval() — выполняет строку как код
🔸 parseInt() — преобразует строку в целое число

В JavaScript глобальных встроенных функций – около 12. Но четко зафиксировать их часто бывает тяжело, так как:
👉 стандарт ECMAScript регулярно обновляется и в каждой новой версии могут появляться новые методы и функции;
👉 есть встроенные объекты (Math, String, Array и т. п.), содержащие много своих методов (функции), которые часто называют встроенными (но фактически они не являются глобальными встроенными функциями, позже разберем почему).

Благодаря методу startsWith можно проверить начинается ли строка с указанной буквы или символа в JavaScript 🔦

Применение метода стандартное: указываем строку и метод startsWith через точку, в скобках указываем букву, наличие которой необходимо проверить в начале строки 🔬

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

Как сделать плавное поднятие блока вверх при 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;
}

Рекурсия ‒ это процесс вызова функцией самой себя для решения определенной задачи или вычисления определенного значения до тех пор, пока не будет достигнуто базовое условие или сделано достаточное количество вызовов 🔁

В примере кода на скрине есть рекурсивная функция по нахождению факториала числа 🧮

И эта функция будет выполняться снова и снова пока не будет достигнуто условие в if ⛔

Каждое повторение выполнения функции уменьшает значение n, которое на третьей итерации уменьшится до единицы (до условия прекращения выполнения функции) 👁‍🗨

Рассмотрим тип объекта 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); });

На собесах, в дополнение к техническим вопросам и заданию, иногда внезапно задают общие вопросы, поэтому сегодня немного расширим наш общий кругозор, вместо разбора очередного технического вопроса 🙌

👉 Каких известных людей из мира JS вы знаете?

Казалось бы вопроса проще некуда не придумать и будет очень хорошо, если мы, как минимум, будем знать самого важного человека из мира JS – самого создателя Брендана Эйха, которому, кстати, завтра (4 июля) день рождения! 🎂

Брендан Эйх – программист, создавший JavaScript в 1995 году всего за 10 дней, работая в компании Netscape. Сначала язык назывался Mocha 🥴 (кофе Моккачино/Мокко с итал. mocaccino ☕), потом LiveScript, и уже впоследствии — JavaScript 🟨

Интересно, что JavaScript задумывался как легкий язык для скриптов в браузере – и никто тогда не представлял и не ожидал, что он станет основой современной веб-разработки 👁‍🗨

useContext – это React хук, позволяющий компонентам Реакт проекта принимать данные из контекстов ⚛

👉 useContext лучше использовать:
➖ когда данные используются во многих компонентах на разных уровнях (например: тема, язык, текущий пользователь)
➖ чтобы избавиться от prop drilling (процесс передачи пропсов через несколько уровней вложенных компонентов)
➖ для лучшей структурированности кода

Код из видео:

import React, { createContext, useContext } from 'react';


const Context = createContext();

// основной компонент
const MainComponent = () => {
  const number = 123;

  return (
    <Context.Provider
      value={number}>
      <ChildComponent />
    </Context.Provider>
  );
};

// подкомпонент
const ChildComponent = () => {
  const num = useContext(Context)

  return <p>{num}</p>; // num = number = 123
};

HTML-теги для быстрой стилизации текста в HTML-разметке без задействования CSS 🟧

➖ <b> или же <strong>: <b> — просто визуально выделяет, делая текст жирным, а <strong> — имеет семантическое значение (важно для доступности, SEO).
➖ <i> или же <em>: <i> — лишь стиль, <em> — семантический акцент.
➖ <s> или же <del>: <s> — обозначает устаревшее, но все еще присутствующее (например, старая цена), <del> — текст официально удалён.
➖ <u> или же <ins>: <u> — лишь стиль, <ins> — имеет семантическое значение (для отслеживания изменений, истории правок).

В JavaScript существует своё разнообразие структур данных. Разберем структуру данных HashMap 🟨

HashMap – структура данных, позволяющая хранить данные в виде пар "ключ-значение", и обеспечивает быстрый доступ к этим данным по ключу 🔑

Роль хэшмапов могут выполнять объекты или Map 🗂

Ключи в HashMap могут быть любого типа (в случае объекта – только символ или строка, а в случае Map – любые типы). Значения привязываются к ключам и для получения значения нужно знать ключ 🔐

Хэшмапы можно использовать вместо switch, как в примере с кодом со скрина 👁‍🗨

Принцип работы функции в JS ⚙

Функция – это блок кода, выполняющий определенное действие или вычисление. Функция позволяет сгруппировать определенную функциональность, чтобы использовать её многократно без необходимости повторения кода. Это позволяет создавать многофункциональные программы с меньшим объемом кода и обеспечивает более легкую работу с кодом в большом проекте 🕹

👉 Основные этапы работы функции включают:
➖ определение
➖ вызов
➖ исполнение

Функция принимает параметры, которыми выполняет определенные действия внутри функции 👁‍🗨

С помощью метода filter можно отфильтровать элементы массива в JavaScript 🔽

Метод создает новый массив, в который переносятся элементы, удовлетворяющие заданное условие из основного массива 🤲

Для применения метода: указываем массив с элементами и метод filter, в скобках указываем условие для отбора 🚥

Элементы основного массива могут быть любого типа: числа, строки, объекты, булевые значения, даже undefined или null. Задача метода – оставить только те элементы, для которых условие возвращает true 👁‍🗨

Как сделать чтобы ссылка открывалась в новой вкладке по нажатию на кнопку (html-элемент) в HTML? 🟧

Во-первых, следует использовать html-элемент <a>, предназначенный для создания гиперссылок 🔗

Во-вторых, к нему необходимо добавить атрибут target со значением "_blank" 🔸

В видео мы рассмотрели пример кнопки-ссылки, реализованной с помощью html-элемента <a> 👁‍🗨

try...catch – это конструкция, которая позволяет контролировать обработку ошибок во время выполнения кода 📮

👉 Она состоит из двух основных блоков:
➖ try, где выполняется код, который может привести к ошибкам
➖ catch, обрабатывающий ошибку, если она возникает в блоке try

Также может быть дополнительный 3-й блок finally, который выполняется всегда, независимо от того, возникла ошибка или нет 👁‍🗨

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

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

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

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

На скрине пример использования оператора break на примере цикла for: есть цикл, увеличивающий значение переменной "i" на единицу на каждой итерации, а также условие, что оператор break должен быть вызван и прервать последующие итерации (прервать выполнение цикла), когда значение переменной "i" достигнет 5 👁‍🗨

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

👉 Можно ли записывать новые свойства/функции в прототипы стандартных классов (Array, Object и т.п.)?

⚠ Технически да, но это не рекомендуется делать ведь:
➖ это может привести к конфликтам с другими библиотеками или будущими обновлениями языка
➖ ломается принцип изоляции кода
➖ стандартные методы могут вести себя непредсказуемо

✅ Можно, если:
➖ ты пишешь собственный фреймворк и четко контролируешь среду
➖ расширение сделано осторожно и уникальным именем, которое не появится в будущих обновлениях

Но безопаснее создать утилитарную функцию или собственный класс-потомок 👁‍🗨

Самый простой способ проверить является ли объект массивом в JavaScript – это применение метода isArray 🟨

Метод возвращает true, если переданный объект является массивом, и false - если нет 🚥

Так как это метод массива, перед применением метода следует прописывать Array, а в скобках после метода указываем объект проверки 👁‍🗨