Скоупинг – понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода 🧿

Основные аспекты скоупинга: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹

Сегодня о аспекте – поднятие (Hoisting) ⬆️

Перед выполнением кода JS сканирует его и создает все переменные и функции в области видимости (Scope). Интерпретатор ведет себя так, будто объявления подняты вверх, включая переменные объявленные после их применения в функциях. То есть JS видит объявление var msg (в случае с кодом на скрине) ещё до выполнения кода console.log(msg). Но стоит учесть, что поднимается только объявление, а не значение 🔬

Hoisting – это особенность JS, позволяющая вызывать функции до их объявления. Но современный JS почти не использует это. Из-за hoisting с var, игнорирующего блочный Scope возникало много багов, поэтому появились let и const. Сейчас переменные объявляют перед их использованием, Поднятие фактически используется только для function declaration 👁‍🗨

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

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

use strict – это директива JavaScript, которая активирует строгий режим для скрипта или отдельной функции 👮‍♂️

Строгий режим делает несколько изменений в поведении языка для повышения безопасности и производительности кода 🔌

👉 Особенности и изменения, которые внедряет строгий режим:
➖ запрет использования необъявленных переменных
➖ запрет удаления объектов и функций
➖ запрет дубликатов параметров в функциях
➖ глобальный объект неявно не привязывается
➖ дополнительные ограничения для зарезервированных слов

В видео подробнее раскрыта каждая из особенностей 👁‍🗨

Использование строгого режима use strict часто рекомендуется, поскольку он помогает выявлять потенциальные ошибки и делает код более предсказуемым и безопасным 🧷

Как сделать анимацию движения линии по кнопке при hover наведении в CSS? 🟦

👉 Для этого нужно:
1⃣ стилизовать кнопку в отдельном классе, в который стоит добавить свойство overflow со значением hidden, чтобы линия не выходила за границы кнопки
2⃣ прописать псевдоэлемент :before, в котором стилизуется линия и тут ключевыми свойствами будут position и transform с указанием положения линии до hover наведения.
3⃣ прописать конструкцию :hover:before, в которой прописать положение линии при наведении на кнопку

css
.button {
  position: relative;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #b685ff;
  border-radius: 8px;
  width: 300px;
  height: 100px;
  color: white;
}

.button:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffde;
  transition: 1s;
  transform: rotate(-20deg) translateX(-200px);
}

.button:hover:before {
  transform: rotate(-20deg) translateX(200px);
}

Что такое наследование классов в JavaScript? 👯‍♀️

Наследование классов – это когда новый класс наследует свойства и методы с другого класса 🫴

Например, класс Programmer наследует класс Writer на примере со скрина 🎆

Это означает что теперь в классе Programmer есть такой же конструктор и методы как в классе Writer 👏

Соответственно теперь мы можем присвоить новый класс Programmer объекту и использовать метод, аналогичный методу класса Writer 👁‍🗨

Код со скрина:

class Writer {
    constructor(name) {
      this.name = name;
    }

    think() {
      console.log(`${this.name} думает`);
    }
}

// класс Programmer наследует свойства и методы класса Writer
class Programmer extends Writer {}

const Codorum = new Programmer('Codorum');

Codorum.think();

С помощью метода slice можно вырезать (скопировать) часть элементов из массива или часть текста со строки в новый массив или строку 🔪

В отличие от метода splice, который работает с массивами чисел аналогично методу slice, метод slice еще может вырезать промежуток символов со строки 🔠

Для применения метода можно объявить новую переменную, через знак равенства указать исходный массив или строку, затем метод и в скобках указать промежуток элементов или символов, которые нужно вырезать (скопировать) в новую переменную в качестве массива или строки 🔢

Метод вырежет промежуток учитывая элемент, индекс которого был указан первым в скобках, но не учитывая элемент, индекс которого был указан вторым в скобках 👁‍🗨

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

Полностью - наверняка нет. Не всех.

Во-первых, очевидно, что работодатели не смогут и не будут управлять всем сами. Какой-то минимальный управляющий штат будет необходим. Для управления теми же ИИ-агентами, подстраивания LLM-систем под нужные процессы 🔧

Во-вторых, благодаря/вопреки развитию ИИ происходит не только сокращение, но и рост количества стартапов, а следовательно и рост рабочих мест 📈

В-третьих, ИИ не сможет создавать в точности как человек. Да, человек создает что-то также вдохновляясь чем-то, перенимая чей-то опыт, компилируя уже имеющуюся информацию, как и ИИ на какой-то базе данных. Но есть ключевое отличие в создании (компиляции если хотите) чего-то Искусственным интеллектом и Человеком, про которое подробнее представлено мнение в видео на нашем Ютуб канале 👁

ИИ - конкурент, но пока явно не замена и не полноценная альтернатива Человеку 👨‍💻

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

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

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

👉 Что такое Webpack в веб-разработке?

Webpack – это сборщик модулей (module bundler), объединяющий все файлы проекта (js/jsx, css, изображения и т.д.) в один или несколько оптимизированных файлов для браузера ✅

📦 Что он делает:
➖ объединяет файлы (bundle)
➖ оптимизирует код (минимизация, удаление лишнего)
➖ поддерживает современный JS через транспайлеры (например, Babel)
➖ работает с CSS, изображениями и другими ресурсами
➖ позволяет использовать модули (import/export)

Он помогает сайту загружаться быстрее и удобно структурировать код 👁‍🗨

Условный рендеринг (conditional rendering) – это отображение компонентов или контента в зависимости от определенных условий или состояний 💎

👉 Реализовать это отображение можно с помощью различных способов, таких как:
➖ применение оператора "if/else"
➖ использование тернарного оператора "? :"
➖ использование метода render в классовых компонентах
➖ использование метода return в функциональных компонентах

В видео пример отображения разного текста в зависимости от значения состояния isLoggedIn, которое регулируется кнопкой 👁‍🗨

Код из видео:

import { useState } from 'react';

const Component = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(prevState => !prevState);
  };

  return (
    <div>
      <h1>{isLoggedIn ? 'Вы успешно авторизованы' : 'Пожалуйста, авторизуйтесь'}</h1>
      <button onClick={handleLoginClick}>
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
};

export default Component;

Nullish coalescing (оператор нулевого слияния) – оператор в JavaScript, использующийся для задания значения по умолчанию, если переменная равна null или undefined 🟨

👉 Он чем-то напоминает тернарный оператор "?" и логический оператор "||" (ИЛИ), но:
➖ тернарный оператор "?" имеет 3 части (condition ? expr1 : expr2) и больше используется для более детальных задач
➖ логический оператор "||" (ИЛИ) срабатывает на любое falsy-значение (0, '', false, NaN)

Оператор нулевого слияния же просто проверяет равна ли переменная null или undefined, если нет - присваивает заданное значение по-умолчанию 👁‍🗨

Рассмотрим тип объекта Object в JavaScript ⚜️

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

На примере кода со скрина есть объект типа Object под названием person 👤

👉 У объекта person есть:
➖ свойства name и age
➖ вложенный объект address
➖ метод speak, который выводит текст в консоль

👉 Что можно делать с объектом person:
➖ обращаться к свойствам (используя название объекта и название свойства "person.name")
➖ вызывать методы (используя название объекта и название метода "person.speak()")

Благодаря методу freeze можно заморозить объект в JavaScript 🧊

То есть запретить добавление, удаление и изменение свойств в объекте, а также изменение конфигурационных атрибутов свойств, таких как writable, enumerable, configurable 🚫

👉 Метод можно использовать в целях:
➖ защиты конфигурационного объекта от изменений
➖ поддержания состояний неизменными в Redux или другой системе управления состоянием
➖ создания "неизменного" API
и многих других 👁‍🗨

Меню из блоков с помощью html-элемента <input> и хука useState в React ⚛️

👉 Блок состоит из связки двух html-элементов:
➖ <input> c уникальным значением value для каждого блока
➖ <label> с наполнением блока

Хук useState сохраняет состояние выбранного блока 🔘

Код:

const Component = () => {
    const [selected, setSelect] = useState('');

    const ChangeSelect = (event) => {
      setSelect(event.target.value);
    };

    return (
      <div class="main">
        <input type="radio" id="b1" value="b1"
        checked={selected === 'b1'} onChange={ChangeSelect}/>
        <label htmlFor="b1" class='block'>1 блок</label>

        <input type="radio" id="b2" value="b2"
        checked={selected === 'b2'} onChange={ChangeSelect}/>
        <label htmlFor="b2" class="block">2 блок</label>

        <input type="radio" id="b3" value="b3"
        checked={selected === 'b3'} onChange={ChangeSelect}/>
        <label htmlFor="b3" class="block">3 блок</label>
      </div>
    );
};

export default Component;

Скоупинг – комплексное понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода. Для избежания конфликтов и обеспечения прозрачного и безопасного взаимодействия элементов программы 🧿

Основные аспекты скоупинга это: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹

Рассмотрим аспект – объявление переменных ⏺

Важно на разных уровнях скоупа использовать разные ключевые слова для объявления переменных (в случае кода на скрине лучше через let). Чтобы переменная из блока if не стала глобальной и не стала причиной возможного конфликта с другими переменными на других Scope уровнях 👁‍🗨

Несколько цифр про Cookie 🍪

Cookie – это небольшой фрагмент данных, сохраняющийся на компьютере пользователя посещаемыми пользователем веб-сайтами 🌐

🔸 Максимальный размер одного файла cookie составляет 4096 байтов. Грубо говоря, в один такой файл уместится информация в виде текста размером до 4096 символов латиницы. То есть до 4096 однобайтовых символов

🔸 Максимальное количество cookie-файлов на один домен обычно 50

🔸 А среднее максимальное количество cookie, которые могут храниться браузером около 3000

forEach – метод, позволяющий пошагово перебирать все элементы массива. Метод в параметре получает функцию, которая выполнится для каждого элемента массива 👟

С помощью этого метода можно, к примеру, отображать индексы элементов массива, выполнять математические операции, то есть применять функции к каждому элементу поочередно 👁‍🗨

Классы в JavaScript могут быть определены в стандартном виде и в расширенном виде. Класс с расширением – это класс, который при объявлении наследует какой-то другой класс с помощью ключевого слова extends 👯‍♀️

Можно наследовать как какой-то встроенный тип класса, так и конкретный объявленный класс  🤝

👉 На скрине продемонстрировано:
➖ наследование стандартного класса Array классом MyArray, вследствие чего класс MyArray может иметь перечесть элементов
➖ наследование кастомного класса Animal классом Dog. Теперь класс Dog также имеет конструктор со свойством объекта "this.name", как класс Animal

Код со скрина:

// Наследование типа класса (типы встроенных классов: Array, Date, String...)

class MyArray extends Array {
  constructor(...elements) {
      super(...elements);
  }

  getFirst() {
      return this[0];
  }
}



// Наследование конкретного класса созданного нами

class Animal {
  constructor(name) {
      this.name = name;
  }
}

class Dog extends Animal {}