Skip to content

Sync with upstream @ 540d753e #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 700 commits into from
Closed
Changes from all commits
Commits
Show all changes
700 commits
Select commit Hold shift + click to select a range
86ed165
grammar suggestion
Sep 24, 2022
1b87b89
Omitting parentheses after `new`
web-dev-sam Sep 25, 2022
a965e49
typo
joaquinelio Sep 27, 2022
4c693a2
Update article.md
skromez Sep 27, 2022
1292386
typo
joaquinelio Sep 28, 2022
fe525d2
Change link to the spec
romanstetsyk Sep 28, 2022
f2ef231
Fix typo "stirng" to "string"
ann-kilzer Sep 29, 2022
8d89b7f
ECMA broken link
joaquinelio Sep 29, 2022
24dfb1f
Remove description of inconsistency between Chrome and Firefox
wdscxsj Sep 29, 2022
594bc55
https link
joaquinelio Sep 29, 2022
15ab2fd
Merge pull request #3209 from joaquinelio/patch-18
iliakan Sep 30, 2022
fde193a
Merge pull request #3208 from wdscxsj/patch-1
iliakan Sep 30, 2022
63bc08e
Merge pull request #3207 from joaquinelio/patch-17
iliakan Sep 30, 2022
4d42242
Merge pull request #3206 from ann-kilzer/patch-1
iliakan Sep 30, 2022
dc6e7d1
Merge pull request #3205 from romanstetsyk/master
iliakan Sep 30, 2022
e0621be
Merge pull request #3202 from joaquinelio/patch-15
iliakan Oct 1, 2022
4a9dc8e
Merge pull request #3204 from joaquinelio/patch-16
iliakan Oct 1, 2022
c8b4d34
move Unicode to a separate article
iliakan Oct 1, 2022
98d0c2c
Merge pull request #3201 from MindLaborDev/patch-1
iliakan Oct 1, 2022
b24e3fb
Merge pull request #3200 from digital-bw/patch-4
iliakan Oct 1, 2022
586cc54
Merge pull request #3199 from digital-bw/patch-3
iliakan Oct 1, 2022
2cb64ab
Merge pull request #3198 from skromez/master
iliakan Oct 1, 2022
2180da8
Merge pull request #3197 from digital-bw/patch-2
iliakan Oct 1, 2022
aedeed3
Merge pull request #3195 from digital-bw/patch-1
iliakan Oct 1, 2022
c27a7b4
closes #3185
iliakan Oct 1, 2022
c589176
closes #3183
iliakan Oct 1, 2022
666f356
closes #3190
iliakan Oct 1, 2022
c99d740
closes #3179
iliakan Oct 1, 2022
18b1314
closes #3096
iliakan Oct 2, 2022
cd86528
Fix typo
wdscxsj Oct 3, 2022
165a3f5
typo "optimzed
joaquinelio Oct 3, 2022
f0ce7e9
IE 9
joaquinelio Oct 3, 2022
f0fa52f
Fix typo
wdscxsj Oct 4, 2022
3a5d32e
Remove typo
aki-mizu Oct 5, 2022
4573d0b
Fix typos
TevaHenry Oct 5, 2022
dca45f7
Unicode art, grammar suggestions
joaquinelio Oct 5, 2022
dc7a157
Update article.md
joaquinelio Oct 5, 2022
87c0ca9
mdn link
joaquinelio Oct 6, 2022
af4843b
👾 smth
Rnbsov Oct 8, 2022
530dc9f
👾 smth
Rnbsov Oct 8, 2022
1d999c7
👾 smth
Rnbsov Oct 8, 2022
429caba
👾 smth
Rnbsov Oct 8, 2022
306a197
Update article.md
joaquinelio Oct 10, 2022
69bfbb0
Update article.md
joaquinelio Oct 10, 2022
b89b938
Update article.md
joaquinelio Oct 10, 2022
455c57a
Update article.md
joaquinelio Oct 10, 2022
6f34912
Update article.md
joaquinelio Oct 10, 2022
bf7d8bb
Merge pull request #3220 from joaquinelio/patch-19
iliakan Oct 10, 2022
7b0f9e5
Content-Length is now a CORS-safelisted response header
wdscxsj Oct 11, 2022
fe8ed87
Fix typo
wdscxsj Oct 12, 2022
75edb67
strict-origin-when-cross-origin is now the default referrerPolicy
wdscxsj Oct 12, 2022
0c5ac0e
typo at String concatenation with binary
adam4nj Oct 13, 2022
ca42edd
Remove a redundant argument
wdscxsj Oct 13, 2022
0487c35
Remove use of error.message in onerror()
wdscxsj Oct 14, 2022
c09efa8
http to https checked links
joaquinelio Oct 14, 2022
2ca8f83
closes #3242
iliakan Oct 18, 2022
245e59e
closes #3239
iliakan Oct 18, 2022
28803aa
Merge pull request #3238 from joaquinelio/pp
iliakan Oct 18, 2022
2f37897
minor fixes
iliakan Oct 18, 2022
f6cb5e9
Merge pull request #3237 from wdscxsj/patch-9
iliakan Oct 18, 2022
321b05e
Merge pull request #3223 from joaquinelio/patch-20
iliakan Oct 18, 2022
508ca01
closes #3229
iliakan Oct 18, 2022
5f91fda
closes #3230
iliakan Oct 18, 2022
aaf3b5b
Merge pull request #3231 from wdscxsj/patch-4
iliakan Oct 18, 2022
91e8edd
Merge pull request #3232 from wdscxsj/patch-5
iliakan Oct 18, 2022
36eb3da
Merge pull request #3233 from wdscxsj/patch-6
iliakan Oct 18, 2022
b0e2e04
Merge pull request #3234 from adam4nj/patch-1
iliakan Oct 18, 2022
a4050f2
Merge pull request #3235 from wdscxsj/patch-7
iliakan Oct 18, 2022
5dff42b
closes #3222
iliakan Oct 18, 2022
0c8e883
typo *udefined
joaquinelio Oct 20, 2022
4edd6b5
Proper Polish language inflection
f6p Oct 20, 2022
094aa10
Add .at( ) to strings summary
joaquinelio Oct 20, 2022
434e637
For the completeness of example.
Vic-Bonlight Oct 28, 2022
b3c7a7f
👾 add run button and remove typo
Rnbsov Oct 29, 2022
515dc44
👾 smth
Rnbsov Oct 29, 2022
78a9566
👾 smth
Rnbsov Oct 29, 2022
9e08049
👾 smth
Rnbsov Oct 29, 2022
1bda839
fix: typo getRangesAt to getRangeAt
leviding Oct 30, 2022
55b6c5e
Update article.md
nikolai-chernolutskii Oct 30, 2022
588117e
Update index.html
Alexandre887 Oct 30, 2022
4943f21
Update article.md
alagunoff Nov 1, 2022
8d185f7
Update article.md
Alexandre887 Nov 4, 2022
c70a3dc
Merge pull request #3218 from aki-mizu/patch-1
iliakan Nov 13, 2022
1fb0500
Merge pull request #3219 from TevaHenry/localstorage-sessionstorage
iliakan Nov 13, 2022
fe3d781
Merge pull request #3227 from Rnbsov/patch-75
iliakan Nov 13, 2022
1b078d0
Merge pull request #3245 from joaquinelio/patch-19
iliakan Nov 13, 2022
294a91e
Merge pull request #3246 from f6p/patch-1
iliakan Nov 13, 2022
083de40
Merge pull request #3247 from joaquinelio/patch-20
iliakan Nov 13, 2022
a4f1afd
Merge pull request #3248 from Victor-Nikliaiev/patch-1
iliakan Nov 13, 2022
fac9385
fixes #3249
iliakan Nov 13, 2022
ffbe0f5
Merge pull request #3251 from Rnbsov/patch-77
iliakan Nov 13, 2022
f47885b
minor fixes
iliakan Nov 13, 2022
7048f44
Merge pull request #3252 from leviding/patch-7
iliakan Nov 13, 2022
2c8f0fc
Merge pull request #3253 from nikolai-chernolutskii/patch-1
iliakan Nov 13, 2022
6fc7ba3
Merge pull request #3254 from Alexandre887/master
iliakan Nov 13, 2022
121141b
minor fixes
iliakan Nov 13, 2022
a665e29
Merge pull request #3255 from alagunoff/patch-1
iliakan Nov 13, 2022
8d9ecb7
Merge pull request #3258 from Alexandre887/patch-1
iliakan Nov 13, 2022
dafc925
the output is 0
joaquinelio Nov 14, 2022
c918da4
map.delete removes the pair key/value
joaquinelio Nov 14, 2022
9f1848c
Update article.md
joaquinelio Nov 14, 2022
d52f318
fix typo on Remainder %
cerealexperiments Nov 15, 2022
e1bec69
Merge pull request #3267 from cerealexperiments/patch-1
iliakan Nov 15, 2022
e912311
Merge pull request #3265 from joaquinelio/patch-20
iliakan Nov 15, 2022
cfc0195
Merge branch 'master' into patch-19
iliakan Nov 15, 2022
33c48a4
Merge pull request #3264 from joaquinelio/patch-19
iliakan Nov 15, 2022
477cb58
Merge pull request #3214 from joaquinelio/patch-17
iliakan Nov 15, 2022
746ad80
closes #3260
iliakan Nov 16, 2022
4e26c7e
Suggestion
bogdanbacosca Nov 26, 2022
657e389
minor code formatting
bogdanbacosca Nov 26, 2022
45a2d14
other code formatting bits
bogdanbacosca Nov 26, 2022
66ad8c1
Revert "minor code formatting"
bogdanbacosca Nov 26, 2022
67fe46f
Merge pull request #3279 from bogdanbacosca/if-else-bogdan
iliakan Nov 30, 2022
cfe2249
Bezier curves: update paused demo on point move
orelby Nov 30, 2022
1ce5644
Merge pull request #3287 from orelby/animation/bezier-curve/update-de…
iliakan Nov 30, 2022
8375316
fix typo, remove pleonasm
a-v-gor Dec 6, 2022
e75f655
small format change
joaquinelio Dec 7, 2022
4a8e8e1
Update article.md
Violet-Bora-Lee Dec 7, 2022
3f305f5
Merge pull request #3292 from a-v-gor/proofreading
iliakan Dec 11, 2022
9a26eb0
Merge pull request #3293 from joaquinelio/patch-19
iliakan Dec 11, 2022
ea7738b
Merge pull request #3295 from Violet-Bora-Lee/patch-4
iliakan Dec 11, 2022
b2e7dbf
grammar & legility (to check)
joaquinelio Dec 12, 2022
88d9b3f
removed -> remove; optimzed -> optimized ;
sagarpanchal Jan 18, 2023
ccd0a11
Fix "JavaScript specials" links
odsantos Jan 22, 2023
ae7afcb
update
bogdanbacosca Jan 24, 2023
03b8f2e
Merge pull request #3278 from bogdanbacosca/work
iliakan Jan 24, 2023
cd988dd
Fix a typo
MAHIN0093 Jan 24, 2023
bbf3a44
Update 1-js/05-data-types/04-array/article.md
MAHIN0093 Jan 24, 2023
f489288
Update button to fix horizontal scroll on mobile
marcusicaro Jan 25, 2023
4baa619
fix: add missing word 'to'
JeraldVin Jan 26, 2023
a4e9ba5
Merge pull request #3336 from JeraldVin/patch-1
iliakan Jan 26, 2023
d906956
Merge pull request #3334 from marcusicaro/patch-1
iliakan Jan 26, 2023
f9afaf3
Merge pull request #3330 from odsantos/fix-javascript-specials-links
iliakan Jan 26, 2023
5a3db89
Merge pull request #3332 from MAHIN0093/change
iliakan Jan 26, 2023
9e3fa13
Merge pull request #3302 from joaquinelio/patch-19
iliakan Jan 29, 2023
968fa09
added a word
Raviikumar001 Apr 4, 2023
ea5fbfa
added word fix
Raviikumar001 Apr 6, 2023
af71856
Merge pull request #3425 from Raviikumar001/Added-a-word
iliakan Apr 17, 2023
cd8dd53
#3345 Fixed Grammar
pradeep-ramola Apr 23, 2023
733ff69
Merge pull request #3435 from pradeep-ramola/master
iliakan Apr 29, 2023
e68750e
translated Russian word into English
MSHNK1 Jul 9, 2023
023c0ec
Fixing a minor grammatical typo in the document.
rahulrao0209 Jul 16, 2023
d694e89
Merge pull request #3492 from MSHNK1/fix-typos
iliakan Jul 17, 2023
285083f
minor fixes
iliakan Aug 7, 2023
8ab6b39
Add WeakRef and FinalizationRegistry article
WOLFRIEND Nov 4, 2023
5ab1ce2
Merge pull request #3609 from WOLFRIEND/master
iliakan Nov 15, 2023
b7ebc1b
Improve awkward sentence structure
smith558 Nov 24, 2023
75bad83
Improve grammar
smith558 Nov 24, 2023
74a8a19
Fix formatting char
smith558 Nov 27, 2023
d51037a
Fix grammar and add an example
nakhodkin Dec 27, 2023
c66bace
Fix grammar and typos
nakhodkin Dec 31, 2023
bbac8a5
Fix grammar and JavaScript syntax
nakhodkin Jan 2, 2024
1b9a28b
Update article.md
JaFro96 Jan 4, 2024
4ec440f
Update article.md
JaFro96 Jan 4, 2024
d83bfb2
refactor: Updated RFC spec Safe Methods URL in Cookies chapter
alexandermirzoyan Jan 12, 2024
9ec34c6
Replace assignment with equals in Truncate the text task
CJDumbleton Jan 17, 2024
2e0d5fb
Add missing word
qadzek Jan 20, 2024
52e184c
Add missing CSS unit
qadzek Jan 20, 2024
0530c92
fix square brackets
mikayel00 Jan 24, 2024
9270fe5
Merge pull request #3639 from JaFro96/master
smith558 Jan 24, 2024
f0f1006
fix: json
mikayel00 Jan 24, 2024
c98ec82
Merge pull request #3647 from CJDumbleton/CJDumbleton-patch-1
smith558 Jan 24, 2024
9c07c5b
Merge pull request #3649 from qadzek/patch-1
smith558 Jan 24, 2024
1a6edd7
Merge pull request #3656 from mikayel00/fix-brackets
smith558 Jan 26, 2024
9d157d8
Merge pull request #3617 from smith558/patch-3
smith558 Jan 27, 2024
b6c604a
Merge branch 'master' into patch-5
smith558 Jan 27, 2024
4286703
Merge pull request #3644 from alexandermirzoyan/patch-2
smith558 Jan 27, 2024
26ac4c8
Merge pull request #3212 from wdscxsj/patch-2
smith558 Jan 27, 2024
f24e463
Merge pull request #3213 from joaquinelio/patch-15
smith558 Jan 27, 2024
774d0c1
Merge pull request #3326 from sagarpanchal/patch-2
smith558 Jan 27, 2024
aacfc93
Fixed grammar error in regex-groups article.md
eedrxs Jan 27, 2024
e2ac312
Merge pull request #3659 from eedrxs/patch-1
smith558 Jan 27, 2024
ee62307
Update article.md
nepikn Feb 2, 2024
4a20875
Update article.md
smith558 Feb 11, 2024
5ce4b3a
Merge pull request #3664 from nepikn/patch-2
smith558 Feb 11, 2024
daca277
Fix grammar
smith558 Feb 11, 2024
3e92613
Improve options description
smith558 Feb 11, 2024
b6e7472
Update samesite content
smith558 Feb 13, 2024
d134cab
Remove "surely"
smith558 Feb 13, 2024
19e62af
Update article.md
smith558 Feb 13, 2024
a7d351f
change IndexedDb to IndexedDB (#3660)
0xtpsl Feb 13, 2024
ab1db04
Fix grammar and typos (#3628)
nakhodkin Feb 14, 2024
d461a93
Merge pull request #3217 from wdscxsj/patch-3
smith558 Feb 14, 2024
00bdf88
Update LICENSE.md
iliakan Mar 8, 2024
25c9bdf
Update LICENSE.md
iliakan Mar 8, 2024
c13e707
Update LICENSE.md
iliakan Mar 8, 2024
e15f535
Update LICENSE.md
iliakan Mar 8, 2024
2f91d87
Update LICENSE.md
iliakan Mar 8, 2024
ea05aa9
Updated result visualization
Filin3 Mar 31, 2024
04b73bf
Merge pull request #3681 from Filin3/patch-1
smith558 May 5, 2024
acf339c
Merge pull request #3632 from nakhodkin/patch-2
smith558 May 5, 2024
541b7f9
Merge pull request #3636 from nakhodkin/patch-5
smith558 May 5, 2024
0b9bc2f
Merge pull request #3634 from nakhodkin/patch-4
smith558 May 5, 2024
85da6f1
Update article.md
ellie-heidari May 10, 2024
475899e
Update article.md
smith558 May 17, 2024
7e524ba
Add link
smith558 May 17, 2024
42851f4
Update task.md
pvepamb1 May 18, 2024
2092da7
Merge pull request #3694 from pvepamb1/patch-1
smith558 May 18, 2024
f684d39
change example element of multidimensional array
sneeed Jun 8, 2024
c151e11
minor fixes
iliakan Jun 13, 2024
3fd3f98
- `run`
Alexandre887 Jun 23, 2024
d1ffe5d
docs: remove eval polyfill.io
kricsleo Jul 5, 2024
262f91a
Merge pull request #3712 from kricsleo/patch-1
smith558 Jul 8, 2024
815fafa
Merge pull request #3692 from ellie-heidari/patch-1
smith558 Jul 8, 2024
d6e0376
Remove BigInt IE incompatibility part (#3709)
FloffyGarlic Jul 9, 2024
5a0df77
Update article.md
shallow-beach Jul 10, 2024
62827d8
Merge pull request #3715 from shallow-beach/master
smith558 Jul 10, 2024
4104eba
Merge pull request #3704 from Alexandre887/patch-10
smith558 Jul 10, 2024
ca72abb
Merge pull request #3700 from sneeed/patch-2
smith558 Jul 10, 2024
b258d7d
Merge pull request #3495 from rahulrao0209/patch-1
smith558 Jul 10, 2024
6f08958
minor fix to function name written in explanation
tonybishnoi Oct 9, 2024
eedc262
Grammatical fix
nikoandpiko Oct 22, 2024
34a80e7
Merge pull request #3768 from tonybishnoi/patch-1
smith558 Oct 24, 2024
67833c9
Update article.md
zakingslayerv22 Dec 11, 2024
b36823a
better wording
pj-szdm Dec 18, 2024
dc14378
Update article.md
mhi1627 Jan 22, 2025
8b2a2f2
Improve readability
AdityaGirdhar Jan 30, 2025
a2b97b5
Merge pull request #3810 from AdityaGirdhar/patch-1
smith558 Feb 4, 2025
793ad4b
Merge branch 'master' into patch-1
smith558 Feb 4, 2025
e466826
Merge pull request #3772 from nikoandpiko/patch-1
smith558 Feb 4, 2025
a087279
Merge pull request #3804 from mhi1627/patch-1
smith558 Feb 8, 2025
26daef2
Merge pull request #3794 from zakingslayerv22/patch-1
smith558 Feb 8, 2025
6236eb8
Merge pull request #3797 from pj-szdm/patch-1
smith558 Feb 8, 2025
011dd4f
Update article.md
Gleb-Pastushenko Feb 10, 2025
1dce5b7
Merge pull request #3815 from Gleb-Pastushenko/patch-6
smith558 Feb 10, 2025
4b3474b
Fixed missing closing parenthesis in 2-ui/4-forms-control/1-form-elem…
vincent-clipet Mar 10, 2025
3d7abb9
Merge pull request #3822 from vincent-clipet/fix/missing_parenthesis
smith558 Mar 10, 2025
3de63df
promise.all task
iliakan Mar 24, 2025
ef31066
minor fixes
iliakan Mar 24, 2025
de4247b
minor fixes
iliakan Mar 24, 2025
0af25bc
minor fixes
iliakan Mar 24, 2025
d932e52
minor fixes
iliakan Mar 24, 2025
f0d8abb
minor fixes
iliakan Mar 24, 2025
f775835
minor fixes
iliakan Mar 24, 2025
0760c90
minor fixes
iliakan Mar 24, 2025
5dea441
minor fixes
iliakan Mar 24, 2025
035c526
minor fixes
iliakan Mar 24, 2025
4c4598b
Fix for #3826 - Removed errorception.com from the respective md file.
Paramesh-T-S Mar 29, 2025
cde189d
Update Safari settings screenshots
dangerman Apr 2, 2025
78c6c44
Update Safari devtools instructions
dangerman Apr 2, 2025
e88c212
Update Function object, NFE article
rahulrao0209 Apr 6, 2025
a711a1f
Merge pull request #3830 from Paramesh-T-S/Issue_fix_Outdate_-link_in…
iliakan Apr 8, 2025
efaa9aa
sentry.io added as per suggestion - https://github.com/javascript-tut…
Paramesh-T-S Apr 8, 2025
6cc5077
Merge pull request #3835 from Paramesh-T-S/Issue_fix_Outdate_-link_in…
iliakan Apr 9, 2025
81cfee9
Update article.md
rahulrao0209 Apr 13, 2025
e2d8ebe
Merge pull request #3836 from rahulrao0209/patch-3
smith558 Apr 13, 2025
6bbdd0c
Merge pull request #3834 from rahulrao0209/patch-2
smith558 Apr 13, 2025
d3c395c
Merge pull request #3832 from dangerman/update-safari-devtools-screen…
smith558 Apr 13, 2025
540d753
Replace with up to date screenshots
smith558 Apr 13, 2025
6733dfc
merging all conflicts
iliakan Jun 9, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
github: iliakan
45 changes: 44 additions & 1 deletion 1-js/01-getting-started/1-intro/article.md

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions 1-js/01-getting-started/2-manuals-specifications/article.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,53 @@


<<<<<<< HEAD
# ഈ മാനുവലും അതിന്റെ പ്രത്യേകതകളും
=======
This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources.
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
ഈ ബുക് ഒരു *ടൂട്ടോറിയൽ* ആണ്. ഇതു നിങ്ങളെ പതിയെപ്പതിയെ language പഠിക്കാൻ സഹായിക്കും. ബേസിക് കാര്യങ്ങളൊക്കെ പഠിച്ചു കഴിഞ്ഞാൽ, പിന്നെ നിങ്ങൾക്ക് വേറൊരു source വേണ്ടി വരും.

## കുറച്ചു കാര്യങ്ങൾ

[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) ജാവാസ്ക്രിപ്റ്റിനെ കുറിച്ചു ആഴത്തിലുള്ള വിശദമായ ഒരു വിശകലനം നമുക്ക് നേടിത്തരുo. അതാണ് പ്രോഗ്രാമിന് രൂപം കൊടുക്കുന്നത്.

<<<<<<< HEAD
=======
A new specification version is released every year. Between these releases, the latest specification draft is at <https://tc39.es/ecma262/>.
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
പക്ഷെ വളരെ ഫോർമലായത് കൊണ്ടു, തുടക്കമിത് മനസ്സിലാക്കാൻ നല്ല ബുദ്ധിമുട്ടായിരിക്കും. അതിനാൽ, വിശദാംശങ്ങളെക്കുറിച്ചുള്ള ഏറ്റവും വിശ്വാസ്യതയുള്ള ഡാറ്റ സ്രോതസ്സ് നിങ്ങൾക്ക് ആവശ്യമുണ്ടെങ്കിൽ, ഇതൊരു ശരിയായ സ്ഥലമാണ്. എന്നാൽ ഇത് സാധാരണ ഉപയോഗത്തിന് വേണ്ടിയല്ല.


ഓരോ വർഷവും പുതിയൊരു വേർഷൻ അവർ പുറത്തിറക്കും. ഏറ്റവും പുതിയ വേർഷൻ റിലീസ് <https://tc39.es/ecma262/> ൽ ലഭിക്കുന്നതാണ്.


<<<<<<< HEAD
പുതിയ സ്റ്റാൻഡേർഡ് ആയിട്ടുള്ള ഫീച്ചേഴ്‌സ് വായിക്കാൻ("stage 3"), [ഇവിടെ നോക്കുക](https://github.com/tc39/proposals).

കൂടാതെ,നിങ്ങളൊരു ബ്രൌസർ ഡെവലപ്‌ ചെയ്യുകയാണെങ്കിൽ, കുറച്ചു കൂടി ഡീറ്റൈലായിട്ടൊരു [രണ്ടാം ഭാഗം](info:browser-environment) കിട്ടുന്നതാണ്.
=======
You can find it at <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>.

Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. <https://google.com/search?q=MDN+parseInt> to search for the `parseInt` function.
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b

## മാനുവൽസ്

- **MDN (Mozilla) JavaScript Reference** ഇതു ഒരുപാട് ഉദാഹരണങ്ങളും മറ്റു കാര്യങ്ങളും അടങ്ങിയ ഒരു മാനുവലാണ് . ഇത് language functions,methods ഉം അതുപോലെ മറ്റു കാര്യങ്ങളെ കുറിച്ചുo ആഴത്തിൽ മനസ്സിലാക്കാൻ നമ്മളെ സഹായിക്കും.

<<<<<<< HEAD
കൂടുതൽ അറിയാൻ നോക്കൂ <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>.

അല്ലങ്കിൽ ഇന്റർനെറ്റിൽ സെർച്ച് ചെയ്താലും മതി. സെർച്ച് ചെയ്യുമ്പോൾ "MDN [term]" അടിക്കാൻ മറക്കരുത്, e.g.`parseInt` സെർച്ച് ചെയ്യുന്നത് <https://google.com/search?q=MDN+parseInt>.
=======
- <https://caniuse.com> - per-feature tables of support, e.g. to see which engines support modern cryptography functions: <https://caniuse.com/#feat=cryptography>.
- <https://kangax.github.io/compat-table> - a table with language features and engines that support those or don't support.

All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc.
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b

## അനുയോജിത ടേബിൾ
22 changes: 21 additions & 1 deletion 1-js/01-getting-started/3-code-editors/article.md
Original file line number Diff line number Diff line change
@@ -12,8 +12,13 @@

നിങ്ങൾ ഇത് വരെ ഒരു IDE സെലക്ട് ചെയ്തിട്ടില്ലെങ്കിൽ, താഴെ പറയുന്നവ ഒന്നു നോക്കുക:

<<<<<<< HEAD
- [Visual Studio Code](https://code.visualstudio.com/) (എല്ലാ പ്ലാറ്ഫോമിലും, ഫ്രീ).
- [WebStorm](http://www.jetbrains.com/webstorm/) (എല്ലാ പ്ലാറ്ഫോമിലും, പെയ്ഡ്).
=======
- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid).
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
വിൻഡോസിൽ, "Visual Studio"യും നമുക്ക് ഉപയോഗിക്കാവുന്നതാണ്, ഇതിനു "Visual Studio Code" മായി ഒരു ബന്ധവുമില്ല. "Visual Studio" പെയ്ഡ് സോഫ്ട് വയറും വിന്ഡോഡിൽ മാത്രവുമുള്ള ഒരു എഡിറ്ററുമാണ്, മാത്രവുമല്ല ഇതു .NET പ്ലാറ്ഫോമിനു പറ്റിയ ഒരു എഡിറ്ററുമാണ്. ജാവസ്ക്രിപ്റ്റിനും ഇതു നല്ലൊരു എഡിറ്ററാണ്. ഇതിനു ഒരു ഫ്രീ വേർഷൻ കൂടെയുണ്ട് [Visual Studio Community](https://www.visualstudio.com/vs/community/).

@@ -29,6 +34,7 @@

സാധാരണയായി, lightweight എഡിറ്ററുകൾക്ക് directory-level syntax analyzers , autocompleters തുടങ്ങി ഒരുപാട് plugins ഉണ്ട്, അതുകൊണ്ടു തന്നെ lightweight എഡിറ്റർ ഉം IDE യും തമ്മിൽ വലിയ വ്യത്യാസങ്ങൾ ഒന്നും ഇല്ല.

<<<<<<< HEAD
ഇനി പറയുന്നവയും കൂടെ ഒന്നു നോക്കാം:

- [Atom](https://atom.io/) (എല്ലാ platform ലും ഉണ്ട്, ഫ്രീ).
@@ -38,13 +44,27 @@
- [Vim](http://www.vim.org/) ഉം [Emacs](https://www.gnu.org/software/emacs/) ഉം വേറിട്ട ഒരു അനുഭവം തന്നെ ഉപയോക്താവിനു കൊടുക്കും.
- [Atom](https://atom.io/) (cross-platform, free).
- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
=======
There are many options, for instance:

- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.

## നമ്മുടെയിടയിൽ ഒരു തർക്കം വേണ്ട

മുകളിലുള്ള ലിസ്റ്റുകളിലെ എഡിറ്ററുകൾ ഞാനോ ഡെവലപ്പർമാരായി ഞാൻ കരുതുന്ന എന്റെ സുഹൃത്തുക്കളോ വളരെക്കാലമായി ഉപയോഗിച്ചു ഇഷ്ടപെട്ടിട്ടുള്ളവയാണ്.

നമ്മുടെ ഈ വലിയ ലോകത്ത് ഇതിലും മികച്ച എഡിറ്ററുകളുമുണ്ട്. അതിൽ നിങ്ങൾ ഏറ്റവും ഇഷ്ടപ്പെടുന്ന ഒന്ന് തിരഞ്ഞെടുത്തു ഉപയോഗിക്കാവുന്നതാണ്.

<<<<<<< HEAD
മറ്റേതൊരു ഉപകരണത്തെയും പോലെ ഒരു എഡിറ്റർ തിരഞ്ഞെടുക്കാൻ വ്യക്തിപരo, ശീലങ്ങൾ, വ്യക്തിഗത മുൻഗണനകൾ എന്നിവയെ പോലെ തന്നെ അത് നിങ്ങളുടെ പ്രോജക്റ്റുകളെ ആശ്രയിച്ചിരിക്കുന്നു.
=======
The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.

The author's personal opinion:

- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language).
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
6 changes: 5 additions & 1 deletion 1-js/01-getting-started/4-devtools/article.md
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@

അത് ഏകദേശം ഇതുപോലെ ഇരിക്കും:

![chrome](chrome.png)
![chrome](chrome.webp)

developer tools ന്റെ യാഥാർത്ഥ ലുക്ക് നിങ്ങളുടെ Chrome ന്റെ വേർഷൻ പോലെയായിരിക്കും. അതു പല സമയത്തുo മാറിക്കൊണ്ടിരിക്കുമെങ്കിലും ഏകദേശം ഒരുപോലെയിരിക്കും.

@@ -49,7 +49,11 @@ Error മെസ്സേജിന്റെ അടിയിലായി, ഒര

Safari (Mac ന്റെ browser ആണ്, Windows/Linux ഉം അത് സപ്പോർട് ചെയ്യത്തില്ല) യുടെ കാര്യത്തിലാണെങ്കിൽ കുറച്ചു കൂടി വ്യത്യാസം ഉണ്ട്. ഇതിൽ നമുക്ക് ആദ്യം "Develop menu" enable ചെയ്യണം.

<<<<<<< HEAD
Preferences ൽ കേറിയതിനു ശേഷo "Advanced" എന്ന ഭാഗത്തേക്ക് പോകുക. അവിടെ താഴെയായിട്ടു ഒരു ചെക്‌ബോകസ് കാണാം:
=======
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
![safari](safari.png)

Binary file removed 1-js/01-getting-started/4-devtools/chrome.png
Binary file not shown.
Binary file added 1-js/01-getting-started/4-devtools/chrome.webp
Binary file not shown.
Binary file added 1-js/01-getting-started/4-devtools/chrome@2.webp
Binary file not shown.
Binary file removed 1-js/01-getting-started/4-devtools/chrome@2x.png
Binary file not shown.
Binary file modified 1-js/01-getting-started/4-devtools/safari.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified 1-js/01-getting-started/4-devtools/safari@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions 1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
Original file line number Diff line number Diff line change
@@ -12,13 +12,14 @@ const birthday = '18.04.1982';
const age = someCode(birthday);
```

Here we have a constant `birthday` date and the `age` is calculated from `birthday` with the help of some code (it is not provided for shortness, and because details don't matter here).
Here we have a constant `birthday` for the date, and also the `age` constant.

The `age` is calculated from `birthday` using `someCode()`, which means a function call that we didn't explain yet (we will soon!), but the details don't matter here, the point is that `age` is calculated somehow based on the `birthday`.

Would it be right to use upper case for `birthday`? For `age`? Or even for both?

```js
const BIRTHDAY = '18.04.1982'; // make uppercase?
const BIRTHDAY = '18.04.1982'; // make birthday uppercase?

const AGE = someCode(BIRTHDAY); // make uppercase?
const AGE = someCode(BIRTHDAY); // make age uppercase?
```

77 changes: 77 additions & 0 deletions 1-js/02-first-steps/04-variables/article.md

Large diffs are not rendered by default.

42 changes: 24 additions & 18 deletions 1-js/02-first-steps/05-types/article.md
Original file line number Diff line number Diff line change
@@ -68,9 +68,20 @@ We'll see more about working with numbers in the chapter <info:number>.
## BigInt [#bigint-type]
In JavaScript, the "number" type cannot represent integer values larger than <code>(2<sup>53</sup>-1)</code> (that's `9007199254740991`), or less than <code>-(2<sup>53</sup>-1)</code> for negatives. It's a technical limitation caused by their internal representation.
In JavaScript, the "number" type cannot safely represent integer values larger than <code>(2<sup>53</sup>-1)</code> (that's `9007199254740991`), or less than <code>-(2<sup>53</sup>-1)</code> for negatives.

For most purposes that's quite enough, but sometimes we need really big numbers, e.g. for cryptography or microsecond-precision timestamps.
To be really precise, the "number" type can store larger integers (up to <code>1.7976931348623157 * 10<sup>308</sup></code>), but outside of the safe integer range <code>±(2<sup>53</sup>-1)</code> there'll be a precision error, because not all digits fit into the fixed 64-bit storage. So an "approximate" value may be stored.
For example, these two numbers (right above the safe range) are the same:
```js
console.log(9007199254740991 + 1); // 9007199254740992
console.log(9007199254740991 + 2); // 9007199254740992
```
So to say, all odd integers greater than <code>(2<sup>53</sup>-1)</code> can't be stored at all in the "number" type.

For most purposes <code>±(2<sup>53</sup>-1)</code> range is quite enough, but sometimes we need the entire range of really big integers, e.g. for cryptography or microsecond-precision timestamps.

`BigInt` type was recently added to the language to represent integers of arbitrary length.

@@ -83,13 +94,6 @@ const bigInt = 1234567890123456789012345678901234567890n;

As `BigInt` numbers are rarely needed, we don't cover them here, but devoted them a separate chapter <info:bigint>. Read it when you need such big numbers.
```smart header="Compatibility issues"
Right now, `BigInt` is supported in Firefox/Chrome/Edge/Safari, but not in IE.
```
You can check [*MDN* BigInt compatibility table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) to know which versions of a browser are supported.
## String
A string in JavaScript must be surrounded by quotes.
@@ -213,7 +217,7 @@ The `symbol` type is used to create unique identifiers for objects. We have to m

## The typeof operator [#type-typeof]

The `typeof` operator returns the type of the argument. It's useful when we want to process values of different types differently or just want to do a quick check.
The `typeof` operator returns the type of the operand. It's useful when we want to process values of different types differently or just want to do a quick check.

A call to `typeof x` returns a string with the type name:

@@ -263,14 +267,16 @@ Some people prefer `typeof(x)`, although the `typeof x` syntax is much more comm
There are 8 basic data types in JavaScript.
- `number` for numbers of any kind: integer or floating-point, integers are limited by <code>±(2<sup>53</sup>-1)</code>.
- `bigint` is for integer numbers of arbitrary length.
- `string` for strings. A string may have zero or more characters, there's no separate single-character type.
- `boolean` for `true`/`false`.
- `null` for unknown values -- a standalone type that has a single value `null`.
- `undefined` for unassigned values -- a standalone type that has a single value `undefined`.
- `object` for more complex data structures.
- `symbol` for unique identifiers.
- Seven primitive data types:
- `number` for numbers of any kind: integer or floating-point, integers are limited by <code>±(2<sup>53</sup>-1)</code>.
- `bigint` for integer numbers of arbitrary length.
- `string` for strings. A string may have zero or more characters, there's no separate single-character type.
- `boolean` for `true`/`false`.
- `null` for unknown values -- a standalone type that has a single value `null`.
- `undefined` for unassigned values -- a standalone type that has a single value `undefined`.
- `symbol` for unique identifiers.
- And one non-primitive data type:
- `object` for more complex data structures.
The `typeof` operator allows us to see which type is stored in a variable.
8 changes: 4 additions & 4 deletions 1-js/02-first-steps/07-type-conversions/article.md
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ For example, `alert` automatically converts any value to a string to show it. Ma
There are also cases when we need to explicitly convert a value to the expected type.

```smart header="Not talking about objects yet"
In this chapter, we won't cover objects. For now we'll just be talking about primitives.
In this chapter, we won't cover objects. For now, we'll just be talking about primitives.
Later, after we learn about objects, in the chapter <info:object-toprimitive> we'll see how objects fit in.
```
@@ -34,7 +34,7 @@ String conversion is mostly obvious. A `false` becomes `"false"`, `null` becomes

## Numeric Conversion

Numeric conversion happens in mathematical functions and expressions automatically.
Numeric conversion in mathematical functions and expressions happens automatically.

For example, when division `/` is applied to non-numbers:

@@ -70,7 +70,7 @@ Numeric conversion rules:
|`undefined`|`NaN`|
|`null`|`0`|
|<code>true&nbsp;and&nbsp;false</code> | `1` and `0` |
| `string` | Whitespaces from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |
| `string` | Whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from the start and end are removed. If the remaining string is empty, the result is `0`. Otherwise, the number is "read" from the string. An error gives `NaN`. |

Examples:

@@ -130,7 +130,7 @@ The conversion follows the rules:
|`undefined`|`NaN`|
|`null`|`0`|
|<code>true&nbsp;/&nbsp;false</code> | `1 / 0` |
| `string` | The string is read "as is", whitespaces from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. |
| `string` | The string is read "as is", whitespaces (includes spaces, tabs `\t`, newlines `\n` etc.) from both sides are ignored. An empty string becomes `0`. An error gives `NaN`. |
**`Boolean Conversion`** -- Occurs in logical operations. Can be performed with `Boolean(value)`.
Original file line number Diff line number Diff line change
@@ -22,4 +22,4 @@ undefined + 1 = NaN // (6)
4. The subtraction always converts to numbers, so it makes `" -9 "` a number `-9` (ignoring spaces around it).
5. `null` becomes `0` after the numeric conversion.
6. `undefined` becomes `NaN` after the numeric conversion.
7. Space characters, are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`.
7. Space characters are trimmed off string start and end when a string is converted to a number. Here the whole string consists of space characters, such as `\t`, `\n` and a "regular" space between them. So, similarly to an empty string, it becomes `0`.
31 changes: 16 additions & 15 deletions 1-js/02-first-steps/08-operators/article.md
Original file line number Diff line number Diff line change
@@ -50,8 +50,9 @@ The result of `a % b` is the [remainder](https://en.wikipedia.org/wiki/Remainder
For instance:

```js run
alert( 5 % 2 ); // 1, a remainder of 5 divided by 2
alert( 8 % 3 ); // 2, a remainder of 8 divided by 3
alert( 5 % 2 ); // 1, the remainder of 5 divided by 2
alert( 8 % 3 ); // 2, the remainder of 8 divided by 3
alert( 8 % 4 ); // 0, the remainder of 8 divided by 4
```

### Exponentiation **
@@ -68,7 +69,7 @@ alert( 2 ** 3 ); // 2³ = 8
alert( 2 ** 4 ); // 2⁴ = 16
```

Just like in maths, the exponentiation operator is defined for non-integer numbers as well.
Just like in maths, the exponentiation operator is defined for non-integer numbers as well.

For example, a square root is an exponentiation by ½:

@@ -80,7 +81,7 @@ alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root)

## String concatenation with binary +

Let's meet features of JavaScript operators that are beyond school arithmetics.
Let's meet the features of JavaScript operators that are beyond school arithmetics.
Usually, the plus operator `+` sums numbers.
@@ -194,18 +195,18 @@ Here's an extract from the [precedence table](https://developer.mozilla.org/en-U
| Precedence | Name | Sign |
|------------|------|------|
| ... | ... | ... |
| 15 | unary plus | `+` |
| 15 | unary negation | `-` |
| 14 | exponentiation | `**` |
| 13 | multiplication | `*` |
| 13 | division | `/` |
| 12 | addition | `+` |
| 12 | subtraction | `-` |
| 14 | unary plus | `+` |
| 14 | unary negation | `-` |
| 13 | exponentiation | `**` |
| 12 | multiplication | `*` |
| 12 | division | `/` |
| 11 | addition | `+` |
| 11 | subtraction | `-` |
| ... | ... | ... |
| 2 | assignment | `=` |
| ... | ... | ... |

As we can see, the "unary plus" has a priority of `15` which is higher than the `12` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition.
As we can see, the "unary plus" has a priority of `14` which is higher than the `11` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition.
## Assignment
@@ -303,9 +304,9 @@ Such operators have the same precedence as a normal assignment, so they run afte
```js run
let n = 2;
n *= 3 + 5;
n *= 3 + 5; // right part evaluated first, same as n *= 8
alert( n ); // 16 (right part evaluated first, same as n *= 8)
alert( n ); // 16
```

## Increment/decrement
@@ -437,7 +438,7 @@ The list of operators:
- RIGHT SHIFT ( `>>` )
- ZERO-FILL RIGHT SHIFT ( `>>>` )
These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise) chapter on MDN when a need arises.
These operators are used very rarely, when we need to fiddle with numbers on the very lowest (bitwise) level. We won't need these operators any time soon, as web development has little use of them, but in some special areas, such as cryptography, they are useful. You can read the [Bitwise Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) chapter on MDN when a need arises.

## Comma

8 changes: 4 additions & 4 deletions 1-js/02-first-steps/10-ifelse/article.md
Original file line number Diff line number Diff line change
@@ -68,7 +68,7 @@ if (cond) {

## The "else" clause

The `if` statement may contain an optional "else" block. It executes when the condition is falsy.
The `if` statement may contain an optional `else` block. It executes when the condition is falsy.

For example:
```js run
@@ -181,9 +181,9 @@ alert( message );
It may be difficult at first to grasp what's going on. But after a closer look, we can see that it's just an ordinary sequence of tests:

1. The first question mark checks whether `age < 3`.
2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon '":"', checking `age < 18`.
3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon '":"', checking `age < 100`.
4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon '":"', returning `'What an unusual age!'`.
2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon ":", checking `age < 18`.
3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon ":", checking `age < 100`.
4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon ":", returning `'What an unusual age!'`.

Here's how this looks using `if..else`:

Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The answer: `null`, because it's the first falsy value from the list.

```js run
alert( 1 && null && 2 );
alert(1 && null && 2);
```

22 changes: 11 additions & 11 deletions 1-js/02-first-steps/12-nullish-coalescing-operator/article.md
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@

The nullish coalescing operator is written as two question marks `??`.

As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. We'll say that an expression is "defined" when it's neither `null` nor `undefined`.
As it treats `null` and `undefined` similarly, we'll use a special term here, in this article. For brevity, we'll say that a value is "defined" when it's neither `null` nor `undefined`.

The result of `a ?? b` is:
- if `a` is defined, then `a`,
@@ -22,29 +22,29 @@ result = (a !== null && a !== undefined) ? a : b;

Now it should be absolutely clear what `??` does. Let's see where it helps.

The common use case for `??` is to provide a default value for a potentially undefined variable.
The common use case for `??` is to provide a default value.

For example, here we show `user` if defined, otherwise `Anonymous`:
For example, here we show `user` if its value isn't `null/undefined`, otherwise `Anonymous`:

```js run
let user;

alert(user ?? "Anonymous"); // Anonymous (user not defined)
alert(user ?? "Anonymous"); // Anonymous (user is undefined)
```
Here's the example with `user` assigned to a name:
```js run
let user = "John";

alert(user ?? "Anonymous"); // John (user defined)
alert(user ?? "Anonymous"); // John (user is not null/undefined)
```
We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to enter a value.
Let's say we have a user's data in variables `firstName`, `lastName` or `nickName`. All of them may be not defined, if the user decided not to fill in the corresponding values.
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them aren't defined.
We'd like to display the user name using one of these variables, or show "Anonymous" if all of them are `null/undefined`.
Let's use the `??` operator for that:
@@ -76,7 +76,7 @@ alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
*/!*
```
Historically, the OR `||` operator was there first. It exists since the beginning of JavaScript, so developers were using it for such purposes for a long time.
Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time.
On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`.
@@ -106,11 +106,11 @@ In practice, the zero height is often a valid value, that shouldn't be replaced
## Precedence
The precedence of the `??` operator is the same as `||`. They both equal `4` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
The precedence of the `??` operator is the same as `||`. They both equal `3` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
So if we'd like to choose a value with `??` in an expression with other operators, consider adding parentheses:
So we may need to add parentheses in expressions like this:
```js run
let height = null;
@@ -128,7 +128,7 @@ Otherwise, if we omit parentheses, then as `*` has the higher precedence than `?
// without parentheses
let area = height ?? 100 * width ?? 50;

// ...works the same as this (probably not what we want):
// ...works this way (not what we want):
let area = height ?? (100 * width) ?? 50;
```
22 changes: 18 additions & 4 deletions 1-js/02-first-steps/13-while-for/article.md
Original file line number Diff line number Diff line change
@@ -6,6 +6,19 @@ For example, outputting goods from a list one after another or just running the

*Loops* are a way to repeat the same code multiple times.

```smart header="The for..of and for..in loops"
A small announcement for advanced readers.
This article covers only basic loops: `while`, `do..while` and `for(..;..;..)`.
If you came to this article searching for other types of loops, here are the pointers:
- See [for..in](info:object#forin) to loop over object properties.
- See [for..of](info:array#loops) and [iterables](info:iterable) for looping over arrays and iterable objects.
Otherwise, please read on.
```

## The "while" loop

The `while` loop has the following syntax:
@@ -162,10 +175,8 @@ for (i = 0; i < 3; i++) { // use an existing variable
alert(i); // 3, visible, because declared outside of the loop
```
````


### Skipping parts

Any part of `for` can be skipped.
@@ -268,7 +279,7 @@ for (let i = 0; i < 10; i++) {

From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an `if` block instead of using `continue`.

But as a side-effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability.
But as a side effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability.
````
````warn header="No `break/continue` to the right side of '?'"
@@ -286,7 +297,6 @@ if (i > 5) {
...and rewrite it using a question mark:
```js no-beautify
(i > 5) ? alert(i) : *!*continue*/!*; // continue isn't allowed here
```
@@ -321,6 +331,7 @@ We need a way to stop the process if the user cancels the input.
The ordinary `break` after `input` would only break the inner loop. That's not sufficient -- labels, come to the rescue!

A *label* is an identifier with a colon before a loop:

```js
labelName: for (...) {
...
@@ -342,6 +353,7 @@ The `break <labelName>` statement in the loop below breaks out to the label:
// do something with the value...
}
}

alert('Done!');
```

@@ -362,13 +374,15 @@ The `continue` directive can also be used with a label. In this case, code execu
Labels do not allow us to jump into an arbitrary place in the code.
For example, it is impossible to do this:
```js
break label; // jump to the label below (doesn't work)
label: for (...)
```
A `break` directive must be inside a code block. Technically, any labelled code block will do, e.g.:
```js
label: {
// ...
2 changes: 1 addition & 1 deletion 1-js/02-first-steps/14-switch/article.md
Original file line number Diff line number Diff line change
@@ -139,7 +139,7 @@ switch (a) {
Now both `3` and `5` show the same message.
The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
## Type matters
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
No difference.
No difference!

In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy.
50 changes: 44 additions & 6 deletions 1-js/02-first-steps/15-function-basics/article.md
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ The `function` keyword goes first, then goes the *name of the function*, then a

```js
function name(parameter1, parameter2, ... parameterN) {
...body...
// body
}
```

@@ -176,7 +176,7 @@ When a value is passed as a function parameter, it's also called an *argument*.
In other words, to put these terms straight:
- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term)
- A parameter is the variable listed inside the parentheses in the function declaration (it's a declaration time term).
- An argument is the value that is passed to the function when it is called (it's a call time term).
We declare functions listing their parameters, then call them passing arguments.
@@ -206,7 +206,13 @@ function showMessage(from, *!*text = "no text given"*/!*) {
showMessage("Ann"); // Ann: no text given
```
Now if the `text` parameter is not passed, it will get the value `"no text given"`
Now if the `text` parameter is not passed, it will get the value `"no text given"`.
The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
```js
showMessage("Ann", undefined); // Ann: no text given
```
Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible:
@@ -225,9 +231,41 @@ In the example above, `anotherFunction()` isn't called at all, if the `text` par
On the other hand, it's independently called every time when `text` is missing.
```

````smart header="Default parameters in old JavaScript code"
Several years ago, JavaScript didn't support the syntax for default parameters. So people used other ways to specify them.

Nowadays, we can come across them in old scripts.

For example, an explicit check for `undefined`:

```js
function showMessage(from, text) {
*!*
if (text === undefined) {
text = 'no text given';
}
*/!*

alert( from + ": " + text );
}
```
...Or using the `||` operator:
```js
function showMessage(from, text) {
// If the value of text is falsy, assign the default value
// this assumes that text == "" is the same as no text at all
text = text || 'no text given';
...
}
```
````
### Alternative default parameters
Sometimes it makes sense to assign default values for parameters not in the function declaration, but at a later stage.
Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
@@ -422,7 +460,7 @@ These examples assume common meanings of prefixes. You and your team are free to
```smart header="Ultrashort function names"
Functions that are used *very often* sometimes have ultrashort names.

For example, the [jQuery](http://jquery.com) framework defines a function with `$`. The [Lodash](http://lodash.com/) library has its core function named `_`.
For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.

These are exceptions. Generally function names should be concise and descriptive.
```
@@ -490,7 +528,7 @@ function name(parameters, delimited, by, comma) {
To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables.
It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side-effect.
It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect.
Function naming:
18 changes: 9 additions & 9 deletions 1-js/02-first-steps/16-function-expressions/article.md
Original file line number Diff line number Diff line change
@@ -82,15 +82,15 @@ let sayHi = function() { // (1) create
alert( "Hello" );
};

let func = sayHi;
let func = sayHi; //(2)
// ...
```

Everything would work the same.


````smart header="Why is there a semicolon at the end?"
You might wonder, why does Function Expression have a semicolon `;` at the end, but Function Declaration does not:
You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not:
```js
function sayHi() {
@@ -144,13 +144,13 @@ function showCancel() {
ask("Do you agree?", showOk, showCancel);
```

In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such function usually draws a nice-looking question window. But that's another story.
In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story.

**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.**

The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer.

We can use Function Expressions to write the same function much shorter:
We can use Function Expressions to write an equivalent, shorter function:

```js run no-beautify
function ask(question, yes, no) {
@@ -186,15 +186,15 @@ Let's formulate the key differences between Function Declarations and Expression

First, the syntax: how to differentiate between them in the code.

- *Function Declaration:* a function, declared as a separate statement, in the main code flow.
- *Function Declaration:* a function, declared as a separate statement, in the main code flow:

```js
// Function Declaration
function sum(a, b) {
return a + b;
}
```
- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created at the right side of the "assignment expression" `=`:
- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the "assignment expression" `=`:

```js
// Function Expression
@@ -291,7 +291,7 @@ if (age < 18) {
welcome(); // \ (runs)
*/!*
// |
function welcome() { // |
function welcome() { // |
alert("Hello!"); // | Function Declaration is available
} // | everywhere in the block where it's declared
// |
@@ -301,7 +301,7 @@ if (age < 18) {

} else {

function welcome() {
function welcome() {
alert("Greetings!");
}
}
@@ -360,7 +360,7 @@ welcome(); // ok now


```smart header="When to choose Function Declaration versus Function Expression?"
As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
That's also better for readability, as it's easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more "eye-catching".
12 changes: 6 additions & 6 deletions 1-js/02-first-steps/17-arrow-functions-basics/article.md
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ As you can see, `(a, b) => a + b` means a function that accepts two arguments na
alert( double(3) ); // 6
```

- If there are no arguments, parentheses will be empty (but they should be present):
- If there are no arguments, parentheses are empty, but they must be present:

```js run
let sayHi = () => alert("Hello!");
@@ -64,7 +64,7 @@ For instance, to dynamically create a function:
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
() => alert('Hello') :
() => alert('Hello!') :
() => alert("Greetings!");
welcome();
@@ -76,9 +76,9 @@ They are very convenient for simple one-line actions, when we're just too lazy t
## Multiline arrow functions
The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
The arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them.

Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them.
Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does).

Like this:

@@ -105,7 +105,7 @@ For now, we can already use arrow functions for one-line actions and callbacks.
## Summary
Arrow functions are handy for one-liners. They come in two flavors:
Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors:
1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`.
2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
12 changes: 6 additions & 6 deletions 1-js/02-first-steps/18-javascript-specials/article.md
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ To fully enable all features of modern JavaScript, we should start scripts with

The directive must be at the top of a script or at the beginning of a function body.

Without `"use strict"`, everything still works, but some features behave in the old-fashion, "compatible" way. We'd generally prefer the modern behavior.
Without `"use strict"`, everything still works, but some features behave in the old-fashioned, "compatible" way. We'd generally prefer the modern behavior.

Some modern features of the language (like classes that we'll study in the future) enable strict mode implicitly.

@@ -103,13 +103,13 @@ More in: <info:variables> and <info:types>.

We're using a browser as a working environment, so basic UI functions will be:

[`prompt(question, [default])`](mdn:api/Window/prompt)
[`prompt(question, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel".

[`confirm(question)`](mdn:api/Window/confirm)
[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.

[`alert(message)`](mdn:api/Window/alert)
[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
: Output a `message`.

All these functions are *modal*, they pause the code execution and prevent the visitor from interacting with the page until they answer.
@@ -144,7 +144,7 @@ Assignments
: There is a simple assignment: `a = b` and combined ones like `a *= 2`.

Bitwise
: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](mdn:/JavaScript/Guide/Expressions_and_Operators#Bitwise) when they are needed.
: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed.

Conditional
: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
@@ -256,7 +256,7 @@ We covered three ways to create a function in JavaScript:
3. Arrow functions:
```js
// expression at the right side
// expression on the right side
let sum = (a, b) => a + b;
// or multi-line syntax with { ... }, need return here:
21 changes: 10 additions & 11 deletions 1-js/03-code-quality/01-debugging-chrome/article.md
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@ If we press `key:Esc`, then a console opens below. We can type commands there an

After a statement is executed, its result is shown below.

For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`:
For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`:

![](chrome-sources-console.svg)

@@ -63,12 +63,12 @@ We can always find a list of breakpoints in the right panel. That's useful when
- ...And so on.

```smart header="Conditional breakpoints"
*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy.
*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy.
That's handy when we need to stop only for a certain variable value or for certain function parameters.
```

## Debugger command
## The command "debugger"

We can also pause the code by using the `debugger` command in it, like this:

@@ -84,8 +84,7 @@ function hello(name) {
}
```

That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint.

Such command works only when the development tools are open, otherwise the browser ignores it.

## Pause and look around

@@ -99,7 +98,7 @@ Please open the informational dropdowns to the right (labeled with arrows). They

1. **`Watch` -- shows current values for any expressions.**

You can click the plus `+` and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution.
You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution.

2. **`Call Stack` -- shows the nested calls chain.**

@@ -135,11 +134,11 @@ There are buttons for it at the top of the right panel. Let's engage them.
Clicking this again and again will step through all script statements one by one.

<span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
: Similar to the previous "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own.
: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own).

The "Step" command goes into it and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals.
If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals.

The execution is then paused immediately after that function.
The execution is then paused immediately after that function call.

That's good if we're not interested to see what happens inside the function call.

@@ -155,7 +154,7 @@ There are buttons for it at the top of the right panel. Let's engage them.
: That button does not move the execution. Just a mass on/off for breakpoints.

<span class="devtools" style="background-position:-90px -146px"></span> -- enable/disable automatic pause in case of an error.
: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.
: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.

```smart header="Continue to here"
Right click on a line of code opens the context menu with a great option called "Continue to here".
@@ -187,7 +186,7 @@ As we can see, there are three main ways to pause a script:
2. The `debugger` statements.
3. An error (if dev tools are open and the button <span class="devtools" style="background-position:-90px -146px"></span> is "on").

When paused, we can debug - examine variables and trace the code to see where the execution goes wrong.
When paused, we can debug: examine variables and trace the code to see where the execution goes wrong.

There are many more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/02-coding-style/code-style.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/03-comments/article.md
Original file line number Diff line number Diff line change
@@ -143,7 +143,7 @@ Such comments allow us to understand the purpose of the function and use it the

By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking.

Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at <http://usejsdoc.org/>.
Also, there are tools like [JSDoc 3](https://github.com/jsdoc/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at <https://jsdoc.app>.

Why is the task solved this way?
: What's written is important. But what's *not* written may be even more important to understand what's going on. Why is the task solved exactly this way? The code gives no answer.
16 changes: 8 additions & 8 deletions 1-js/03-code-quality/05-testing-mocha/article.md
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@ describe("pow", function() {
A spec has three main building blocks that you can see above:

`describe("title", function() { ... })`
: What functionality we're describing. In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks.
: What functionality we're describing? In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks.

`it("use case description", function() { ... })`
: In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it.
@@ -69,7 +69,7 @@ The flow of development usually looks like this:

1. An initial spec is written, with tests for the most basic functionality.
2. An initial implementation is created.
3. To check whether it works, we run the testing framework [Mocha](http://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works.
3. To check whether it works, we run the testing framework [Mocha](https://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works.
4. Now we have a working initial implementation with tests.
5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail.
6. Go to 3, update the implementation till tests give no errors.
@@ -79,15 +79,15 @@ So, the development is *iterative*. We write the spec, implement it, make sure t

Let's see this development flow in our practical case.

The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail).
The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use a few JavaScript libraries to run the tests, just to see that they are working (they will all fail).

## The spec in action

Here in the tutorial we'll be using the following JavaScript libraries for tests:

- [Mocha](http://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests.
- [Chai](http://chaijs.com) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`.
- [Sinon](http://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later.
- [Mocha](https://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests.
- [Chai](https://www.chaijs.com/) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`.
- [Sinon](https://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later.

These libraries are suitable for both in-browser and server-side testing. Here we'll consider the browser variant.

@@ -338,14 +338,14 @@ The newly added tests fail, because our implementation does not support them. Th
```smart header="Other assertions"
Please note the assertion `assert.isNaN`: it checks for `NaN`.
There are other assertions in [Chai](http://chaijs.com) as well, for instance:
There are other assertions in [Chai](https://www.chaijs.com/) as well, for instance:
- `assert.equal(value1, value2)` -- checks the equality `value1 == value2`.
- `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`.
- `assert.notEqual`, `assert.notStrictEqual` -- inverse checks to the ones above.
- `assert.isTrue(value)` -- checks that `value === true`
- `assert.isFalse(value)` -- checks that `value === false`
- ...the full list is in the [docs](http://chaijs.com/api/assert/)
- ...the full list is in the [docs](https://www.chaijs.com/api/assert/)
```
So we should add a couple of lines to `pow`:
23 changes: 10 additions & 13 deletions 1-js/03-code-quality/06-polyfills/article.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@

# Polyfills and transpilers

The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/).

Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.

So it's quite common for an engine to implement only the part of the standard.
So it's quite common for an engine to implement only part of the standard.

A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (it's big, we have a lot to study yet).
A good page to see the current state of support for language features is <https://compat-table.github.io/compat-table/es6/> (it's big, we have a lot to study yet).

As programmers, we'd like to use most recent features. The more good stuff - the better!

@@ -40,9 +40,9 @@ Now the rewritten code is suitable for older JavaScript engines.
Usually, a developer runs the transpiler on their own computer, and then deploys the transpiled code to the server.
Speaking of names, [Babel](https://babeljs.io) is one of the most prominent transpilers out there.
Speaking of names, [Babel](https://babeljs.io) is one of the most prominent transpilers out there.
Modern project build systems, such as [webpack](http://webpack.github.io/), provide means to run transpiler automatically on every code change, so it's very easy to integrate into development process.
Modern project build systems, such as [webpack](https://webpack.js.org/), provide a means to run a transpiler automatically on every code change, so it's very easy to integrate into the development process.
## Polyfills
@@ -69,23 +69,20 @@ if (!Math.trunc) { // if no such function
}
```
JavaScript is a highly dynamic language, scripts may add/modify any functions, even including built-in ones.
Two interesting libraries of polyfills are:
- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features.
- [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser.
JavaScript is a highly dynamic language. Scripts may add/modify any function, even built-in ones.
One interesting polyfill library is [core-js](https://github.com/zloirock/core-js), which supports a wide range of features and allows you to include only the ones you need.
## Summary
In this chapter we'd like to motivate you to study modern and even "bleeding-edge" language features, even if they aren't yet well-supported by JavaScript engines.
Just don't forget to use transpiler (if using modern syntax or operators) and polyfills (to add functions that may be missing). And they'll ensure that the code works.
Just don't forget to use a transpiler (if using modern syntax or operators) and polyfills (to add functions that may be missing). They'll ensure that the code works.
For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](http://webpack.github.io/) with [babel-loader](https://github.com/babel/babel-loader) plugin.
For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](https://webpack.js.org/) with the [babel-loader](https://github.com/babel/babel-loader) plugin.
Good resources that show the current state of support for various features:
- <https://kangax.github.io/compat-table/es6/> - for pure JavaScript.
- <https://compat-table.github.io/compat-table/es6/> - for pure JavaScript.
- <https://caniuse.com/> - for browser-related functions.
P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though.
21 changes: 11 additions & 10 deletions 1-js/04-object-basics/01-object/article.md
Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@ The resulting `user` object can be imagined as a cabinet with two signed files l

![user object](object-user.svg)

We can add, remove and read files from it any time.
We can add, remove and read files from it at any time.

Property values are accessible using the dot notation:

@@ -62,7 +62,7 @@ user.isAdmin = true;

![user object 2](object-user-isadmin.svg)

To remove a property, we can use `delete` operator:
To remove a property, we can use the `delete` operator:

```js
delete user.age;
@@ -201,13 +201,13 @@ let bag = {
};
```

Square brackets are much more powerful than the dot notation. They allow any property names and variables. But they are also more cumbersome to write.
Square brackets are much more powerful than dot notation. They allow any property names and variables. But they are also more cumbersome to write.

So most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we switch to square brackets.

## Property value shorthand

In real code we often use existing variables as values for property names.
In real code, we often use existing variables as values for property names.

For instance:

@@ -252,7 +252,7 @@ let user = {

## Property names limitations

As we already know, a variable cannot have a name equal to one of language-reserved words like "for", "let", "return" etc.
As we already know, a variable cannot have a name equal to one of the language-reserved words like "for", "let", "return" etc.

But for an object property, there's no such restriction:

@@ -325,7 +325,7 @@ alert( "blabla" in user ); // false, user.blabla doesn't exist

Please note that on the left side of `in` there must be a *property name*. That's usually a quoted string.

If we omit quotes, that means a variable, it should contain the actual name to be tested. For instance:
If we omit quotes, that means a variable should contain the actual name to be tested. For instance:

```js run
let user = { age: 30 };
@@ -355,7 +355,7 @@ In the code above, the property `obj.test` technically exists. So the `in` opera
Situations like this happen very rarely, because `undefined` should not be explicitly assigned. We mostly use `null` for "unknown" or "empty" values. So the `in` operator is an exotic guest in the code.
## The "for..in" loop
## The "for..in" loop [#forin]
To walk over all keys of an object, there exists a special form of the loop: `for..in`. This is a completely different thing from the `for(;;)` construct that we studied before.
@@ -412,7 +412,7 @@ for (let code in codes) {
*/!*
```
The object may be used to suggest a list of options to the user. If we're making a site mainly for German audience then we probably want `49` to be the first.
The object may be used to suggest a list of options to the user. If we're making a site mainly for a German audience then we probably want `49` to be the first.
But if we run the code, we see a totally different picture:
@@ -424,9 +424,10 @@ The phone codes go in the ascending sorted order, because they are integers. So
````smart header="Integer properties? What's that?"
The "integer property" term here means a string that can be converted to-and-from an integer without a change.
So, "49" is an integer property name, because when it's transformed to an integer number and back, it's still the same. But "+49" and "1.2" are not:
So, `"49"` is an integer property name, because when it's transformed to an integer number and back, it's still the same. But `"+49"` and `"1.2"` are not:
```js run
// Number(...) explicitly converts to a number
// Math.trunc is a built-in function that removes the decimal part
alert( String(Math.trunc(Number("49"))) ); // "49", same, integer property
alert( String(Math.trunc(Number("+49"))) ); // "49", not same "+49" ⇒ not integer property
@@ -481,7 +482,7 @@ They store properties (key-value pairs), where:
To access a property, we can use:
- The dot notation: `obj.property`.
- Square brackets notation `obj["property"]`. Square brackets allow to take the key from a variable, like `obj[varWithKey]`.
- Square brackets notation `obj["property"]`. Square brackets allow taking the key from a variable, like `obj[varWithKey]`.
Additional operators:
- To delete a property: `delete obj.prop`.
131 changes: 96 additions & 35 deletions 1-js/04-object-basics/02-object-copy/article.md
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ And here's how it's actually stored in memory:

The object is stored somewhere in memory (at the right of the picture), while the `user` variable (at the left) has a "reference" to it.

We may think of an object variable, such as `user`, as like a sheet of paper with the address of the object on it.
We may think of an object variable, such as `user`, like a sheet of paper with the address of the object on it.

When we perform actions with the object, e.g. take a property `user.name`, the JavaScript engine looks at what's at that address and performs the operation on the actual object.

@@ -100,15 +100,37 @@ alert( a == b ); // false
For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely -- usually they appear as a result of a programming mistake.
````smart header="Const objects can be modified"
An important side effect of storing objects as references is that an object declared as `const` *can* be modified.

For instance:

```js run
const user = {
name: "John"
};
*!*
user.name = "Pete"; // (*)
*/!*
alert(user.name); // Pete
```

It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object, but properties of that object are free to change.

In other words, the `const user` gives an error only if we try to set `user=...` as a whole.

That said, if we really need to make constant object properties, it's also possible, but using totally different methods. We'll mention that in the chapter <info:property-descriptors>.
````

## Cloning and merging, Object.assign [#cloning-and-merging-object-assign]

So, copying an object variable creates one more reference to the same object.

But what if we need to duplicate an object? Create an independent copy, a clone?
That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. But there is rarely a need -- copying by reference is good most of the time.
But what if we need to duplicate an object?

But if we really want that, then we need to create a new object and replicate the structure of the existing one by iterating over its properties and copying them on the primitive level.
We can create a new object and replicate the structure of the existing one, by iterating over its properties and copying them on the primitive level.

Like this:

@@ -133,21 +155,22 @@ clone.name = "Pete"; // changed the data in it
alert( user.name ); // still John in the original object
```

Also we can use the method [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for that.
We can also use the method [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign).

The syntax is:

```js
Object.assign(dest, [src1, src2, src3...])
Object.assign(dest, ...sources)
```

- The first argument `dest` is a target object.
- Further arguments `src1, ..., srcN` (can be as many as needed) are source objects.
- It copies the properties of all source objects `src1, ..., srcN` into the target `dest`. In other words, properties of all arguments starting from the second are copied into the first object.
- The call returns `dest`.
- Further arguments is a list of source objects.

For instance, we can use it to merge several objects into one:
```js
It copies the properties of all source objects into the target `dest`, and then returns it as the result.

For example, we have `user` object, let's add a couple of permissions to it:
```js run
let user = { name: "John" };
let permissions1 = { canView: true };
@@ -159,6 +182,9 @@ Object.assign(user, permissions1, permissions2);
*/!*
// now user = { name: "John", canView: true, canEdit: true }
alert(user.name); // John
alert(user.canView); // true
alert(user.canEdit); // true
```
If the copied property name already exists, it gets overwritten:
@@ -171,9 +197,9 @@ Object.assign(user, { name: "Pete" });
alert(user.name); // now user = { name: "Pete" }
```
We also can use `Object.assign` to replace `for..in` loop for simple cloning:
We also can use `Object.assign` to perform a simple object cloning:
```js
```js run
let user = {
name: "John",
age: 30
@@ -182,15 +208,18 @@ let user = {
*!*
let clone = Object.assign({}, user);
*/!*
alert(clone.name); // John
alert(clone.age); // 30
```
It copies all properties of `user` into the empty object and returns it.
Here it copies all properties of `user` into the empty object and returns it.
There are also other methods of cloning an object, e.g. using the [spread syntax](info:rest-parameters-spread) `clone = {...user}`, covered later in the tutorial.
## Nested cloning
Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects. What to do with them?
Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects.
Like this:
```js run
@@ -205,9 +234,7 @@ let user = {
alert( user.sizes.height ); // 182
```
Now it's not enough to copy `clone.sizes = user.sizes`, because the `user.sizes` is an object, it will be copied by reference. So `clone` and `user` will share the same sizes:
Like this:
Now it's not enough to copy `clone.sizes = user.sizes`, because `user.sizes` is an object, and will be copied by reference, so `clone` and `user` will share the same sizes:

```js run
let user = {
@@ -223,42 +250,76 @@ let clone = Object.assign({}, user);
alert( user.sizes === clone.sizes ); // true, same object
// user and clone share sizes
user.sizes.width++; // change a property from one place
alert(clone.sizes.width); // 51, see the result from the other one
user.sizes.width = 60; // change a property from one place
alert(clone.sizes.width); // 60, get the result from the other one
```

To fix that, we should use a cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning".
To fix that and make `user` and `clone` truly separate objects, we should use a cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning" or "structured cloning". There's [structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) method that implements deep cloning.

We can use recursion to implement it. Or, to not reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com).

````smart header="Const objects can be modified"
An important side effect of storing objects as references is that an object declared as `const` *can* be modified.
### structuredClone

For instance:
The call `structuredClone(object)` clones the `object` with all nested properties.

Here's how we can use it in our example:
```js run
const user = {
name: "John"
let user = {
name: "John",
sizes: {
height: 182,
width: 50
}
};
*!*
user.name = "Pete"; // (*)
let clone = structuredClone(user);
*/!*
alert(user.name); // Pete
alert( user.sizes === clone.sizes ); // false, different objects
// user and clone are totally unrelated now
user.sizes.width = 60; // change a property from one place
alert(clone.sizes.width); // 50, not related
```
It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object, but properties of that object are free to change.
The `structuredClone` method can clone most data types, such as objects, arrays, primitive values.
In other words, the `const user` gives an error only if we try to set `user=...` as a whole.
It also supports circular references, when an object property references the object itself (directly or via a chain or references).
That said, if we really need to make constant object properties, it's also possible, but using totally different methods. We'll mention that in the chapter <info:property-descriptors>.
````
For instance:
```js run
let user = {};
// let's create a circular reference:
// user.me references the user itself
user.me = user;

let clone = structuredClone(user);
alert(clone.me === clone); // true
```
As you can see, `clone.me` references the `clone`, not the `user`! So the circular reference was cloned correctly as well.
Although, there are cases when `structuredClone` fails.
For instance, when an object has a function property:
```js run
// error
structuredClone({
f: function() {}
});
```
Function properties aren't supported.
To handle such complex cases we may need to use a combination of cloning methods, write custom code or, to not reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com).
## Summary
Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself.
All operations via copied references (like adding/removing properties) are performed on the same single object.
To make a "real copy" (a clone) we can use `Object.assign` for the so-called "shallow copy" (nested objects are copied by reference) or a "deep cloning" function, such as [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
To make a "real copy" (a clone) we can use `Object.assign` for the so-called "shallow copy" (nested objects are copied by reference) or a "deep cloning" function `structuredClone` or use a custom cloning implementation, such as [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep).
20 changes: 10 additions & 10 deletions 1-js/04-object-basics/03-garbage-collection/article.md
Original file line number Diff line number Diff line change
@@ -74,7 +74,7 @@ Now if we do the same:
user = null;
```

...Then the object is still reachable via `admin` global variable, so it's in memory. If we overwrite `admin` too, then it can be removed.
...Then the object is still reachable via `admin` global variable, so it must stay in memory. If we overwrite `admin` too, then it can be removed.

## Interlinked objects

@@ -169,11 +169,11 @@ The first step marks the roots:

![](garbage-collection-2.svg)

Then their references are marked:
Then we follow their references and mark referenced objects:

![](garbage-collection-3.svg)

...And their references, while possible:
...And continue to follow further references, while possible:

![](garbage-collection-4.svg)

@@ -183,12 +183,12 @@ Now the objects that could not be visited in the process are considered unreacha

We can also imagine the process as spilling a huge bucket of paint from the roots, that flows through all references and marks all reachable objects. The unmarked ones are then removed.

That's the concept of how garbage collection works. JavaScript engines apply many optimizations to make it run faster and not affect the execution.
That's the concept of how garbage collection works. JavaScript engines apply many optimizations to make it run faster and not introduce any delays into the code execution.

Some of the optimizations:

- **Generational collection** -- objects are split into two sets: "new ones" and "old ones". Many objects appear, do their job and die fast, they can be cleaned up aggressively. Those that survive for long enough, become "old" and are examined less often.
- **Incremental collection** -- if there are many objects, and we try to walk and mark the whole object set at once, it may take some time and introduce visible delays in the execution. So the engine tries to split the garbage collection into pieces. Then the pieces are executed one by one, separately. That requires some extra bookkeeping between them to track changes, but we have many tiny delays instead of a big one.
- **Generational collection** -- objects are split into two sets: "new ones" and "old ones". In typical code, many objects have a short life span: they appear, do their job and die fast, so it makes sense to track new objects and clear the memory from them if that's the case. Those that survive for long enough, become "old" and are examined less often.
- **Incremental collection** -- if there are many objects, and we try to walk and mark the whole object set at once, it may take some time and introduce visible delays in the execution. So the engine splits the whole set of existing objects into multiple parts. And then clear these parts one after another. There are many small garbage collections instead of a total one. That requires some extra bookkeeping between them to track changes, but we get many tiny delays instead of a big one.
- **Idle-time collection** -- the garbage collector tries to run only while the CPU is idle, to reduce the possible effect on the execution.

There exist other optimizations and flavours of garbage collection algorithms. As much as I'd like to describe them here, I have to hold off, because different engines implement different tweaks and techniques. And, what's even more important, things change as engines develop, so studying deeper "in advance", without a real need is probably not worth that. Unless, of course, it is a matter of pure interest, then there will be some links for you below.
@@ -199,14 +199,14 @@ The main things to know:

- Garbage collection is performed automatically. We cannot force or prevent it.
- Objects are retained in memory while they are reachable.
- Being referenced is not the same as being reachable (from a root): a pack of interlinked objects can become unreachable as a whole.
- Being referenced is not the same as being reachable (from a root): a pack of interlinked objects can become unreachable as a whole, as we've seen in the example above.

Modern engines implement advanced algorithms of garbage collection.

A general book "The Garbage Collection Handbook: The Art of Automatic Memory Management" (R. Jones et al) covers some of them.

If you are familiar with low-level programming, the more detailed information about V8 garbage collector is in the article [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).
If you are familiar with low-level programming, more detailed information about V8's garbage collector is in the article [A tour of V8: Garbage Collection](https://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).

[V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn the garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of V8 engineers. I'm saying: "V8", because it is best covered with articles in the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.
The [V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn more about garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](https://mrale.ph) who worked as one of the V8 engineers. I'm saying: "V8", because it is best covered by articles on the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.

In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language.
In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language.
3 changes: 1 addition & 2 deletions 1-js/04-object-basics/04-object-methods/7-calculator/task.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ importance: 5

Create an object `calculator` with three methods:

- `read()` prompts for two values and saves them as object properties.
- `read()` prompts for two values and saves them as object properties with names `a` and `b` respectively.
- `sum()` returns the sum of saved values.
- `mul()` multiplies saved values and returns the result.

@@ -21,4 +21,3 @@ alert( calculator.mul() );
```

[demo]

8 changes: 4 additions & 4 deletions 1-js/04-object-basics/04-object-methods/8-chain-calls/task.md
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ importance: 2

# Chaining

There's a `ladder` object that allows to go up and down:
There's a `ladder` object that allows you to go up and down:

```js
let ladder = {
@@ -21,7 +21,7 @@ let ladder = {
};
```

Now, if we need to make several calls in sequence, can do it like this:
Now, if we need to make several calls in sequence, we can do it like this:

```js
ladder.up();
@@ -32,10 +32,10 @@ ladder.down();
ladder.showStep(); // 0
```

Modify the code of `up`, `down` and `showStep` to make the calls chainable, like this:
Modify the code of `up`, `down`, and `showStep` to make the calls chainable, like this:

```js
ladder.up().up().down().showStep().down().showStep(); // shows 1 then 0
```

Such approach is widely used across JavaScript libraries.
Such an approach is widely used across JavaScript libraries.
4 changes: 2 additions & 2 deletions 1-js/04-object-basics/04-object-methods/article.md
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@ let user = {
// first, declare
function sayHi() {
alert("Hello!");
};
}

// then add as a method
user.sayHi = sayHi;
@@ -90,7 +90,7 @@ user = {

As demonstrated, we can omit `"function"` and just write `sayHi()`.

To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred.
To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases, the shorter syntax is preferred.

## "this" in methods

Original file line number Diff line number Diff line change
@@ -10,8 +10,8 @@ Is it possible to create functions `A` and `B` so that `new A() == new B()`?
function A() { ... }
function B() { ... }

let a = new A;
let b = new B;
let a = new A();
let b = new B();

alert( a == b ); // true
```
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ importance: 5

Create a constructor function `Calculator` that creates objects with 3 methods:

- `read()` asks for two values using `prompt` and remembers them in object properties.
- `read()` prompts for two values and saves them as object properties with names `a` and `b` respectively.
- `sum()` returns the sum of these properties.
- `mul()` returns the multiplication product of these properties.

2 changes: 1 addition & 1 deletion 1-js/04-object-basics/06-constructor-new/article.md
Original file line number Diff line number Diff line change
@@ -171,7 +171,7 @@ alert( new SmallUser().name ); // John
Usually constructors don't have a `return` statement. Here we mention the special behavior with returning objects mainly for the sake of completeness.

````smart header="Omitting parentheses"
By the way, we can omit parentheses after `new`, if it has no arguments:
By the way, we can omit parentheses after `new`:
```js
let user = new User; // <-- no parentheses
47 changes: 30 additions & 17 deletions 1-js/04-object-basics/07-optional-chaining/article.md
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ In many practical cases we'd prefer to get `undefined` instead of an error here
let html = document.querySelector('.elem').innerHTML; // error if it's null
```

Once again, if the element doesn't exist, we'll get an error accessing `.innerHTML` of `null`. And in some cases, when the absence of the element is normal, we'd like to avoid the error and just accept `html = null` as the result.
Once again, if the element doesn't exist, we'll get an error accessing `.innerHTML` property of `null`. And in some cases, when the absence of the element is normal, we'd like to avoid the error and just accept `html = null` as the result.

How can we do this?

@@ -44,11 +44,19 @@ let user = {};
alert(user.address ? user.address.street : undefined);
```

It works, there's no error... But it's quite inelegant. As you can see, the `"user.address"` appears twice in the code. For more deeply nested properties, that becomes a problem as more repetitions are required.
It works, there's no error... But it's quite inelegant. As you can see, the `"user.address"` appears twice in the code.

E.g. let's try getting `user.address.street.name`.
Here's how the same would look for `document.querySelector`:

We need to check both `user.address` and `user.address.street`:
```js run
let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;
```

We can see that the element search `document.querySelector('.elem')` is actually called twice here. Not good.

For more deeply nested properties, it becomes even uglier, as more repetitions are required.

E.g. let's get `user.address.street.name` in a similar fashion.

```js
let user = {}; // user has no address
@@ -58,7 +66,7 @@ alert(user.address ? user.address.street ? user.address.street.name : null : nul

That's just awful, one may even have problems understanding such code.

Don't even care to, as there's a better way to write it, using the `&&` operator:
There's a little better way to write it, using the `&&` operator:

```js run
let user = {}; // user has no address
@@ -92,6 +100,12 @@ alert( user?.address?.street ); // undefined (no error)
The code is short and clean, there's no duplication at all.
Here's an example with `document.querySelector`:
```js run
let html = document.querySelector('.elem')?.innerHTML; // will be undefined, if there's no element
```
Reading the address with `user?.address` works even if `user` object doesn't exist:
```js run
@@ -108,9 +122,9 @@ E.g. in `user?.address.street.name` the `?.` allows `user` to safely be `null/un
```warn header="Don't overuse the optional chaining"
We should use `?.` only where it's ok that something doesn't exist.

For example, if according to our coding logic `user` object must exist, but `address` is optional, then we should write `user.address?.street`, but not `user?.address?.street`.
For example, if according to our code logic `user` object must exist, but `address` is optional, then we should write `user.address?.street`, but not `user?.address?.street`.

So, if `user` happens to be undefined due to a mistake, we'll see a programming error about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.
Then, if `user` happens to be undefined, we'll see a programming error about it and fix it. Otherwise, if we overuse `?.`, coding errors can be silenced where not appropriate, and become more difficult to debug.
```
````warn header="The variable before `?.` must be declared"
@@ -127,15 +141,15 @@ The variable must be declared (e.g. `let/const/var user` or as a function parame

As it was said before, the `?.` immediately stops ("short-circuits") the evaluation if the left part doesn't exist.

So, if there are any further function calls or side effects, they don't occur.
So, if there are any further function calls or operations to the right of `?.`, they won't be made.

For instance:

```js run
let user = null;
let x = 0;

user?.sayHi(x++); // no "sayHi", so the execution doesn't reach x++
user?.sayHi(x++); // no "user", so the execution doesn't reach sayHi call and x++

alert(x); // 0, value not incremented
```
@@ -162,13 +176,13 @@ userAdmin.admin?.(); // I am admin
*/!*

*!*
userGuest.admin?.(); // nothing (no such method)
userGuest.admin?.(); // nothing happens (no such method)
*/!*
```
Here, in both lines we first use the dot (`userAdmin.admin`) to get `admin` property, because we assume that the user object exists, so it's safe read from it.
Here, in both lines we first use the dot (`userAdmin.admin`) to get `admin` property, because we assume that the `user` object exists, so it's safe read from it.
Then `?.()` checks the left part: if the admin function exists, then it runs (that's so for `userAdmin`). Otherwise (for `userGuest`) the evaluation stops without errors.
Then `?.()` checks the left part: if the `admin` function exists, then it runs (that's so for `userAdmin`). Otherwise (for `userGuest`) the evaluation stops without errors.
The `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.
@@ -179,7 +193,7 @@ let user1 = {
firstName: "John"
};

let user2 = null;
let user2 = null;

alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined
@@ -192,17 +206,16 @@ delete user?.name; // delete user.name if user exists
```
````warn header="We can use `?.` for safe reading and deleting, but not writing"
The optional chaining `?.` has no use at the left side of an assignment.
The optional chaining `?.` has no use on the left side of an assignment.
For example:
```js run
let user = null;

user?.name = "John"; // Error, doesn't work
// because it evaluates to undefined = "John"
// because it evaluates to: undefined = "John"
```
It's just not that smart.
````
## Summary
@@ -217,4 +230,4 @@ As we can see, all of them are straightforward and simple to use. The `?.` check
A chain of `?.` allows to safely access nested properties.
Still, we should apply `?.` carefully, only where it's acceptable that the left part doesn't exist. So that it won't hide programming errors from us, if they occur.
Still, we should apply `?.` carefully, only where it's acceptable, according to our code logic, that the left part doesn't exist. So that it won't hide programming errors from us, if they occur.
36 changes: 24 additions & 12 deletions 1-js/04-object-basics/08-symbol/article.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@

# Symbol type

By specification, object property keys may be either of string type, or of symbol type. Not numbers, not booleans, only strings or symbols, these two types.
By specification, only two primitive types may serve as object property keys:

Till now we've been using only strings. Now let's see the benefits that symbols can give us.
- string type, or
- symbol type.

Otherwise, if one uses another type, such as number, it's autoconverted to string. So that `obj[1]` is the same as `obj["1"]`, and `obj[true]` is the same as `obj["true"]`.

Until now we've been using only strings.

Now let's explore symbols, see what they can do for us.

## Symbols

@@ -12,18 +19,17 @@ A "symbol" represents a unique identifier.
A value of this type can be created using `Symbol()`:

```js
// id is a new symbol
let id = Symbol();
```

Upon creation, we can give symbol a description (also called a symbol name), mostly useful for debugging purposes:
Upon creation, we can give symbols a description (also called a symbol name), mostly useful for debugging purposes:

```js
// id is a symbol with the description "id"
let id = Symbol("id");
```

Symbols are guaranteed to be unique. Even if we create many symbols with the same description, they are different values. The description is just a label that doesn't affect anything.
Symbols are guaranteed to be unique. Even if we create many symbols with exactly the same description, they are different values. The description is just a label that doesn't affect anything.

For instance, here are two symbols with the same description -- they are not equal:

@@ -38,6 +44,8 @@ alert(id1 == id2); // false

If you are familiar with Ruby or another language that also has some sort of "symbols" -- please don't be misguided. JavaScript symbols are different.

So, to summarize, a symbol is a "primitive unique value" with an optional description. Let's see where we can use them.

````warn header="Symbols don't auto-convert to a string"
Most values in JavaScript support implicit conversion to a string. For instance, we can `alert` almost any value, and it will work. Symbols are special. They don't auto-convert.
@@ -53,6 +61,7 @@ alert(id); // TypeError: Cannot convert a Symbol value to a string
That's a "language guard" against messing up, because strings and symbols are fundamentally different and should not accidentally convert one into another.
If we really want to show a symbol, we need to explicitly call `.toString()` on it, like here:
```js run
let id = Symbol("id");
*!*
@@ -61,6 +70,7 @@ alert(id.toString()); // Symbol(id), now it works
```
Or get `symbol.description` property to show the description only:
```js run
let id = Symbol("id");
*!*
@@ -72,6 +82,7 @@ alert(id.description); // id

## "Hidden" properties


Symbols allow us to create "hidden" properties of an object, that no other part of code can accidentally access or overwrite.

For instance, if we're working with `user` objects, that belong to a third-party code. We'd like to add identifiers to them.
@@ -92,9 +103,9 @@ alert( user[id] ); // we can access the data using the symbol as the key

What's the benefit of using `Symbol("id")` over a string `"id"`?

As `user` objects belongs to another code, and that code also works with them, we shouldn't just add any fields to it. That's unsafe. But a symbol cannot be accessed accidentally, the third-party code probably won't even see it, so it's probably all right to do.
As `user` objects belong to another codebase, it's unsafe to add fields to them, since we might affect pre-defined behavior in that other codebase. However, symbols cannot be accessed accidentally. The third-party code won't be aware of newly defined symbols, so it's safe to add symbols to the `user` objects.

Also, imagine that another script wants to have its own identifier inside `user`, for its own purposes. That may be another JavaScript library, so that the scripts are completely unaware of each other.
Also, imagine that another script wants to have its own identifier inside `user`, for its own purposes.

Then that script can create its own `Symbol("id")`, like this:

@@ -158,7 +169,7 @@ for (let key in user) alert(key); // name, age (no symbols)
*/!*

// the direct access by the symbol works
alert( "Direct: " + user[id] );
alert( "Direct: " + user[id] ); // Direct: 123
```

[Object.keys(user)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) also ignores them. That's a part of the general "hiding symbolic properties" principle. If another script or a library loops over our object, it won't unexpectedly access a symbolic property.
@@ -206,12 +217,12 @@ Symbols inside the registry are called *global symbols*. If we want an applicati
```smart header="That sounds like Ruby"
In some programming languages, like Ruby, there's a single symbol per name.
In JavaScript, as we can see, that's right for global symbols.
In JavaScript, as we can see, that's true for global symbols.
```

### Symbol.keyFor

For global symbols, not only `Symbol.for(key)` returns a symbol by name, but there's a reverse call: `Symbol.keyFor(sym)`, that does the reverse: returns a name by a global symbol.
We have seen that for global symbols, `Symbol.for(key)` returns a symbol by name. To do the opposite -- return a name by global symbol -- we can use: `Symbol.keyFor(sym)`:

For instance:

@@ -227,7 +238,7 @@ alert( Symbol.keyFor(sym2) ); // id

The `Symbol.keyFor` internally uses the global symbol registry to look up the key for the symbol. So it doesn't work for non-global symbols. If the symbol is not global, it won't be able to find it and returns `undefined`.

That said, any symbols have `description` property.
That said, all symbols have the `description` property.

For instance:

@@ -268,10 +279,11 @@ Symbols are always different values, even if they have the same name. If we want
Symbols have two main use cases:

1. "Hidden" object properties.

If we want to add a property into an object that "belongs" to another script or a library, we can create a symbol and use it as a property key. A symbolic property does not appear in `for..in`, so it won't be accidentally processed together with other properties. Also it won't be accessed directly, because another script does not have our symbol. So the property will be protected from accidental use or overwrite.

So we can "covertly" hide something into objects that we need, but others should not see, using symbolic properties.

2. There are many system symbols used by JavaScript which are accessible as `Symbol.*`. We can use them to alter some built-in behaviors. For instance, later in the tutorial we'll use `Symbol.iterator` for [iterables](info:iterable), `Symbol.toPrimitive` to setup [object-to-primitive conversion](info:object-toprimitive) and so on.

Technically, symbols are not 100% hidden. There is a built-in method [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) that allows us to get all symbols. Also there is a method named [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys of an object including symbolic ones. So they are not really hidden. But most libraries, built-in functions and syntax constructs don't use these methods.
Technically, symbols are not 100% hidden. There is a built-in method [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) that allows us to get all symbols. Also there is a method named [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys of an object including symbolic ones. But most libraries, built-in functions and syntax constructs don't use these methods.
65 changes: 34 additions & 31 deletions 1-js/04-object-basics/09-object-toprimitive/article.md
Original file line number Diff line number Diff line change
@@ -3,15 +3,15 @@

What happens when objects are added `obj1 + obj2`, subtracted `obj1 - obj2` or printed using `alert(obj)`?

JavaScript doesn't exactly allow to customize how operators work on objects. Unlike some other programming languages, such as Ruby or C++, we can't implement a special object method to handle an addition (or other operators).
JavaScript doesn't allow you to customize how operators work on objects. Unlike some other programming languages, such as Ruby or C++, we can't implement a special object method to handle addition (or other operators).

In case of such operations, objects are auto-converted to primitives, and then the operation is carried out over these primitives and results in a primitive value.

That's an important limitation, as the result of `obj1 + obj2` can't be another object!
That's an important limitation: the result of `obj1 + obj2` (or another math operation) can't be another object!

E.g. we can't make objects representing vectors or matrices (or achievements or whatever), add them and expect a "summed" object as the result. Such architectural feats are automatically "off the board".

So, because we can't do much here, there's no maths with objects in real projects. When it happens, it's usually because of a coding mistake.
So, because we can't technically do much here, there's no maths with objects in real projects. When it happens, with rare exceptions, it's because of a coding mistake.

In this chapter we'll cover how an object converts to primitive and how to customize it.

@@ -24,15 +24,19 @@ We have two purposes:

In the chapter <info:type-conversions> we've seen the rules for numeric, string and boolean conversions of primitives. But we left a gap for objects. Now, as we know about methods and symbols it becomes possible to fill it.

1. All objects are `true` in a boolean context. There are only numeric and string conversions.
1. There's no conversion to boolean. All objects are `true` in a boolean context, as simple as that. There exist only numeric and string conversions.
2. The numeric conversion happens when we subtract objects or apply mathematical functions. For instance, `Date` objects (to be covered in the chapter <info:date>) can be subtracted, and the result of `date1 - date2` is the time difference between two dates.
3. As for the string conversion -- it usually happens when we output an object like `alert(obj)` and in similar contexts.
3. As for the string conversion -- it usually happens when we output an object with `alert(obj)` and in similar contexts.

We can fine-tune string and numeric conversion, using special object methods.
We can implement string and numeric conversion by ourselves, using special object methods.

There are three variants of type conversion, that happen in various situations.
Now let's get into technical details, because it's the only way to cover the topic in-depth.

They're called "hints", as described in the [specification](https://tc39.github.io/ecma262/#sec-toprimitive):
## Hints

How does JavaScript decide which conversion to apply?

There are three variants of type conversion, that happen in various situations. They're called "hints", as described in the [specification](https://tc39.github.io/ecma262/#sec-toprimitive):

`"string"`
: For an object-to-string conversion, when we're doing an operation on an object that expects a string, like `alert`:
@@ -60,10 +64,12 @@ They're called "hints", as described in the [specification](https://tc39.github.
let greater = user1 > user2;
```

Most built-in mathematical functions also include such conversion.

`"default"`
: Occurs in rare cases when the operator is "not sure" what type to expect.

For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them), so both strings and numbers would do. So if a binary plus gets an object as an argument, it uses the `"default"` hint to convert it.
For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them). So if a binary plus gets an object as an argument, it uses the `"default"` hint to convert it.

Also, if an object is compared using `==` with a string, number or a symbol, it's also unclear which conversion should be done, so the `"default"` hint is used.

@@ -77,21 +83,19 @@ They're called "hints", as described in the [specification](https://tc39.github.

The greater and less comparison operators, such as `<` `>`, can work with both strings and numbers too. Still, they use the `"number"` hint, not `"default"`. That's for historical reasons.

In practice though, we don't need to remember these peculiar details, because all built-in objects except for one case (`Date` object, we'll learn it later) implement `"default"` conversion the same way as `"number"`. And we can do the same.
In practice though, things are a bit simpler.

```smart header="No `\"boolean\"` hint"
Please note -- there are only three hints. It's that simple.
All built-in objects except for one case (`Date` object, we'll learn it later) implement `"default"` conversion the same way as `"number"`. And we probably should do the same.

There is no "boolean" hint (all objects are `true` in boolean context) or anything else. And if we treat `"default"` and `"number"` the same, like most built-ins do, then there are only two conversions.
```
Still, it's important to know about all 3 hints, soon we'll see why.

**To do the conversion, JavaScript tries to find and call three object methods:**

1. Call `obj[Symbol.toPrimitive](hint)` - the method with the symbolic key `Symbol.toPrimitive` (system symbol), if such method exists,
2. Otherwise if hint is `"string"`
- try `obj.toString()` and `obj.valueOf()`, whatever exists.
- try calling `obj.toString()` or `obj.valueOf()`, whatever exists.
3. Otherwise if hint is `"number"` or `"default"`
- try `obj.valueOf()` and `obj.toString()`, whatever exists.
- try calling `obj.valueOf()` or `obj.toString()`, whatever exists.

## Symbol.toPrimitive

@@ -126,15 +130,14 @@ alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> 1500
```

As we can see from the code, `user` becomes a self-descriptive string or a money amount depending on the conversion. The single method `user[Symbol.toPrimitive]` handles all conversion cases.

As we can see from the code, `user` becomes a self-descriptive string or a money amount, depending on the conversion. The single method `user[Symbol.toPrimitive]` handles all conversion cases.

## toString/valueOf

If there's no `Symbol.toPrimitive` then JavaScript tries to find methods `toString` and `valueOf`:

- For the "string" hint: `toString`, and if it doesn't exist, then `valueOf` (so `toString` has the priority for string conversions).
- For other hints: `valueOf`, and if it doesn't exist, then `toString` (so `valueOf` has the priority for maths).
- For the `"string"` hint: call `toString` method, and if it doesn't exist or if it returns an object instead of a primitive value, then call `valueOf` (so `toString` has the priority for string conversions).
- For other hints: call `valueOf`, and if it doesn't exist or if it returns an object instead of a primitive value, then call `toString` (so `valueOf` has the priority for maths).

Methods `toString` and `valueOf` come from ancient times. They are not symbols (symbols did not exist that long ago), but rather "regular" string-named methods. They provide an alternative "old-style" way to implement the conversion.

@@ -207,23 +210,23 @@ In the absence of `Symbol.toPrimitive` and `valueOf`, `toString` will handle all

The important thing to know about all primitive-conversion methods is that they do not necessarily return the "hinted" primitive.

There is no control whether `toString` returns exactly a string, or whether `Symbol.toPrimitive` method returns a number for a hint `"number"`.
There is no control whether `toString` returns exactly a string, or whether `Symbol.toPrimitive` method returns a number for the hint `"number"`.

The only mandatory thing: these methods must return a primitive, not an object.

```smart header="Historical notes"
For historical reasons, if `toString` or `valueOf` returns an object, there's no error, but such value is ignored (like if the method didn't exist). That's because in ancient times there was no good "error" concept in JavaScript.
In contrast, `Symbol.toPrimitive` *must* return a primitive, otherwise there will be an error.
In contrast, `Symbol.toPrimitive` is stricter, it *must* return a primitive, otherwise there will be an error.
```

## Further conversions

As we know already, many operators and functions perform type conversions, e.g. multiplication `*` converts operands to numbers.

If we pass an object as an argument, then there are two stages:
If we pass an object as an argument, then there are two stages of calculations:
1. The object is converted to a primitive (using the rules described above).
2. If the resulting primitive isn't of the right type, it's converted.
2. If necessary for further calculations, the resulting primitive is also converted.

For instance:

@@ -250,7 +253,7 @@ let obj = {
}
};

alert(obj + 2); // 22 ("2" + 2), conversion to primitive returned a string => concatenation
alert(obj + 2); // "22" ("2" + 2), conversion to primitive returned a string => concatenation
```

## Summary
@@ -260,18 +263,18 @@ The object-to-primitive conversion is called automatically by many built-in func
There are 3 types (hints) of it:
- `"string"` (for `alert` and other operations that need a string)
- `"number"` (for maths)
- `"default"` (few operators)
- `"default"` (few operators, usually objects implement it the same way as `"number"`)

The specification describes explicitly which operator uses which hint. There are very few operators that "don't know what to expect" and use the `"default"` hint. Usually for built-in objects `"default"` hint is handled the same way as `"number"`, so in practice the last two are often merged together.
The specification describes explicitly which operator uses which hint.

The conversion algorithm is:

1. Call `obj[Symbol.toPrimitive](hint)` if the method exists,
2. Otherwise if hint is `"string"`
- try `obj.toString()` and `obj.valueOf()`, whatever exists.
- try calling `obj.toString()` or `obj.valueOf()`, whatever exists.
3. Otherwise if hint is `"number"` or `"default"`
- try `obj.valueOf()` and `obj.toString()`, whatever exists.
- try calling `obj.valueOf()` or `obj.toString()`, whatever exists.

In practice, it's often enough to implement only `obj.toString()` as a "catch-all" method for string conversions that should return a "human-readable" representation of an object, for logging or debugging purposes.
All these methods must return a primitive to work (if defined).

As for math operations, JavaScript doesn't provide a way to "override" them using methods, so real life projects rarely use them on objects.
In practice, it's often enough to implement only `obj.toString()` as a "catch-all" method for string conversions that should return a "human-readable" representation of an object, for logging or debugging purposes.
Original file line number Diff line number Diff line change
@@ -15,4 +15,4 @@ str.test = 5;
alert(str.test);
```

How do you think, will it work? What will be shown?
What do you think, will it work? What will be shown?
5 changes: 3 additions & 2 deletions 1-js/05-data-types/01-primitives-methods/article.md
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ Objects are "heavier" than primitives. They require additional resources to supp

Here's the paradox faced by the creator of JavaScript:

- There are many things one would want to do with a primitive like a string or a number. It would be great to access them using methods.
- There are many things one would want to do with a primitive, like a string or a number. It would be great to access them using methods.
- Primitives must be as fast and lightweight as possible.

The solution looks a little bit awkward, but here it is:
@@ -104,9 +104,10 @@ if (zero) { // zero is true, because it's an object
}
```

On the other hand, using the same functions `String/Number/Boolean` without `new` is a totally sane and useful thing. They convert a value to the corresponding type: to a string, a number, or a boolean (primitive).
On the other hand, using the same functions `String/Number/Boolean` without `new` is totally fine and useful thing. They convert a value to the corresponding type: to a string, a number, or a boolean (primitive).

For example, this is entirely valid:

```js
let num = Number("123"); // convert a string to number
```
Original file line number Diff line number Diff line change
@@ -28,6 +28,6 @@ Note that `63.5` has no precision loss at all. That's because the decimal part `


```js run
alert( Math.round(6.35 * 10) / 10); // 6.35 -> 63.5 -> 64(rounded) -> 6.4
alert( Math.round(6.35 * 10) / 10 ); // 6.35 -> 63.5 -> 64(rounded) -> 6.4
```

Loading