В 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, а в скобках после метода указываем объект проверки 👁‍🗨

Заменит ли Искусственный интеллект человека? 🤖

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

Видео на украинском, для украинской части аудитории 🇺🇦

👉 Ссылка на видео ▶

Как настроить фокус на кнопках при нажатиях в CSS? 🟦

Для этого необходимо настроить свойство outline в классе кнопки или в псевдоклассах: focus и focus-visible 👁

🔹 Если задать обводку в псевдоклассе focus класса кнопки - обводка будет появляться при нажатии 🖱

🔹 Если задать обводку в псевдоклассе focus-visible - обводка не будет появляться при нажатии на кнопку мышкой, но будет появляться при нажатии любой клавиши на клавиатуре после того как перед этим мы нажали на кнопку мышкой ⌨

🔹 Чтобы вовсе отключить обводку при любом взаимодействии с кнопкой - задаем значение none в свойстве outline класса кнопки ❌

Чем отличается Spread оператор от Rest оператора в JavaScript? 🤔

Spread оператор развертывает массивы или объекты в другие массивы или объекты ⤵

Rest оператор это дополнительная функция в деструктуризации, выполняющая противоположную функцию оператора Spread ⤴

Он объединяет остаточные элементы массива или свойства и т. д. 👁‍🗨

Краткое сравнение подходов работы с асинхронным кодом в JavaScript: сallbacks vs promises vs async/await 🔀

🔶 Callbacks – самый старый подход. Передаем функцию как аргумент и вызываем её позже.
➖ минусы: callback hell, тяжело читать и обрабатывать ошибки.

🔶 Promises – объект, представляющий результат асинхронной операции. Стабильная база. Методы: .then() для результата, .catch() для ошибок.
➖ более чистый и понятный код, чем с callback'ами.

🔶 Async/await – синтаксический сахар над промисами. Пишем асинхронный код как синхронный. Must-have в современном коде.
➖ легко читается.

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

👉 Все операторы в JavaScript можно условно разделить на 2 типа: операторы символы и операторы ключевые слова

➖ К операторам символам можно отнести: операторы присваивания, побитовые операторы, тернарный оператор, операторы Spread и Rest. Потому что все эти операторы записываются в виде символа или набора из нескольких символов.

➖ К операторам ключевым словам можна отнести все ключевые слова, которые играют роль операторов в JavaScript. Например, typeof, instanceof, new и так далее.

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания 🗂

Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🖋

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

Уже знаете о новой CSS-функции? 🟦

Она уже поддерживается в таких браузерах: Opera, Chrome и Edge 🌐

Принцип работы функции стандартный:
✅ если условие – истинно, применяется соответствующее значение свойству, где прописана функция
❌ если условие не соблюдено — используется else

Пример реализации с кнопкой (если тема браузера светлая - цвет кнопки 🟪 фиолетовый, если тема тёмная - цвет кнопки 🟦 синий):

button {
  background-color: if(
    media(prefers-color-scheme: light): blueviolet;
    else: blue
  );

  padding: 10px 20px;
  border: none;
  color: white;
}

useReducer – это React хук, использующийся для управления состоянием компонентов с помощью reducer-функции ⚛

reducer-функция – функция, принимающая параметры состояния компонента state и объект action. Объект action несет информацию про действие, на основе которого функция определяет какое действие необходимо совершить при обновлении состояния state 🤾

Код из видео:

import { useReducer } from 'react';

const initialState = { count: 0 };

const reducerFunction = (state, action) => { switch (action.type) {
  case 'increment':
    return {count: state.count + 1};
  case 'decrement':
    return {count: state.count - 1};
  default:
    return state;
}};

const Component = () => {
  const [state, dispatch] = useReducer(reducerFunction, initialState)

  return (
    <div>
      <p>Счёт: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Увеличить</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Уменьшить</button>
    </div>
);};

export default Component;