Skip to content

Latest commit

 

History

History
123 lines (81 loc) · 7.4 KB

lecture_notes.md

File metadata and controls

123 lines (81 loc) · 7.4 KB
Raw

ES6 & Beyond

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

Symbol

Symbol - примитивный тип в JavaScript, который позволяет создавать строго уникальные значения. Некоторая сложность в восприятии символов состоит в том, что их уникальное значение нельзя вывести в консоль (а у других примитивных типов можно).

Символы создаются при помощи вызова функции Symbol. Обратите внимание: ключевого слова new нет! Опционально можно передать строку-описание, которая будет видна при отладке кода, но не влияет на значение символа.

/**
Создадим символ:
*/

const mySymbol = Symbol('my symbol');
typeof mySymbol; // symbol
console.log(mySymbol) // Symbol(my symbol)

/**
Создадим второй символ с таким же описанием:
*/

const myOtherSymbol = Symbol('my symbol'); 
console.log(myOtherSymbol); // Symbol(my symbol)

/**
Убедимся в том, что получили два разных символа, несмотря на то, что описание у них одинаковое, как и представление в консоли.
*/
console.log(mySymbol) // Symbol(my symbol)
console.log(myOtherSymbol); // Symbol(my symbol)

mySymbol === myOtherSymbol; // false

Symbol наряду со строками может использоваться как ключ в объекте. Его ценность в том, что ключ-символ, в отличие от строкового ключа, гарантированно не перепишет уже имеющиеся ключи в объекте и не будет переписан сам. Это позволяет нам:

  • безопасно расширять объекты, созданные не нами (например, объекты, полученные из библиотек, или глобальные объекты);
  • создавать (почти) приватные свойства в объектах
const student = {
    name: 'John',
    age: 20,
}
const id = Symbol('id');

student[id] = 42;
student[id]; // значение 42 доступно только по ссылке на исходный символ.

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

/**
Глобальные символы создаются при помощи вызова метода Symbol.for, которому нужно передать имя символа. Если символ с таким именем в глобальном реестре уже существует, он будет возвращен. Иначе символ будет создан, а затем возвращен.
*/

const mySymbol = Symbol.for('my symbol');
const myOtherSymbol = Symbol.for('my symbol');

const myObj = {};
myObj[mySymbol] = 42;
myObj[myOtherSymbol]; // 42;

mySymbol === myOtherSymbol // true

Также существует определенное количество так называемых well-known symbols. С одним из них (Symbol.iterator) мы встретимся позже, когда будем говорить про итераторы.

SmooshGate как иллюстрация проблемы добавления методов в стандартную бибилиотеку

Коллекции - Set, Map, WeakSet, WeakMap

Set (множество) - используется, когда нужен набор уникальных значений.

const mySet = new Set();
mySet.add(1);
mySet.add(1);
mySet.add(1);
mySet.size; // 1

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

const strings = ['hello', 'world', 'hello'];
const mySet = new Set(strings);
mySet.size // 2;

Map - когда нужно установить соотношение

Слабая ссылка - такая ссылка, которая не уберегает объект, на который ссылается, от сборки сборщиком мусора. Ссылки, с которыми мы привыкли работать в JavaScript, являются сильными (см. замыкания). Но иногда нам нужны слабые ссылки.

WeakMap - ключи только объекты. Можно сделать приватные данные

Мини-доклад Кирилла Яковенко (11 минут) https://youtu.be/Wfg-_ljqaTA?list=PLxw9RJPDS60piISpypsYP2dl8J8Ft9CUJ

Tagged Template Literal

С template literals вы, наверное, уже знакомы - это строки, которые могут содержать JavaScript-выражения. Значение такого выражения будут рассчитано, а результат попадет в финальную строку:

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting) // "Hello, John!"

Менее известная возможность - добавление тега к такой строке. Тег - это функция, которая выполнится над template literal. В ней мы можем провести какие-то работы над деталями литерала после того, как они буду рассчитаны, но до того, как вернется результат выражения в виде строки. То есть, мы можем перехватить момент между тем, как template literal рассчитан, и его записью в переменную, и проделать какие-то операции над элементами литерала

Эта возможность может вам пригодится, если нужно написать свой шаблонизатор. Пример использования - бибилиотека StyledComponents для React. В этой статье автор рассказывает в том числе о tagged template literals.

Iterators & Generators

См. заметки тут