Should we take a look at JavaScript when everyone is writing in TypeScript? What happens to the standard? What did we get last year? What new features can we expect this and next year? And most importantly, when will Observer be standardized? Let's try to answer all these questions and even a little more, dream about the future, and enjoy that Observer is alive (or not).

1. 1

2. ХТО Я
САВІЦЬКИЙ РОМАН
Infopulse, Web & Mobile Sub Practice Lead
BeerJS Zhytomyr co-founder
Викладач Житомирської політехніки,
аспірант
2

3. ПРАВИЛА ДОПОВІДІ
3

4. ПРАВИЛА ДОПОВІДІ
Доповнюємо, дискутуємо
3.1

5. ПРАВИЛА ДОПОВІДІ
Доповнюємо, дискутуємо
Граємо в ребуси
3.2

6. ПРАВИЛА ДОПОВІДІ
Доповнюємо, дискутуємо
Граємо в ребуси
Граємо в запитання-відповідь
3.3

7. ПРАВИЛА ДОПОВІДІ
Доповнюємо, дискутуємо
Граємо в ребуси
Граємо в запитання-відповідь
*Я не знаю Tipescript. PS Навіть з помилкою написав.
3.4

8. ПРАВИЛА РЕБУСІВ
4

9. ПРАВИЛА РЕБУСІВ
Слово ділиться на такі частини, які можна зобразити у вигляді
малюнка або будь-якого знака.
4.1

10. ПРАВИЛА РЕБУСІВ
Слово ділиться на такі частини, які можна зобразити у вигляді
малюнка або будь-якого знака.
Ребус читається зліва направо.
4.2

11. ПРАВИЛА РЕБУСІВ
Слово ділиться на такі частини, які можна зобразити у вигляді
малюнка або будь-якого знака.
Ребус читається зліва направо.
Слово-відповідь - іменник в називному відмінку, в однині
4.3

12. ПРАВИЛА РЕБУСІВ
Слово ділиться на такі частини, які можна зобразити у вигляді
малюнка або будь-якого знака.
Ребус читається зліва направо.
Слово-відповідь - іменник в називному відмінку, в однині
Досить часто назва якогось предмета не може бути використана
повністю, необхідно відкинути на початку чи в кінці слова одну чи
декілька букв, такі літери позначаються комами
4.4

13. ПРИКЛАД
Сейф+кінь+Й+морж=
сеньйор
5

14. ОЧІКУВАННЯ
6

15. РЕАЛЬНІСТЬ
7

16. ПРОЦЕС
8

17. ЩО ЦЕ ЗА ЗАБУТІ ЦИФРИ?
39, 262, 402
9

18. Specifying JavaScript.
TC39
Ecma International's TC39 is a group of JavaScript developers, implementers, academics, and more,
collaborating with the community to maintain and evolve the definition of JavaScript.
We are part of
Contribute
TC39 welcomes contributions from the JavaScript community whether it is feedback on existing
10

19. РЕБУС 1
11

20. РЕБУС 1
С+ТАНК+Д+КАР+Т=
стандарт
11.1

21. ECMASCRIPT 262
ES1 - 1997
12

22. ECMASCRIPT 262
ES1 - 1997
12.1

23. ECMASCRIPT 262
ES1 - 1997
ES5 - 2009
12.2

24. ECMASCRIPT 262
ES1 - 1997
ES5 - 2009
ES6 - 2015
12.3

25. ECMASCRIPT 262
ES1 - 1997
ES5 - 2009
ES6 - 2015
ESNext - 2024
12.4

26. РЕБУС 2
13

27. РЕБУС 2
Стадія
13.1

28. СТАДІЇ
Finished
14

29. СТАДІЇ
Finished
14.1

30. СТАДІЇ
Finished
Active. Stage 3
14.2

31. СТАДІЇ
Finished
Active. Stage 3
Active. Stage 2.7
14.3

32. СТАДІЇ
Finished
Active. Stage 3
Active. Stage 2.7
Active. Stage 2
14.4

33. ES2024
WELL-FORMED UNICODE STRINGS
15

34. ES2024
WELL-FORMED UNICODE STRINGS
String.prototype.isWellFormed та String.prototype.toWellFormed
15.1

35. ES2024
WELL-FORMED UNICODE STRINGS
String.prototype.isWellFormed та String.prototype.toWellFormed
Перевірка UTF-16 рядків та виправлення "битих" на U+FFFD
15.2

36. ES2024
WELL-FORMED UNICODE STRINGS
String.prototype.isWellFormed та String.prototype.toWellFormed
Перевірка UTF-16 рядків та виправлення "битих" на U+FFFD
const illFormed = "https://example.com/search?q=uD800";
try {
encodeURI(illFormed);
} catch (e) {
console.log(e); // URIError: URI malformed
}
if (illFormed.isWellFormed()) {
console.log(encodeURI(illFormed));
} else {
console.warn("Ill-formed strings encountered."); // Ill-formed strings encounter
}
15.3

37. АСОЦІАЦІЯ 3
16

38. АСОЦІАЦІЯ 3
Atomic.waitAsync
16.1

39. ES2024
АСИНХРОННЕ АТОМАРНЕ ОЧІКУВАННЯ
17

40. ES2024
АСИНХРОННЕ АТОМАРНЕ ОЧІКУВАННЯ
АПІ метод, що асинхронно очікує на спільній памʼяті та повертає
Promise для SharedArray. Відхилений в 2017.
17.1

41. ES2024
АСИНХРОННЕ АТОМАРНЕ ОЧІКУВАННЯ
АПІ метод, що асинхронно очікує на спільній памʼяті та повертає
Promise для SharedArray. Відхилений в 2017.
Atomics.waitAsync(i32a, index, value, [timeout]) => result
- i32a є Int32Array/BigInt64Array, що відображає SharedArrayBuffer
- index є дійсним індексом у межахi32a
- valu eбуде перетворено на Int32 і порівняно з вмістомi32a[index]
- timeout, якщо присутній, це значення часу очікування
const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);
const result = Atomics.waitAsync(int32, 0, 0, 1000);
// { async: true, value: Promise {<pending>} }
Atomics.notify(int32, 0);
// { async: true, value: Promise {<fulfilled>: 'ok'} }
</fulfilled></pending>
17.2

42. ES2024
REGEXP
18

43. ES2024
REGEXP
Unicode властивості
18.1

44. ES2024
REGEXP
Unicode властивості
Різниця, обʼєднання, перетин множин
18.2

45. ES2024
REGEXP
Unicode властивості
Різниця, обʼєднання, перетин множин
const regexGreekSymbol = /p{Script_Extensions=Greek}/u;
regexGreekSymbol.test('π');
// → true
// Unicode defines a character property named “Emoji”.
const re = /^p{Emoji}$/u;
// Match an emoji that consists of just 1 code point:
re.test('⚽'); // 'u26BD'
// → true ✅
18.3

46. ES2024
REGEXP
Unicode властивості
Різниця, обʼєднання, перетин множин
/[p{Decimal_Number}--[0-9]]/v.test('𑜹'); // → true
/[p{Decimal_Number}--[0-9]]/v.test('4'); // → false
/^p{RGI_Emoji_Tag_Sequence}$/v.test('🏴󠁧󠁢󠁳󠁣󠁴󠁿'); // → true
/^[p{RGI_Emoji_Tag_Sequence}--q{🏴󠁧󠁢󠁳󠁣󠁴󠁿}]$/v.test('🏴󠁧󠁢󠁳󠁣󠁴󠁿'); // → false
18.4

47. ES2024
REGEXP
Unicode властивості
Різниця, обʼєднання, перетин множин
const re = /[p{White_Space}&&p{ASCII}]/v;
re.test('n'); // → true
re.test('u2028'); // → false
const re = /[p{Script_Extensions=Greek}&&p{Letter}]/v;
// U+03C0 GREEK SMALL LETTER PI
re.test('π'); // → true
// U+1018A GREEK ZERO SIGN
re.test('𐆊'); // → false
18.5

48. ES2024
REGEXP
Unicode властивості
Різниця, обʼєднання, перетин множин
const re = /^[p{Emoji_Keycap_Sequence}p{ASCII}q{🇧🇪|abc}xyz0-9]$/v;
re.test('4️⃣'); // → true
re.test('_'); // → true
re.test('🇧🇪'); // → true
re.test('abc'); // → true
re.test('π'); // → false
re.test('4'); // → true
18.6

49. ES2024
ARRAYBUFFER
Дозволяє працювати з бінарними даними
Додана можливість розширювати макс значення буферів
transfer, transferToFixedLength
19

50. РЕБУС 3
20

51. РЕБУС 3
Група
20.1

52. ES2024
GROUPBY
Працює з Object, Map
Статичний метод
21

53. ES2024
GROUPBY
Працює з Object, Map
Статичний метод
const array = [1, 2, 3, 4, 5];
// `Object.groupBy` groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
Object.groupBy(array, (num, index) => {
return num % 2 === 0 ? 'even': 'odd';
});
// => { odd: [1, 3, 5], even: [2, 4] }
// `Map.groupBy` returns items in a Map, and is useful for grouping
// using an object key.
const odd = { odd: true };
const even = { even: true };
Map.groupBy(array, (num, index) => {
return num % 2 === 0 ? even: odd;
});
// => Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
21.1

54. ES2024
PROMISE.WITHRESOLVERS
Статичний метод
22

55. ES2024
PROMISE.WITHRESOLVERS
Статичний метод
async function* readableToAsyncIterable(stream) {
let { promise, resolve, reject } = Promise.withResolvers();
stream.on("error", (error) => reject(error));
stream.on("end", () => resolve());
stream.on("readable", () => resolve());
while (stream.readable) {
await promise;
let chunk;
while ((chunk = stream.read())) {
yield chunk;
}
({ promise, resolve, reject } = Promise.withResolvers());
}
}
22.1

56. РЕБУС 4
23

57. РЕБУС 4
Майбутнє
23.1

58. ES2025
SET METHODS FOR JAVASCRIPT
24

59. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
24.1

60. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
Set.prototype.union(other)
24.2

61. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
24.3

62. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
24.4

63. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
24.5

64. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
24.6

65. ES2025
SET METHODS FOR JAVASCRIPT
Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
Set.prototype.isDisjointFrom(other)
24.7

66. ES2024 STAGE 3
TEMPORAL
const olympics = Temporal.Instant.from('2024-07-26T20:24:00+01:00');
new Temporal.PlainDate(2024, 7, 26);
Temporal.PlainDate.from('2024-07-26');
new Temporal.PlainTime(20, 24, 0);
Temporal.PlainTime.from('20:24:00');
const today = Temporal.Now.plainDateISO();
const lastWeek = today.subtract({ days: 7});
const nextWeek = today.add({ days: 7 });
25

67. ES2024 STAGE 3
КОНВЕЄР
const exclaim = string => string + "!!!"
const listen = string => "Listen up! " + string
const uppercase = string => string.toUpperCase()
uppercase(exclaim(listen(text)))
text.listen().exclaim().uppercase()
text |> listen(%) |> exclaim(%) |> uppercase(%)
26

68. ES2024 STAGE 3
RECORD, TUPLE
const heroes = #["Batman", "Superman", "Wonder Woman"]
const traitors = #{
diane: false,
paul: true,
zac: false,
harry: true
}
27

69. РЕБУС 5
28

70. РЕБУС 5
Декоратор
28.1

71. ES2024 STAGE 3
ДЕКОРАТОР
@validation
class FormComponent {
// код
}
function validation(target) {
// код
}
29

72. ЩО ТАКЕ ВІЧНІСТЬ?
30

73. ЩО ТАКЕ ВІЧНІСТЬ?
OBSERVABLE
30.1

74. ЗАПИТАННЯ? ПОБАЖАННЯ
31