Что такое WeakMap и WeakSet

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

WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.

Примеры использования:

let wm = new WeakMap();
let obj = {};

wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'

obj = null; // Объект становится недоступен и может быть удалён

Что такое WeakMap и WeakSet

WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. ОсобенноЧто такое Wподходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов. WeakSet полезен для хранения множества объектов с автоматической очисткой.

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Анимации скролла во фронтенде

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

Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/

#css #javascript #en

Учитесь фронтенду с нами — подпишитесь 💻

Сегодня поговорим о загадочном свойстве __proto__. Что это такое и почему это важно для JavaScript?

Всё дело в прототипах. В JavaScript каждый объект может «наследовать» свойства и методы другого объекта. Этот «наследник» называется прототипом. Свойство __proto__ указывает на объект, который является прототипом данного объекта.

Например:

const animal = {
eats: true
};

const rabbit = {
jumps: true,
__proto__: animal
};

Теперь у объекта rabbit есть доступ к свойству eats через прототип animal. Это позволяет экономить память и добиваться мощной функциональности с минимальными усилиями. Знание прототипов и __proto__ поможет вам писать более эффективный и выразительный код.

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Асинхронность в JavaScript: Async/Await, Promises, Callbacks, Fetch API

Большой бесплатный курс по асинхрономму программированию на JavaScript. Вы изучите javascript promises, async / await и Fetch API. Также вы сможете сразу воспользоваться новыми знаниями для создания 3 проектов.

Смотрим курс тут:

https://youtu.be/OFpqvaJ3QYg

#en #javascript #видео #курс

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Что такое JSON.stringify()

Это метод в JavaScript, который позволяет превратить объект или массив в строку формата JSON (JavaScript Object Notation). Это бывает полезно, например, когда нужно передать данные по сети или сохранить их в локальное хранилище.

Пример:const user = {
name: «Alice»,
age: 25,
isStudent: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name»:"Alice»,"age»:25,"isStudent»:true}

Как видите, объект превратился в строку, которую легко передавать и сохранять. Затем её можно обратно превратить в объект с помощью JSON.parse.

Понимание работы поможет вам эффективно работать с данными на стороне клиента и сервера.

#урок #javascript #json

Учитесь фронтенду с нами — подпишитесь 💻

Regulex — визуализатор регулярных выражений для JavaScript

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

Ссылка на инструмент: https://jex.im/regulex/

#инструмент #javascript #regex

Учитесь фронтенду с нами — подпишитесь 💻

Что делает директива "use strict" в JavaScript

"use strict" — это способ включить строгий режим в коде JavaScript. Он помогает сделать ваш код более безопасным и чистым, выявляя ошибки, которые в обычном режиме могли бы быть незаметны.

Пример:

"use strict";

var x = 1;
delete x; // Ошибка: нельзя удалить объявленную переменную

function test() {
  y = 2; // Ошибка: "y" не объявлена
}
test();

Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде.

Как включить строгий режим:
— в начале файла: "use strict";
— в пределах функции: function myFunction() { "use strict"; /* код */ }

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

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

8 советов, которые сделают JavaScript-код чище

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

Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:

https://nuancesprog.ru/p/19910/

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Сегодня поговорим о спред-операторе (...) в JavaScript

Спред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции.

Примеры:

Копирование массива:

   const originalArray = [1, 2, 3];
   const copyArray = [...originalArray];
   console.log(copyArray); // [1, 2, 3]
   

Объединение массивов:

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const combinedArray = [...array1, ...array2];
   console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
   

Копирование объекта:

   const originalObject = { a: 1, b: 2 };
   const copyObject = { ...originalObject };
   console.log(copyObject); // { a: 1, b: 2 }
   

Объединение объектов:

   const object1 = { a: 1, b: 2 };
   const object2 = { c: 3, d: 4 };
   const combinedObject = { ...object1, ...object2 };
   console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }
   

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

Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным!

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Ещё немного про use strict в дополнение к этому посту.

#викторина #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора

Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:

https://nuancesprog.ru/p/21194/

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻

JavaScript эволюционирует: новые методы и функции для эффективной разработки

Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:

— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.

Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻