CodeRoll | Frontend

Используем принципы “Чистого кода” в контексте JavaScript. Часть 2

Функции

Аргументы функции - в идеале их должно быть 2 или меньше Ограничение количества параметров функции невероятно важно, поскольку это упрощает тестирование вашей функции. Наличие более трех приводит к комбинаторным сложностям, когда вам приходится тестировать множество различных случаев с каждым отдельным аргументом Один или два аргумента — идеальный случай, а трех следует избегать, если это возможно. Все, что больше, следует объединять. Обычно, если у вас больше двух аргументов, то ваша функция пытается сделать слишком много. В тех случаях, когда это не так, в большинстве случаев в качестве аргумента будет достаточно объекта более высокого уровня Поскольку JavaScript позволяет создавать объекты на лету, без большого количества шаблонных классов, вы можете использовать объект, если вам нужно много аргументов Чтобы сделать очевидным, какие свойства ожидает функция, вы можете использовать синтаксис деструктуризации ES2015/ES6 Coderoll | Frontend

❓ Какие методы массива являются мутирующими? Ответ: Мутирующими называются методы, которые изменяют исходный массив. К таким методам относятся: push() — добавляет элемент в конец массива. pop() — удаляет последний элемент массива. shift() — удаляет первый элемент массива. unshift() — добавляет элемент в начало массива. splice() — добавляет/удаляет элементы в любом месте массива. sort() — сортирует элементы массива. reverse() — меняет порядок элементов на противоположный. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Нажмите на ссылку: Вход 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

❓ Что такое Proxy в JavaScript? Ответ: Proxy — это объект, который позволяет перехватывать операции (например, чтение свойств, установку значений, вызов функций) над другим объектом. Это используется для мониторинга, валидации или изменения поведения объекта. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

⚡️Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника На канале Интенсивный JavaScript разработчик и действующий тимлид помогает изучить фронтенд на практике Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду С 27 по 30 января он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля Что получите на интенсиве ✅ Напишете свой проект на JS: сайт-портфолио с интерактивом ✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать ✅ Что делать с ИИ: стоит ли заходить в ИТ, или уже поздно, и нас всех заменят ✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка Подписывайтесь, осталось 27 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, — приходите на интенсив. Увидите путь от вёрстки до Angular и сможете продолжать изучать фронтенд без хаоса в голове. 👉Участвовать бесплатно

❓ Что делает Object.freeze? Object.freeze замораживает объект, т.е нельзя добавить, удалить или изменить свойства Подходит для защиты конфигураций и констант. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

👩‍💻👩‍💻 Как выглядит алгоритм гномьей сортировки на JavaScript?

Алгоритм находит первое место, где два соседних элемента стоят в неправильном порядке и меняет их местами

const gnomeSort = (arr: number[]): number[] => {
  if (arr.length <= 1) {
    return arr
  }

  let i: number = 1

  while (i < arr.length) {
    if (arr[i - 1] <= arr[i]) {
      i++ //increment index if sub-array[0:i] already sorted
    } else {
      ;[arr[i], arr[i - 1]] = [arr[i - 1], arr[i]] //swapping two numbers
      i = Math.max(1, i - 1) //go back to the previous index to check the swapped number
    }
  }
  return arr
}

Coderoll | Frontend

❓ Что такое Object.defineProperty? Ответ: Object.defineProperty позволяет определить новое свойство в объекте или изменить существующее, с указанием его настроек (например, enumerable, writable, configurable). Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

❓ Что такое Event Loop и как он работает? Ответ: Event Loop — это механизм, который управляет потоком выполнения кода в JavaScript, обеспечивая асинхронность. Он проверяет Call Stack и очереди задач (например, микрозадачи и макрозадачи) и выполняет их в нужном порядке. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

❓ Что такое Callback Hell? Ответ: Callback Hell — это ситуация, когда код становится трудно читаемым и поддерживаемым из-за глубокой вложенности коллбэков. Это часто происходит при работе с асинхронными операциями. Проблему можно решить с помощью Promises или Async/Await. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

⚡️Перечислите хотя бы 4 метода HTTP Ответ: GET, POST, PUT, DELETE Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

Используем принципы “Чистого кода” в контексте JavaScript.

Функции

❗️ Не создавайте глобальные функции, которые могут создать конфликт с аналогичными функциями сторонних библиотек

Давайте разберем на примере: что, если вы хотите расширить собственный метод JavaScript Array, чтобы иметь метод diff, который мог бы показать разницу между двумя массивами?

Вы можете написать свою новую функцию в Array.prototype, но она может конфликтовать с другой библиотекой, которая попытается сделать то же самое Что, если эта другая библиотека просто использует diff, чтобы найти разницу между первым и последним элементами массива? Вот почему было бы гораздо лучше просто использовать классы ES2015/ES6 и просто расширить глобальный Array. Coderoll | Frontend

👩‍💻👩‍💻 Как выглядит алгоритм экспотенциального поиска на JavaScript? Экспоненциальный поиск позволяет выполнять поиск по отсортированному неограниченному списку для указанного входного значения (поисковый «ключ») Алгоритм состоит из двух этапов. Первый этап определяет диапазон, в котором ключ поиска находился бы, если бы он был в списке. На втором этапе выполняется бинарный поиск по этому диапазону ❗️ В нашем примере binarySearchIterative - это функция бинарного поиска, про который мы уже писали раньше

export const exponentialSearch = (
  array: number[],
  x: number
): number | null => {
  const arrayLength = array.length
  if (arrayLength === 0) return null

  if (array[0] === x) return 0

  let i = 1
  while (i < arrayLength && array[i] <= x) {
    i = i * 2
  }

  const start = Math.floor(i / 2)
  const end = Math.min(i, arrayLength - 1)
  const result = binarySearchIterative(array, x, start, end)

  return result
}

Coderoll | Frontend

⚡️ Пара методов для объектов в JS, которую должен знать каждый Object.keys() - это метод, который возвращает массив из собственных перечисляемых свойств переданного объекта Пример:

var obj = { first: "a", second: "b", third: "c" };
console.log(Object.keys(obj)); 

// консоль: [ 'first', 'second', 'third' ]

Не забудьте, что массивы - это тоже объекты, и к ним тоже можно применить данный метод. Хотя это и не нужно н практике Object.values() - это метод, который возвращает массив значений перечисляемых свойств объекта Пример:

const user = {
  name: 'John',
  surname: "Smith",
  age: 35,
};

console.log(Object.values(user));
// консоль: Array [ 'John', 'Smith', 35 ]

Coderoll | Frontend

Сервис-генератор фона с градиентом Хороший сервис, который способен генерить фоны из нескольких цветов, чтобы всё выглядело хорошо (вместо обычных 2-3 цветов) ➡️Открыть сервис Coderoll | Frontend

❓Что такое “middleware” в Redux? Ответ: Middleware в Redux — это промежуточные слои, которые могут перехватывать и обрабатывать действия перед тем, как они будут отправлены в редьюсер. Примером является redux-thunk, который позволяет использовать асинхронные операции. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend