Классы и подклассы

Класс в JS это набор объектов, с одинаковым прототипом, потому работа с классами сводится к работе с прототипами: ручное указаное прототипа Object.create(), создание функции-конструктора или класса с помощью class. Три способа мало отличаются, а потому взаимозаменяемы.
Предпочтительно использование class из-за его большей наглядности и своих особенностей:
- Всё в теле class выполняется в строгом режиме
- Объявленние класса не подымается (в отличии от функций-конструкторов)
- static перед функцией в классе создаст функцию, что будет методом самого класса, а не его прототипа
- Блок constructor является аналогом функции-конструктора для инициализации объекта

Подклассом является набор объектов, протип которого в качестве прототипа имеет другой прототип и наследует методы и свойства другого класса.
- Для создания подкласса с class используется extends
- super позволяет использовать constructor класса в подклассе

Полезные ссылки:
learnjs

#концепция #классы

"Блокировка" объектов JS

JS позволяет гибко управлять объектами и их свойствами. Зачастую такие концепции применяются на более высоком уровне разработки, где в этом есть потребность. Относится все это, по большей части, к работе с дескрипторами свойств.

Метод Object.seal() запечатывает объект, предотвращая добавление новых свойств к объекту и делая все существующие свойства не настраиваемыми. Значения представленных свойств всё ещё могут изменяться, поскольку они остаются записываемыми.

Метод Object.preventExtensions() предотвращает добавление новых свойств к объекту (то есть, предотвращает расширение этого объекта в будущем).

Метод Object.freeze() замораживает объект: это значит, что он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости. В сущности, объект становится эффективно неизменным. Метод возвращает замороженный объект.

Полезная ссылка

#концепция #объект

var имеет область видимости, ограниченную функцией, и поднимается в начало области видимости с инициализацией undefined, позволяя повторное объявление и изменение.

let ограничен блоком {...} и поднимается без инициализации, создавая временную мертвую зону до его объявления; можно изменять, но не объявлять повторно в одной области видимости.

const работает как let по области видимости и поднятию, но запрещает изменение и повторное объявление; содержимое объектов и массивов, объявленных через const , можно изменять. Использование var в современном JavaScript считается устаревшим из-за его менее строгих ограничений по области видимости и поднятию переменных. let и const предпочтительнее за счет более четкой и предсказуемой области видимости и поведения.

Learnjs - старая ссылка - по моему мнению тут классная задача про Армию функций, по началу может сломать мозг но рекомендую разобраться
Learnjs - новая ссылка

ищи по #scope предыдущий пост про области видимости

Переменные

Что будет выведено в консоль?
Задача выше, ответ тыкайте в опросе ниже👇

#задача #переменные

if/else и switch в JS - основные средства ветвления логики. if/else применяется для выполнения кода в зависимости от условия: проверяется условие в if, выполняется код внутри блока, либо код в блоке else. Он подходит для простых и сложных условных цепочек с else if.

switch удобен для сравнения одной переменной с множеством значений. Он последовательно проверяет case-блоки: если значение переменной совпадает, выполняется соответствующий код. Часто используется для замены множества if/else, улучшая читаемость и отладку кода.

Важно помнить, что switch использует строгое сравнение (===) и требует break для предотвращения последующих блоков.

Выбор между ними зависит от сложности условий: if/else - для более сложных логических условий, switch - для проверки одной переменной на равенство с разными значениями. Оба способа улучшают читаемость и эффективность кода при правильном использовании.

Задача: Выбор правильного условного оператора

У вас есть функция, которая получает в качестве аргумента целое число. В зависимости от значения числа, функция должна возвращать разные строки. Вот условия:

Если число делится на 3, функция возвращает "Fizz".
Если число делится на 5, функция возвращает "Buzz".
Если число делится и на 3, и на 5, функция возвращает "FizzBuzz".
Во всех остальных случаях функция возвращает само число в виде строки.
Какую структуру условного ветвления вы бы использовали для реализации этой функции?
Ответить можно в опросе ниже 👇

Тернарный оператор в JS - это удобный инструмент для выполнения условных операций в одну строку. Его структура
условие ? выражение1 : выражение2
позволяет с легкостью заменить простые конструкции if/else.
Однако, при его использовании важно помнить о читаемости кода. В сложных условиях или при использовании вложенных тернарных операторов код может стать трудночитаемым. Поэтому важно уметь оценивать, когда его применение уместно, а когда лучше прибегнуть к более традиционным конструкциям if/else.

Каковы будут последствия выполнения этого кода?
Варианты ответов в опросе ниже 👇

Рассмотрим четыре основных оператора: ??, &&, ||, !.

Оператор ?? (Nullish Coalescing) возвращает правый операнд, если левый равен null или undefined; полезен для установки значений по умолчанию и избегания проблем с ложно-отрицательными значениями.

Оператор && (Логическое И) возвращает первое "ложное" значение или последнее "истинное"; применяется для проверки условий перед выполнением блока кода и сокращения условных выражений.

Оператор || (Логическое ИЛИ) возвращает первое "истинное" значение, идеален для задания значений по умолчанию, избегая ошибок с неопределенными или нулевыми значениями.

Оператор ! (Логическое НЕ) инвертирует булево значение операнда, применяется для инвертирования логических условий в условных конструкциях и проверках.

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

Задача

Этот код использует комбинацию операторов ?., ||, && и ??. Вам нужно определить, что будет выведено в консоль.

Отвечай в опросе ниже 👇

Операторы присваивания в JavaScript играют важную роль в управлении данными и значительно облегчают разработку кода. Основной оператор присваивания - =, который используется для назначения значений переменным. Кроме этого, существуют сочетания операторов присваивания с другими операциями, такими как +=, -=, *=, /=, и %=, которые упрощают математические операции.

+= добавляет и присваивает значение, например, a += 5 эквивалентно a = a + 5.

=, =, и /= работают аналогично для вычитания, умножения и деления соответственно.

%= выполняет операцию деления по модулю и присваивает остаток, например, a %= 3 это то же самое, что a = a % 3.

Также есть операторы <<=, >>=, и >>>= для битовых операций сдвига и &=, |=, и ^= для битовых операций И, ИЛИ и исключающее ИЛИ.

Эти операторы делают код более компактным и читаемым, помогая избегать повторений и упрощая математические вычисления.

Задача: Использование операторов присваивания
Что будет выведено в консоль?
Ответ в опросник ниже 👇

В JavaScript функции стрелок (Arrow Functions) представляют собой компактный способ объявления функций. Введены в ES6, они обеспечивают более короткий синтаксис и лексическое связывание значения this.
Синтаксис:
Обычная функция: function(a, b) { return a + b; }
Функция стрелки: (a, b) => a + b
Особенности:
Короткий синтаксис: Идеально подходят для кратких функций.
Не имеют собственного this: this внутри стрелочной функции ссылается на контекст, в котором она была создана.
Не подходят для методов объектов: Так как this привязан к окружению, в методах объектов лучше использовать обычные функции.
Не имеют arguments: Вместо него используйте остаточные параметры (...args).
Пример:
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]
Заключение: Функции стрелок упрощают написание коротких функций и повышают читаемость кода, однако важно понимать их особенности, особенно в отношении this. Они особенно полезны в коллбэках и при работе с асинхронным кодом.

Задача
Рассмотрим код на фото с использованием Arrow Functions и лексическим контекстом this в JavaScript.
Что будет выведено в консоль при запуске этого кода?
Отвечай в опросе ниже 👇

Что такое Callback Hell? Это ситуация в JavaScript, когда вложенные асинхронные колбэки делают код запутанным и трудным для понимания и поддержки.
Причины:
Глубокая вложенность: новый асинхронный запрос требует нового колбэка.
Сложности с управлением ошибок: отдельная обработка в каждом колбэке.
Проблемы с читаемостью и поддержкой: сложная структура кода.
Пример выше на фото
Решения:
Promises: Упрощают написание асинхронного кода.
Async/Await: Делают код асинхронных операций более читаемым.
Модульный подход: Разбиение на мелкие функции.
Библиотеки управления потоком: Например, Async.js.
Заключение: Использование Promises и Async/Await помогает избежать Callback Hell, делая код более чистым и управляемым.