Защита объекта от изменений

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

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

Пример:

const obj = {
  prop1: 42,
  prop2: 'замороженный объект'
};

Object.freeze(obj);

// Попытка изменения свойства
obj.prop1 = 100; // Не сработает, obj.prop1 останется равным 42

// Попытка добавления нового свойства
obj.prop3 = true; // Не сработает, так как объект замороженный

// Попытка удаления свойства
delete obj.prop2; // Не сработает, prop2 останется в объекте

console.log(obj); // { prop1: 42, prop2: 'замороженный объект' }

👉 @web_craft | #frontend

Сортировочные алгоритмы на JavaScript

Статья описывает различные алгоритмы сортировки, которые можно реализовать на JavaScript. Она рассматривает примеры кода для каждого алгоритма, а также их характеристики, включая временную сложность и производительность. Цель статьи — помочь лучше понять, как работают эти алгоритмы и как их можно использовать в реальных приложениях на JavaScript.

👉 @web_craft | #frontend

Retro Slot Machine

Интерактивный ретро автомат для игры в слоты на HTML, CSS, and JavaScript.

👉 @web_craft | #frontend

Использование метода Object.seal()

Что делает метод Object.seal() в JavaScript?

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

👉 @web_craft | #frontend

Точное сравнение значений в JavaScript

Метод Object.is() в JavaScript используется для точного сравнения двух значений. В отличие от строгого равенства (===), он корректно различает такие значения, как NaN и 0/-0, а также объекты, сравнивая их ссылки.

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

let initialFormState = { username: 'user123', email: 'user@example.com' };
let currentFormState = initialFormState;

function updateEmail(newEmail) {
  currentFormState = { ...currentFormState, email: newEmail };
}

console.log(Object.is(initialFormState, currentFormState)); // false

В этом примере после изменения email, хотя остальные поля формы не изменились, Object.is() вернет false, так как изменилось состояние объекта (его ссылка). Это поможет эффективно отслеживать изменения состояния формы и предотвратить повторную отправку формы.

👉 @web_craft | #frontend

Промисы с нуля

Статья объясняет, как работают промисы в JavaScript, начиная с основ. Автор рассказывает, почему промисы важны для работы с асинхронным кодом, и сравнивает их с колбэками. Описаны создание промисов, их цепочка, обработка ошибок, а также использование async/await для упрощения работы с асинхронностью. Статья включает практические примеры и решает проблему "Callback Hell".

👉 @web_craft | #frontend

CSS-only game: find 10 differences

Игра с поиском отличий на CSS.

👉 @web_craft | #frontend

Работа с Symbol.species

Как Symbol.species влияет на методы класса-наследника?

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

👉 @web_craft | #frontend

Оптимизация объектов с помощью Object.preventExtensions()

Метод Object.preventExtensions(obj) запрещает добавление новых свойств в объект obj.

Пример:

const config = { apiEndpoint: '/api', timeout: 5000 };
Object.preventExtensions(config);

// Попытка добавить новое свойство
config.retryAttempts = 3; // Не будет добавлено

console.log(config.retryAttempts); // undefined

При создании объектов настроек, где важно сохранить неизменяемую структуру, можно использовать функцию:

function createImmutableConfig(options) {
  const config = { ...options };
  Object.preventExtensions(config);
  return config;
}

const appConfig = createImmutableConfig({ debug: true, version: '1.0.0' });

appConfig.newFeature = true; // Не будет добавлено
console.log(appConfig); // { debug: true, version: '1.0.0' }

Это гарантирует, что конфигурация приложения останется предсказуемой и защитит от случайного добавления лишних свойств.

👉 @web_craft | #frontend

Мастерство работы с DOM в JavaScript: Обзор основных вопросов для собеседований

Статья объясняет ключевые вопросы и концепции, связанные с Document Object Model (DOM) в JavaScript, которые часто задаются на собеседованиях. Рассматриваются такие темы, как выбор элементов, работа с методами querySelector и querySelectorAll, добавление и удаление элементов, управление событиями через делегирование, а также различия между innerHTML и textContent. Это поможет лучше подготовиться к техническим собеседованиям, где проверяются фундаментальные знания DOM.

👉 @web_craft | #frontend

Kubrick much?

Абстрактная анимация на CSS.

👉 @web_craft | #frontend

Работа с методом Object.freeze()

Какой эффект оказывает метод Object.freeze() на удаление свойств объекта?

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

👉 @web_craft | #frontend

Метод для работы с символами в JavaScript

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

Пример:

const sym1 = Symbol('first');
const sym2 = Symbol('second');
const obj = {
  [sym1]: 'Первое значение',
  [sym2]: 'Второе значение',
  regularKey: 'Обычное свойство'
};

// Получаем все символы объекта
const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // [Symbol(first), Symbol(second)]

// Доступ к значению символа
console.log(obj[symbols[0]]); // 'Первое значение'

В этом примере создаются два символа sym1 и sym2, которые добавляются как свойства объекта obj. Метод Object.getOwnPropertySymbols() возвращает массив символов, позволяя получить доступ к их значениям.

👉 @web_craft | #frontend

Хойстинг в JavaScript: почему это важно и как это работает

В статье объясняется концепция хойстинга в JavaScript, при которой объявления переменных и функций перемещаются в начало своей области видимости во время компиляции. Рассматриваются примеры работы всплытия для переменных, функций, стрелочных функций и блоков let и const. Также обсуждается, как всплытие влияет на выполнение кода, и рассматривается концепция "Временной мёртвой зоны" (TDZ) для let и const.

👉 @web_craft | #frontend

Анимированная собака на CSS

Анимация собаки на чистом CSS.

👉 @web_craft |#frontend

Тонкости точного сравнения в JS

Что произойдет при сравнении двух объектов с одинаковыми свойствами через Object.is()?

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

👉 @web_craft | #frontend

Symbol.iterator в JavaScript

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

Пример:

const iterableObj = {
  items: ['apple', 'banana', 'cherry'],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => ({
        value: this.items[index],
        done: index++ >= this.items.length
      })
    };
  }
};

for (const item of iterableObj) {
  console.log(item); // 'apple', 'banana', 'cherry'
}

В этом примере объект становится итерируемым с использованием собственного итератора, реализованного через Symbol.iterator.

👉 @web_craft | #frontend

Компиляторы лучше людей

Статья о том, почему компиляторы могут быть эффективнее человека в рутинных задачах программирования, приводя примеры использования Kotlin и его корутин. Автор рассматривает, как Kotlin упрощает многопоточность и управление асинхронными процессами.

👉 @web_craft | #frontend

Spinner

Анимация узора на чистом CSS.

👉 @web_craft | #frontend

Работа с Object.preventExtensions()

Что произойдёт при попытке добавить новое свойство в объект после вызова Object.preventExtensions(obj)?

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

👉 @web_craft | #frontend