👁‍🗨 CODORUM

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания 🗂 Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🖋 Иммутабельные данные, напротив, не могут быть изменены после создания. Любое изменение таких данных приводит к созданию новой копии с изменениями, оставляя оригинал нетронутым. Пример иммутабельных типов данных: строки, числа, булевые значения 🔏

Операторы в JavaScript – это специальные символы или ключевые слова, которые используются для выполнения различных действий с переменными и значениями 🟨 👉 Все операторы в JavaScript можно условно разделить на 2 типа: операторы символы и операторы ключевые слова ➖ К операторам символам можно отнести: операторы присваивания, побитовые операторы, тернарный оператор, операторы Spread и Rest. Потому что все эти операторы записываются в виде символа или набора из нескольких символов. ➖ К операторам ключевым словам можна отнести все ключевые слова, которые играют роль операторов в JavaScript. Например, typeof, instanceof, new и так далее.

Краткое сравнение подходов работы с асинхронным кодом в JavaScript: сallbacks vs promises vs async/await 🔀 🔶 Callbacks – самый старый подход. Передаем функцию как аргумент и вызываем её позже. ➖ минусы: callback hell, тяжело читать и обрабатывать ошибки. 🔶 Promises – объект, представляющий результат асинхронной операции. Стабильная база. Методы: .then() для результата, .catch() для ошибок. ➖ более чистый и понятный код, чем с callback'ами. 🔶 Async/await – синтаксический сахар над промисами. Пишем асинхронный код как синхронный. Must-have в современном коде. ➖ легко читается.

Чем отличается Spread оператор от Rest оператора в JavaScript? 🤔 Spread оператор развертывает массивы или объекты в другие массивы или объекты ⤵ Rest оператор это дополнительная функция в деструктуризации, выполняющая противоположную функцию оператора Spread ⤴ Он объединяет остаточные элементы массива или свойства и т. д. 👁‍🗨

Как настроить фокус на кнопках при нажатиях в CSS? 🟦 Для этого необходимо настроить свойство outline в классе кнопки или в псевдоклассах: focus и focus-visible 👁 🔹 Если задать обводку в псевдоклассе focus класса кнопки - обводка будет появляться при нажатии 🖱 🔹 Если задать обводку в псевдоклассе focus-visible - обводка не будет появляться при нажатии на кнопку мышкой, но будет появляться при нажатии любой клавиши на клавиатуре после того как перед этим мы нажали на кнопку мышкой ⌨ 🔹 Чтобы вовсе отключить обводку при любом взаимодействии с кнопкой - задаем значение none в свойстве outline класса кнопки ❌

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

Самый простой способ проверить является ли объект массивом в JavaScript – это применение метода isArray 🟨 Метод возвращает true, если переданный объект является массивом, и false - если нет 🚥 Так как это метод массива, перед применением метода следует прописывать Array, а в скобках после метода указываем объект проверки 👁‍🗨

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Можно ли записывать новые свойства/функции в прототипы стандартных классов (Array, Object и т.п.)? ⚠ Технически да, но это не рекомендуется делать ведь: ➖ это может привести к конфликтам с другими библиотеками или будущими обновлениями языка ➖ ломается принцип изоляции кода ➖ стандартные методы могут вести себя непредсказуемо ✅ Можно, если: ➖ ты пишешь собственный фреймворк и четко контролируешь среду ➖ расширение сделано осторожно и уникальным именем, которое не появится в будущих обновлениях Но безопаснее создать утилитарную функцию или собственный класс-потомок 👁‍🗨

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

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨 Проголосуйте в следующем посте 👇

try...catch – это конструкция, которая позволяет контролировать обработку ошибок во время выполнения кода 📮 👉 Она состоит из двух основных блоков: ➖ try, где выполняется код, который может привести к ошибкам ➖ catch, обрабатывающий ошибку, если она возникает в блоке try Также может быть дополнительный 3-й блок finally, который выполняется всегда, независимо от того, возникла ошибка или нет 👁‍🗨

Как сделать чтобы ссылка открывалась в новой вкладке по нажатию на кнопку (html-элемент) в HTML? 🟧 Во-первых, следует использовать html-элемент <a>, предназначенный для создания гиперссылок 🔗 Во-вторых, к нему необходимо добавить атрибут target со значением "_blank" 🔸 В видео мы рассмотрели пример кнопки-ссылки, реализованной с помощью html-элемента <a> 👁‍🗨

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

Принцип работы функции в JS ⚙ Функция – это блок кода, выполняющий определенное действие или вычисление. Функция позволяет сгруппировать определенную функциональность, чтобы использовать её многократно без необходимости повторения кода. Это позволяет создавать многофункциональные программы с меньшим объемом кода и обеспечивает более легкую работу с кодом в большом проекте 🕹 👉 Основные этапы работы функции включают: ➖ определение ➖ вызов ➖ исполнение Функция принимает параметры, которыми выполняет определенные действия внутри функции 👁‍🗨

В JavaScript существует своё разнообразие структур данных. Разберем структуру данных HashMap 🟨 HashMap – структура данных, позволяющая хранить данные в виде пар "ключ-значение", и обеспечивает быстрый доступ к этим данным по ключу 🔑 Роль хэшмапов могут выполнять объекты или Map 🗂 Ключи в HashMap могут быть любого типа (в случае объекта – только символ или строка, а в случае Map – любые типы). Значения привязываются к ключам и для получения значения нужно знать ключ 🔐 Хэшмапы можно использовать вместо switch, как в примере с кодом со скрина 👁‍🗨

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

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
};