JavaScript - Revision history

Lsokolowski1 at 18:57, 25 October 2025

2025-10-25T18:57:23Z

← Older revision		Revision as of 18:57, 25 October 2025
Line 3:		Line 3:


	~~<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >~~
	;title: JavaScript		;title: JavaScript
	;author: Lukasz Sokolowski (NobleProg)		;author: Lukasz Sokolowski (NobleProg)
	~~</slideshow>~~

Lsokolowski1: /* ECMAScript 2015 */

2024-12-11T19:15:22Z

ECMAScript 2015

← Older revision		Revision as of 19:15, 11 December 2024
Line 56:		Line 56:
	== ECMAScript 2015 ==		== ECMAScript 2015 ==
	* For of		* For of
	** ~~http~~://~~es6-features~~.~~org~~/#~~IteratorForOfOperator~~		** https://www.w3schools.com/js/js_es6.asp#mark_forof
	** d3js example, index.js, ch4		** d3js example, index.js, ch4
	* Set		* Set
	** ~~http~~://~~es6-features~~.~~org~~/#~~SetDataStructure~~		** https://www.w3schools.com/js/js_es6.asp#mark_set
	* Map		* Map
	** ~~http~~://~~es6-features~~.~~org~~/#~~MapDataStructure~~		** https://www.w3schools.com/js/js_es6.asp#mark_map
	* Spread		* Spread
	** ~~http~~://~~es6-features~~.~~org~~/#~~SpreadOperator~~		** https://www.w3schools.com/js/js_es6.asp#mark_spread

	== ECMAScript 2016 ==		== ECMAScript 2016 ==

Lsokolowski1 at 09:09, 5 November 2024

2024-11-05T09:09:47Z

← Older revision		Revision as of 09:09, 5 November 2024
Line 14:		Line 14:
	{{Can I use your material}}		{{Can I use your material}}

	== JavaScript Intro ⌘==		== JavaScript Intro ==

	* Names, versions, etc		* Names, versions, etc
	* Finished proposals		* Finished proposals

	== What is this buzz all about? ⌘==		== What is this buzz all about? ==

	* All the JavaScript '''acronyms''' can be '''confusing'''		* All the JavaScript '''acronyms''' can be '''confusing'''
Line 31:		Line 31:
	*** <small>https://en.wikipedia.org/wiki/List_of_ECMAScript_engines</small>		*** <small>https://en.wikipedia.org/wiki/List_of_ECMAScript_engines</small>

	=== Other names ⌘===		=== Other names ===

	* '''ES''' is simply short for ''ECMAScript''		* '''ES''' is simply short for ''ECMAScript''
Line 42:		Line 42:
	* '''ES2016''': June 2016, '''ES2017''': June 2017		* '''ES2016''': June 2016, '''ES2017''': June 2017

	== Finished proposals ⌘==		== Finished proposals ==
	* All of them		* All of them
	** <small>https://github.com/tc39/proposals/blob/master/finished-proposals.md</small>		** <small>https://github.com/tc39/proposals/blob/master/finished-proposals.md</small>
Line 54:		Line 54:
	* ECMAScript '''2023''', current		* ECMAScript '''2023''', current

	== ECMAScript 2015 ⌘==		== ECMAScript 2015 ==
	* For of		* For of
	** http://es6-features.org/#IteratorForOfOperator		** http://es6-features.org/#IteratorForOfOperator
Line 65:		Line 65:
	** http://es6-features.org/#SpreadOperator		** http://es6-features.org/#SpreadOperator

	== ECMAScript 2016 ⌘==		== ECMAScript 2016 ==
	* ''Array.prototype.includes''		* ''Array.prototype.includes''
	* ''Exponentiation'' infix operator		* ''Exponentiation'' infix operator

	=== Array.prototype.includes ⌘===		=== Array.prototype.includes ===
	* ''includes'' instance method on the Array		* ''includes'' instance method on the Array
	* Helps to easily '''find''' if an '''item''' is in the '''Array''' (including NaN unlike indexOf)		* Helps to easily '''find''' if an '''item''' is in the '''Array''' (including NaN unlike indexOf)
Line 84:		Line 84:
	</syntaxhighlight>		</syntaxhighlight>

	=== Exponentiation infix operator ⌘===		=== Exponentiation infix operator ===
	* In exponent operation the '''<big>**</big>''' was introduced instead of ''Math.pow''		* In exponent operation the '''<big>**</big>''' was introduced instead of ''Math.pow''
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 94:		Line 94:
	</syntaxhighlight>		</syntaxhighlight>

	== ECMAScript 2017 ⌘==		== ECMAScript 2017 ==
	* ''Object.values()''		* ''Object.values()''
	* ''Object.entries()''		* ''Object.entries()''
Line 102:		Line 102:
	* Async/Await		* Async/Await

	=== Object.values() ⌘===		=== Object.values() ===
	* New function similar to ''Object.keys()''		* New function similar to ''Object.keys()''
	* Returns all the values of the Object’s own '''properties'''		* Returns all the values of the Object’s own '''properties'''
Line 118:		Line 118:
	</syntaxhighlight>		</syntaxhighlight>

	=== Object.entries() ⌘===		=== Object.entries() ===
	* Also similar to ''Object.keys()''		* Also similar to ''Object.keys()''
	** Returns as ''array'' both, '''keys''' and '''values'''		** Returns as ''array'' both, '''keys''' and '''values'''
Line 142:		Line 142:
	</syntaxhighlight>		</syntaxhighlight>

	=== String padding ⌘===		=== String padding ===
	* Two new instance methods		* Two new instance methods
	** ''String.prototype.padStart'' and ''String.prototype.padEnd''		** ''String.prototype.padStart'' and ''String.prototype.padEnd''
Line 162:		Line 162:
	</syntaxhighlight>		</syntaxhighlight>

	=== Object.getOwnPropertyDescriptors ⌘===		=== Object.getOwnPropertyDescriptors ===
	* Returns all the details for all the properties of a given object		* Returns all the details for all the properties of a given object
	** including methods '''get''' and '''set'''		** including methods '''get''' and '''set'''
Line 201:		Line 201:
	</syntaxhighlight>		</syntaxhighlight>

	=== Trailing commas, function parameters ⌘===		=== Trailing commas, function parameters ===
	* Allows us to have '''trailing commas''' after the '''last''' function parameter		* Allows us to have '''trailing commas''' after the '''last''' function parameter
	* Helps with tools like '''git blame''' to ensure only new developers get blamed		* Helps with tools like '''git blame''' to ensure only new developers get blamed
Line 233:		Line 233:
	</syntaxhighlight>		</syntaxhighlight>

	=== Async/Await ⌘===		=== Async/Await ===
	* Async functions		* Async functions
	** no callback hell		** no callback hell
Line 242:		Line 242:
	** and waits until the promise is resolved or rejected before moving further		** and waits until the promise is resolved or rejected before moving further

	==== Basic example ⌘====		==== Basic example ====
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
	// Usual promise way		// Usual promise way
Line 283:		Line 283:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	===== Exercise ⌘=====		===== Exercise =====
	Fix the example above (-:		Fix the example above (-:
	<!--		<!--
Line 295:		Line 295:
	-->		-->

	==== Async functions themselves return a Promise ⌘====		==== Async functions themselves return a Promise ====
	* If we are waiting for the result from an async function		* If we are waiting for the result from an async function
	** we need to use Promise’s '''then''' syntax to capture its result		** we need to use Promise’s '''then''' syntax to capture its result
Line 315:		Line 315:
	</syntaxhighlight>		</syntaxhighlight>

	==== Calling async/await in parallel ⌘====		==== Calling async/await in parallel ====

	* Instead of calling await twice and each time waiting for five seconds (total 10 seconds)		* Instead of calling await twice and each time waiting for five seconds (total 10 seconds)
Line 413:		Line 413:
	</syntaxhighlight>		</syntaxhighlight>

	==== Example from Ecma docs ⌘====		==== Example from Ecma docs ====
	* https://tc39.github.io/ecmascript-asyncawait/		* https://tc39.github.io/ecmascript-asyncawait/

	==== d3js examples ⌘====		==== d3js examples ====
	* ch5, index.js		* ch5, index.js
	* ch2, index.js		* ch2, index.js

	== ECMAScript 2018 ⌘==		== ECMAScript 2018 ==
	* Rest / spread properties		* Rest / spread properties
	* Asynchronous iteration		* Asynchronous iteration

Lsokolowski1: /* Arrays related Con't */

2023-11-17T14:21:24Z

Arrays related Con't

← Older revision		Revision as of 14:21, 17 November 2023
Line 621:		Line 621:
	const myArr = [		const myArr = [
	{name:"X00",price:100 },		{name:"X00",price:100 },
	{name:"~~X01~~",price:~~100~~ },		{name:"X08",price:120 },
			{name:"X05",price:110 },
	{name:"X04",price:110 },		{name:"X04",price:110 },
	~~{name:"X05",price:110 },~~
	~~{name:"X08",price:120 },~~
	{name:"X09",price:120 },		{name:"X09",price:120 },
			{name:"X01",price:100 },
	];		];

Lsokolowski1: /* ES2020 */

2023-11-17T01:57:04Z

ES2020

← Older revision		Revision as of 01:57, 17 November 2023
Line 675:		Line 675:
	** <syntaxhighlight inline lang="ts">Promise.allSettled([prom1,prom2,prom3]).then {}</syntaxhighlight>		** <syntaxhighlight inline lang="ts">Promise.allSettled([prom1,prom2,prom3]).then {}</syntaxhighlight>
	** Docs <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled</small>		** Docs <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled</small>
	* Dynamic Import		* '''Dynamic''' Import

	=== BigInt ===		=== BigInt ===

Lsokolowski1: /* ES2020 */

2023-11-17T01:55:19Z

ES2020

← Older revision		Revision as of 01:55, 17 November 2023
Line 667:		Line 667:

	== ES2020 ==		== ES2020 ==
	* BigInt		* '''BigInt'''
	* String '''matchAll()'''		* String '''matchAll()'''
	* The '''Nullish Coalescing''' Operator (??) and Assignment (??=)		* The '''Nullish Coalescing''' Operator (??) and Assignment (??=)

Lsokolowski1: /* Optional catch */

2023-11-17T01:54:57Z

Optional catch

← Older revision		Revision as of 01:54, 17 November 2023
Line 648:		Line 648:

	=== Optional catch ===		=== Optional catch ===
	* Can be omitted if not needed		* Can be '''omitted''' if not needed
	Example		Example
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">

Lsokolowski1: /* Additions to RegExp */

2023-11-17T01:54:23Z

Additions to RegExp

← Older revision		Revision as of 01:54, 17 November 2023
Line 536:		Line 536:

	=== Additions to RegExp ===		=== Additions to RegExp ===
	* Unicode Property Escapes (\p{...})		* Unicode Property Escapes ('''\p{...}''')
	** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape</small>		** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape</small>
	* Lookbehind Assertions (?<= ) and (?<! )		* Lookbehind Assertions ('''?<=''' ) and ('''?<!''' )
	** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion</small>		** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion</small>
	* Named Capture Groups		* Named Capture Groups
	** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group</small>		** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group</small>
	* s (dotAll) Flag		* s ('''dotAll''') Flag
	** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll</small>		** <small>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll</small>
	<!-- TODO: examples and exercises -->		<!-- TODO: examples and exercises -->

Lsokolowski1: /* Asynchronous Iteration */

2023-11-17T01:53:37Z

Asynchronous Iteration

← Older revision		Revision as of 01:53, 17 November 2023
Line 496:		Line 496:

	=== Asynchronous Iteration ===		=== Asynchronous Iteration ===
	* Asynchronous iterators and iterables		* Asynchronous '''iterators''' and '''iterables'''
	** we can use the await keyword in for/of loops		** we can use the '''await''' keyword in '''for/of loops'''
	* Syntax <syntaxhighlight inline lang="ts">for await () {}</syntaxhighlight>		* Syntax <syntaxhighlight inline lang="ts">for await () {}</syntaxhighlight>
	<!-- [[File:AsyncIteration.png\|500px]] -->		<!-- [[File:AsyncIteration.png\|500px]] -->

Lsokolowski1: /* Execution improvements */

2023-11-17T01:52:52Z

Execution improvements

← Older revision		Revision as of 01:52, 17 November 2023
Line 547:		Line 547:

	=== Execution improvements ===		=== Execution improvements ===
	* Threads - using the Web Workers API to create threads		* '''Threads''' - using the Web Workers API to create threads
	** Worker threads		** Worker threads
	*** are used to execute code in the background - main program can continue execution		*** are used to execute code in the background - main program can continue execution
	*** run simultaneously with the main program - it can be time-saving		*** run simultaneously with the main program - it can be time-saving
	* Shared Memory - allows threads (different parts of a program)		* '''Shared Memory''' - allows threads (different parts of a program)
	** to access and update the same data in the same memory		** to access and update the same data in the same memory
	** no passing data between threads		** no passing data between threads
	** instead we can pass a SharedArrayBuffer object that points to the memory where data is saved		** instead we can pass a SharedArrayBuffer object that points to the memory where data is saved
	* SharedArrayBuffer		* '''SharedArrayBuffer'''
	** object which represents a fixed-length raw binary data buffer		** object which represents a fixed-length raw binary data buffer
	** similar to the ArrayBuffer object		** similar to the ArrayBuffer object