10 ключевых концепций JavaScript

Статья объясняет 10 ключевых концепций JavaScript, таких как замыкания, промисы, прототипы, модульность, генераторы и другие. Она подробно разбирает каждую концепцию, приводя примеры кода и объясняя их значимость в разработке на JavaScript. Эти концепции важны для более глубокого понимания и эффективного использования языка в реальных проектах.

👉 @web_craft | #frontend

Stripes

Анимация тигра на CSS.

👉 @web_craft | #frontend

Работа с методом reduceRight

Какое значение возвращает reduceRight, если не указать начальное значение?

Если забыли, то вернитесь к посту от 27.08.2024.

👉 @web_craft | #frontend

Запрет добавления или удаления свойств объекта

Метод Object.seal() позволяет «запечатать» объект, предотвращая добавление или удаление свойств. При этом существующие свойства можно изменять.

Как использовать Object.seal():

const user = {
  name: 'John',
  age: 30
};

// Запечатываем объект
Object.seal(user);

// Попытка добавить новое свойство (не сработает)
user.email = 'john@example.com';
console.log(user.email); // undefined

// Попытка удалить свойство (не сработает)
delete user.age;
console.log(user.age); // 30

// Изменение существующего свойства (сработает)
user.name = 'Jane';
console.log(user.name); // Jane

После вызова Object.seal(user), объект user не может быть изменен в плане добавления или удаления свойств. Однако, мы все еще можем изменить значения существующих свойств, такие как name или age.

Чтобы проверить, является ли объект запечатанным, можно использовать метод Object.isSealed():

console.log(Object.isSealed(user)); // true

Метод возвращает true/false.

👉 @web_craft | #frontend

Ключевое слово this в JavaScript

Статья объясняет ключевое слово this в JavaScript и его поведение в различных контекстах: внутри методов объектов, функций, стрелочных функций, а также в слушателях событий. Рассматриваются методы call, apply и bind, которые управляют значением this. Приводятся примеры кода и их результаты, чтобы показать, как this может ссылаться на разные объекты в зависимости от ситуации. В статье также обсуждаются особенности использования this в строгом режиме.

👉 @web_craft | #frontend

CSS transform animation stress test

Стресс-тест анимации с использованием CSS Transform.

👉 @web_craft | #frontend

Объект для сортировки строк с учетом правил локализации

Какой объект используется в JavaScript для сортировки строк с учетом правил локализации?

Забыли? Вернитесь к посту от 03.09.2024.

👉 @web_craft | #frontend

Как контролировать создание экземпляров в наследуемых классах

В JavaScript символ Symbol.species позволяет контролировать, какой конструктор должен использоваться при создании экземпляров в наследуемых классах. Это полезно, когда вы хотите изменить поведение методов, которые возвращают новые объекты на основе экземпляра класса.

Рассмотрим пример с классом MyArray, который наследует от встроенного массива Array. По умолчанию, методы такие как map(), возвращают новый экземпляр того же класса. Однако с помощью Symbol.species, можно указать, какой конструктор должен использоваться.

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArr = new MyArray(1, 2, 3);
const mappedArr = myArr.map(x => x * 2);

console.log(mappedArr instanceof MyArray); // false
console.log(mappedArr instanceof Array); // true

Метод map() возвращает обычный массив Array, а не MyArray, благодаря использованию Symbol.species.

👉 @web_craft | #frontend

Разгадка гипотезы Коллатца: изучение создания последовательностей с помощью JavaScript

Статья объясняет математическую гипотезу Коллатца и показывает, как реализовать её в JavaScript. Гипотеза утверждает, что при определённых арифметических операциях любая последовательность чисел в конечном итоге сведётся к 1. Автор демонстрирует два алгоритма для генерации таких последовательностей, включая оптимизацию с использованием мемоизации для повышения эффективности.

👉 @web_craft | #frontend

Jellyfish svg animation

Анимация медузы на CSS.

👉 @web_craft | #frontend