JavaScrpt From Beginner To Advanced

ក្របស ៀវសៅ
I
JavaScrpt from beginner to advanced
IV
អារម្ភកថា
ការ រស ររូដបស្កើតជារម្មវិធីសដើម្្បីបំសេញតក្ម្ូវការជារ់ស្ ែ្រប ់ម្នុ ្ស រំេុ្ស្តសដើរតួយ្្

ំខាន់ម្ួយនាយុគ ម្័យបសចេរវិទ្្ាសនេះ។ រម្មវិធីក្គប់ក្គ្ស្លើយតបេ័ត៌មានស ើរុំេ្យូទ្័រ ទ្ូរ េទដដ
ដូចជាការរត់ក្ាទ្ំនិញសចញចូ ក្តួតេិនិត្យេ័ត៌មានរនុ្ហា្ ក្គប់ក្គ្ ណ្ឋ្គារ េ័ត៌មានបុគគ ិរ
សគហទ្ំេ័រ រ់ទ្ំនិញសៅស ើក្បេ័នធអនឡាញ ។ ។ ុទ្ធ ឹ្ស្តក្តូវបានច្ក្រ្សរៀបចំ និ្បស្កើតស ើ្
េីការ រស ររូដ។ សដើម្្បីស្លើយតបាម្តក្ម្ូវការសនេះ មជ្ឈមណ្ឌលម្ស្ទ័រអាយធី សយើ្ខ្ុំបានច្ក្រ្
ស ៀវសៅ JavaScrpt from beginner to advanced សនេះស ើ្សដើម្្បីឲ្យអនរ ិរ្ាទំ្ឡាយបាន
ស្ ែ្យ ់េីម្ូ ដ្ឋ្នក្គឹេះរនុ្ការ រស ររូដ ស្ដ ជាស្ព្នឈានសៅបស្កើតរម្មវិធីស្្ស្ៗសៅាម្គំនិត
ក្បឌិតដចន និ្ាម្តក្ម្ូវការផ្ទ្ ់ខលួនបាន។
ចំស េះសគា បំណ្ដនស ៀវសៅ JavaScrpt from beginner to advanced សនេះគឺច្់ឲ្យ
អនរ ិរ្ាទំ្ឡាយបានយ ់ច្ា ់េម្
ី ូ ដ្ឋ្នក្គឹេះដំបូ្ប្អ ់រហូតសៅដ ់រក្ម្ិតខព ់សៅរនុ្ភាស្
JavaScript។ ស្ដ សនេះគឺជាការចាប់ស្តើម្ដំបូ្រនុ្វិ ័យ Web development និ្ Mobile
development។ វគគ ិរា
្ សនេះក្តូវបានស្ចរសចញជាបីស្្នរធំៗ ស្ដ ស្្នរដំបូ្ ិរ្ាអំេីម្ូ ដ្ឋ្នក្គឹេះ
ស្្នរទ្ីេីរ ិរ្ាអំេីរក្ម្ិតម្ធ្យម្ និ្ចុ្សក្កាយជាស្្នរស្ដ ំខាន់ជា្សគ េីសក្ េះស្្នរសនេះ(រក្ម្ិត
ខព ់) ក្តូវបានយរសៅសក្បើក្បា ់សក្ចើនសៅស ើ Frameworks រប ់ភាស្ JavaScript។
ជាចុ្សក្កាយសយើ្ខ្ុំ ្្ឃឹម្ថា ប្បអូន ិ ្ានុ ិ ្សទំ្អ ់គាន្ នឹ្ខិតខំក្បឹ្ស្ក្ប្ ិរ្ា
សម្សរៀនរនុ្ស ៀវសៅសនេះសដ្យយរចិតតទ្ុរដ្រ់ និ្ចូ រួម្អនុវតតន៍ ំហាត់ឲ្យបានសក្ចើនសទ្ើបការ ិរ្ា
អាចទ្ទ្ួ បានសជាគជ័យ។ សយើ្ខ្ុំ ូម្អភ័យសទ ្្ស្ដរ រា ់ចំស េះរំហុ ្គ្ស្្ស្ៗស្ដ សរើត
មានសដ្យអសចតនារនុ្ស ៀវសៅសនេះ។ ស្ូមអរគុណ្!!
សរៀបសរៀ្សដ្យ
ផេង ពុទ្ធ្រិទ្ធ
សបាេះេុម្ពស ើរទ្ី១ឆន្ំ២០២២
©ររ្ា ិទ្ធិក្គប់យ្្សដ្យ សាលាម៉ាស្ទរ័ អាយ
V
VI
មតិកា
មេម ៀនទី១ មេចក្តណី ែន ាំ Introduction ............................................................................ 4
១. សតើ JavaScript គឺជាអែី? .......................................................................................... 4
២. សហតុអែីបានជាក្តូវសរៀន JavaScript? ......................................................................... 4
៣. ការចុេះសឈា្្េះនិ្រសបៀបសក្បើក្បា ់ replit.com .............................................................. 4
មេម ៀនទី២ ........................................................................ េូ លដ្ឋានគ្រឹះមៅក្នុងភាសា JavaScript

7
១. Hello, World! ..................................................................................................... 7
១.១ ការសក្បើក្បា ់ document.write ........................................................................ 7
១.២ ការសក្បើក្បា ់ console.log ................................................................................ 7
១.៣ ការសក្បើក្បា ់ alert ......................................................................................... 8
១.៤ ការសក្បើក្បា ់ prompt...................................................................................... 8
១.៥ Limitation សៅរនុ្ script tag ........................................................................ 9
២. អញ្ញតតិ Variable ................................................................................................... 9
២.១ អញ្ញតតិ let ...................................................................................................... 9
២.២ អញ្ញតតិ var ................................................................................................... 10
២.៣ អញ្ញតតិ const ................................................................................................ 10
២.៤ ការដ្រ់សឈា្្េះអញ្ញតតិ (Variable) ..................................................................... 10
៣. ក្បសភទ្ទ្ិននន័យ Data types .................................................................................. 11
៣.១ Number .................................................................................................... 11
៣.២ BigInt ....................................................................................................... 11
៣.៣ String ....................................................................................................... 11
៣.៤ Boolean ..................................................................................................... 12
៣.៥ The “null” value........................................................................................ 12
៣.៦ The “undefined” value .............................................................................. 12
៣.៧ Objects ..................................................................................................... 12
៣.៨ Symbols.............................................................................................. 13
VII
៣.៩ The “typeof” Operator ............................................................................... 13
៤. ការផ្ល្ ់បតូរក្បសភទ្ទ្ិននន័យ Type Conversion.......................................................... 14
៤.១ String Conversion ..................................................................................... 14
៤.២ Numeric Conversion ................................................................................. 14
៤.៣ Boolean Conversion .................................................................................. 16
៥. Basic operators, maths .................................................................................... 16
៥.១ Maths operations ...................................................................................... 17
៥.២ String Concatenation with binary + ......................................................... 17
៥.៣ Numeric conversion, unary + ................................................................... 18
៥.៤ Operator precedence ................................................................................. 18
៦. ការសក្បៀបសធៀប Comparisons ............................................................................... 19
៦.១ ការសក្បៀបសធៀប String ................................................................................... 19
៦.២ ការសក្បៀបសធៀបរវា្ក្បសភទ្ទ្ិននន័យខុ គាន្ .......................................................... 19
៦.៣ Strict equality........................................................................................... 20
៦.៤ ទ្ធ្ ចំស្ រសៅសេ សក្បៀបសធៀប null vs 0 ................................................... 21
៧. Conditional branching: if, '?' ........................................................................... 21
៧.១ The “if” statement .................................................................................... 21
៧.២ Boolean conversion ................................................................................... 22
៧.៣ The “else” clause ...................................................................................... 22
៧.៤ Several conditions: “else if” ...................................................................... 23
៧.៤ Conditional operator “? : “ ........................................................................ 23
៨. Logical operators ............................................................................................. 24
៨.១ Logical operator (OR) ||........................................................................... 24
៨.២ Logical operator (AND) && ...................................................................... 25
៨.៣ Logical operator (NOT) ! ........................................................................... 25
៩. Nullish coalescing operator “??” ...................................................................... 25
១០. Loops: while, do…while និ្ for loop .............................................................. 27

VIII
១០.១ The “while” loop ..................................................................................... 27
១០.២ The “do…while” loop .............................................................................. 28
១០.៣ The “for” loop ......................................................................................... 30
១០.៤ Breaking the loop ................................................................................... 31
១០.៥ Continue to the next iteration................................................................ 31
១១. The “switch” statement................................................................................. 32
១២. Functions ...................................................................................................... 34
១២.១ ការក្បកា Function (Function Declaration) ........................................... 35
១២.២ Local variables....................................................................................... 35
១២.៣ Outer variables...................................................................................... 36
១២.៣ Parameters ............................................................................................ 36
១២.៤ Default values ........................................................................................ 37
១២.៥ Alternative default parameters ............................................................. 38
១២.៦ Returning a value .................................................................................. 38
១២.៦ ការដ្រ់សឈា្្េះឱ្យ function (naming a function) ......................................... 39
១២.៧ Function = = Comments ........................................................................ 39
១៣. Function expressions .................................................................................... 39
១៤. Arrow functions, the basics .......................................................................... 42
១៤.១ Multiline arrow functions ...................................................................... 43
មេម ៀនទី៣ ................................................................................ ្ុ ែភាព បេ់ក្ូ ដ Code quality

44
១. Coding style ..................................................................................................... 44
១.១ Curly braces.............................................................................................. 44
១.២ ក្បស្វ្រូដរនុ្ម្ួយជួរសដរ ................................................................................. 45
១.៣ ការចូ បនាទ្ត់ ( Indents ) ............................................................................. 45
១.៤ Semicolons ; .............................................................................................. 46
១.៥ Nesting levels ........................................................................................... 46
IX
២. ការសក្បើក្បា ់ comments ...................................................................................... 47
២.១ Bad comments .......................................................................................... 47
២.២ Good comments ........................................................................................ 47
មេម ៀនទី៤ Objects ......................................................................................................... 48
១. Objects ............................................................................................................. 48
១.១ Literals and properties ............................................................................. 48
១.២ Square brackets ........................................................................................ 49
១.៣ Computed properties ................................................................................ 50
១.៤ Property value shorthand ......................................................................... 51
១.៥ Property name limitation ......................................................................... 51
១.៦ “ in ” operator ............................................................................................ 61
១.៧ The “for…in” loop ..................................................................................... 52
១.៨ Ordered like an object ............................................................................... 52
២. Object references and copying ......................................................................... 55
២.១ Comparison by reference ......................................................................... 57
២.២ Cloning, Object.assgin .............................................................................. 57
២.៣ Nested cloning ............................................... Error! Bookmark not defined.
៣. Garbage collection ................................................ Error! Bookmark not defined.
៣.១ Reachability................................................... Error! Bookmark not defined.
៣.២ Two references .............................................. Error! Bookmark not defined.
៣.៣ Interlinked objects ........................................ Error! Bookmark not defined.
៣.៤ Unreachable island ....................................... Error! Bookmark not defined.
៣.៥ Internal algorithms ....................................... Error! Bookmark not defined.
៤. Object methods, “this” ..................................................................................... 59
៤.១ Method shorthand..................................................................................... 60
៤.២ “this” in methods ...................................................................................... 60
៤.៣ “this” is not bound .................................................................................... 61

X
៤.៤ Arrow functions អត់មាន “this” ................................................................... 63
៥. Constructor, operator “new” ............................................................................ 64
៥.១ Constructor function ................................................................................. 64
៥.២ Return from constructors ......................................................................... 66
៥.៣ Methods in constructors ........................................................................... 67
៦. Optional chaining “?.” ...................................................................................... 68
៦.១ The “non-existing property” problem ........................................................ 68
៦.២ Optional chaining ..................................................................................... 68
៦.៣ Other variants: ?.(), ?.[] ................................. Error! Bookmark not defined.
៧. Symbol type .................................................................................................... 70
៧.១ Symbols .................................................................................................... 70
៧.២ Hidden properties ......................................... Error! Bookmark not defined.
៧.៣ Symbols in an object literal ..................................................................... 70
៧.៤ Symbols are skipped by for...in ................................................................ 71
៧.៥ Global Symbols ......................................................................................... 71
៧.៦ Symbol.keyFor ......................................................................................... 72
មេម ៀនទី៥ គបមេទទិននន័យ Data types ........................................................................... 82
១. Methods of primitives...................................................................................... 82
១.១ A primitive as an object ............................................................................ 82
២. Numbers ......................................................................................................... 83
២.១ សក្ចើនរសបៀបរនុ្ការ រស រ number ................................................................. 83
២.២ toString(base) ........................................................................................... 84
២.៣ Rounding .................................................................................................. 84
២.៤ Imprecise calculations .............................................................................. 86
២.៥ Tests: isFinite និ្ isNaN .......................................................................... 86
២.៦ parseInt និ្ parseFloat ............................................................................ 87
២.៧ Other math functions ............................................................................... 88
XI
៣. Strings............................................................................................................. 90
៣.១ Quotes ...................................................................................................... 90
៣.២ Special characters .................................................................................... 90
៣.៣ String length ............................................................................................ 91
៣.៤ Accessing characters ................................................................................ 92
៣.៥ Strings are immutable.............................................................................. 92
៣.៦ Changing the case .................................................................................... 93
៣.៧ Searching for a substring ......................................................................... 93
៣.៨ Getting a substring .................................................................................. 94
៣.៩ Comparing strings .................................................................................... 95
៤. Arrays .............................................................................................................. 98
៤.១ ការក្បកា Declaration ............................................................................... 98
៤.២ Methods pop, push, shift, unshift ............................................................. 99
៤.៣ Performance ........................................................................................... 101
៤.៤ Loops: for…in / for…of ............................................................................ 102
៤.៥ new Array() ............................................................................................. 102
៤.៦ Multidimensional arrays ........................................................................ 103
៤.៧ toString .................................................................................................. 103
៥. Array methods ............................................................................................... 105
៥.១ Add និ្ Remove ធាតុ (element) ............................................................... 105
៥.២ Searching in array .................................................................................. 108
៥.៣ Transform an array ................................................................................ 110
៥.៤ Array.isArray .......................................................................................... 115
៦. Destructuring Assignment ............................................................................ 118
៦.១ Array destructuring ................................................................................ 118
៦.២ Object destructuring ............................................................................... 120
៦.៣ Nested destructuring ..................................... Error! Bookmark not defined.

XII
៦.៤ Smart function parameters .................................................................... 122
៧. Date និ្ time................................................................................................. 124
៧.១ ការបស្កើត Creation.................................................................................... 124
៧.២ Access date components ......................................................................... 125
៧.៣ Setting date components........................................................................ 125
៧.៤ Autocorrection ............................................... Error! Bookmark not defined.
៧.៥ បស្ម្ល្ Date សៅជាស ខ .............................................................................. 127
៧.៦ Date.now() ............................................................................................ 127
៧.៧ Date.parse from a string ............................... Error! Bookmark not defined.
៨.JSON methods, toJSON ................................................................................. 128
៨.១ JSON.stringify ........................................................................................ 129
៨.២ Excluding and transforming ៖ replacer ......... Error! Bookmark not defined.
៨.៣ JSON.parse ............................................................................................ 131
មេម ៀនទី៦ Advanced working with functions ............................................................ 136
១. Recursion and stack ...................................................................................... 136
១.១ Two ways thinking ................................................................................. 136
១.២ The execution context and stack ................... Error! Bookmark not defined.
១.៣ Recursive traversals ............................................................................... 138
១.៤ Linked list...................................................... Error! Bookmark not defined.
២. Rest parameters និ្ spread syntax ............................................................... 140
៣. Variable scope និ្ Closure ............................................................................ 144
៣.១ Block code ............................................................................................... 144
៣.២ Nested functions .................................................................................... 145
៣.៣ Lexical Environment .................................... Error! Bookmark not defined.
៣.៤ Garbage collection ......................................... Error! Bookmark not defined.
៤. The old “var” .................................................................................................. 146
៤.១ “var” has no block scope .......................................................................... 146
XIII
៤.២ “var” អាចក្បកា ម្ត្សហើយម្ត្សទ្ៀតសដ្យសក្បើសឈា្្េះដស្ដ ............................... 148
៤.៣ “var” អញ្ញតតិអាចសៅសក្បើម្ុននឹ្ក្បកា .......................................................... 148
៤.៤ IIFE ( Immediately-invoked function expressions ) ..... Error! Bookmark not

defined.
៥. Global object .................................................................................................. 150
៦. The “new Function” syntax .................................. Error! Bookmark not defined.
៧. Scheduling៖ setTimeout និ្ setInterval ....................................................... 152
៧.១ setTimeout.............................................................................................. 152
៧.២ Canceling with clearTimeout ................................................................. 153
៧.៣ setInterval.............................................................................................. 153
៧.៤ Zero delay setTimeout ............................................................................ 154
៨. call(), apply(), និ្ bind() ................................................................................. 156
៨.១ bind() ....................................................................................................... 157
៨.២ call() និ្ apply() ...................................................................................... 159
៩. Arrow functions revisited .............................................................................. 163
៩.១ Arrow functions have no “this” ............................................................... 163
៩.២ Arrow functions have no “arguments” .................................................... 165
មេម ៀនទី៧ ..........................................................................................................................Classes

182
១. Class basic syntax ......................................................................................... 182
១.១ Class syntax ............................................................................................ 182
១.២ Not just a syntactic sugar ....................................................................... 183
១.៣ Class expression ............................................ Error! Bookmark not defined.
១.៤ Getters និ្ Setters .................................................................................. 184
១.៥ Computed names .................................................................................... 184
១.៦ Class fields ..................................................... Error! Bookmark not defined.
១.៧ Making bound methods with class fields................................................ 185
XIV
២. Class inheritance .......................................................................................... 187
២.១ “extends” keyword .................................................................................. 187
២.២ Overriding a method .............................................................................. 189
២.៣ Overriding constructor ........................................................................... 191
២.៤ Overriding class fields៖ a tricky note ............ Error! Bookmark not defined.
៣. Static properties និ្ methods ....................................................................... 193
៣.១ Static properties ..................................................................................... 194
៣.២ Inheritance of static properties និ្ methods.......................................... 194
៤. Private, protected properties និ្ methods..................................................... 197
៤.១ Internal និ្ external interface ....................... Error! Bookmark not defined.
៤.២ Protecting ............................................................................................... 197
៤.៣ Read-only ............................................................................................... 198
៤.៤ Private .................................................................................................... 199
៥. Extending built-in classes .................................... Error! Bookmark not defined.
៦. Class checking៖ “instanceof” ......................................................................... 200
៦.១ instanceof................................................................................................ 200
៦.២ Object.prototype.toString for the type .................................................... 201
មេម ៀនទី៨Promises, async/await ............................................................................... 207
១. Error handling, "try...catch" .......................................................................... 207
១.១ try…catch syntax.................................................................................... 207
១.២ Error object............................................................................................. 209
១.៣ “Throw” operator .................................................................................... 210
១.៤ try…catch…finally.................................................................................. 211
២. Introduction to callbacks............................................................................... 213
២.១ Handling errors ............................................. Error! Bookmark not defined.
២.២ Callback រនុ្ callback .............................................................................. 214
២.៣ Pyramid of Doom ................................................................................... 214
XV
៣. Promise ......................................................................................................... 216
៣.១ Consumers៖ then, catch និ្ finally ........................................................ 219
៣.២ Example loadScript ....................................... Error! Bookmark not defined.
៣.៣ ការសក្បៀបសធៀបរវា្ promises និ្ callbacks ................................................. 221

Promises......................................................................................................... 221
៤. Promise Chaining .......................................................................................... 222
៤.១ Returning promises ................................................................................ 225
៤.២ Example៖ loadScript ..................................... Error! Bookmark not defined.
៤.៣ Bigger example៖ fetch ............................................................................ 226
៥. Error handling with promises ....................................................................... 228
៥.១ Implicit try…catch .................................................................................. 228
៥.២ Rethrowing ............................................................................................. 230
៥.៣ Unhandled rejections ............................................................................. 231
៦. Promise API .................................................................................................. 233
៦.១ Promise.all .............................................................................................. 233
៦.២ Promise.allSettled .................................................................................. 234
៦.៣ Promise.race ........................................................................................... 235
៦.៤ Promise.any ............................................................................................ 235
៦.៥ Promise.resolve/reject ............................................................................. 236
៧. Microtasks..................................................................................................... 238
៧.១ Microtasks queue ................................................................................... 238
៧.២ Unhandled rejection ............................................................................... 239
៨. Async / await ................................................................................................. 241
៨.១ Async functions ....................................................................................... 241
៨.២ Await ...................................................................................................... 241
៨.៣ Error handling........................................................................................ 243
មេម ៀនទី៩ Modules ..................................................................................................... 249
XVI
១. ការស្ណនាំ្អំេី Modules ..................................................................................... 249
១.១ What is a module? .................................................................................. 249
១.២ Core module features ............................................................................. 250
១.៣ Browser-specific features ....................................................................... 254
២. Export និ្ Import.......................................................................................... 255
២.១ Export before declarations ..................................................................... 255
២.២ Export apart from declarations .............................................................. 256
២.៣ Import * ................................................................................................. 256
២.៤ Import “as” ............................................................................................. 256
២.៥ Export “as” ............................................................................................. 256
២.៦ Export default ........................................................................................ 257
៣. Dynamic imports .......................................................................................... 258
៣.១ The import() expression ......................................................................... 259
Shortcut Key .............................................................................................................. 262
XVII
សម្សរៀនទ្ី១ ស ចរតីស្ណនាំ្ Introduction JavaScript
ជំពូកទី១ ម្ូលដ្ឋានគ្រឹះ Beginner
មម្មរៀនទី១ មស្ចកតីណែន ំ Introduction
១. មតើ JavaScript ្ឺជាអ្វី?

JavaScript គឺជា scripting ឬ text-based programming language ស្ដ អាចសក្បើបាន
ទំ្្សៅស ើ client side និ្ server side សហើយវាអនុញ្ញ្តឱ្យសយើ្បស្កើត interactive web
pages។ HTML និ្ CSS គឺជាភាស្ស្ដ ្ត ់នូវរចនា ម្ព័នធនិ្ style ក្មាប់ web pages
បុសណ្្្េះ, ចំស្នរឯ JavaScript វិញអាចសធែើឱ្យ web pages មាន រម្មភាេស្ដ អាច្ល្ស្លើយ
ជាម្ួយអនរសក្បើក្បា ់។ ឧទហរណ៍ស្ម្ញ្ញៗដូចជា search box សៅស ើ website Amazon,
refreshing Twitter feed ឬ Facebook feed និ្ embedded video សៅស ើ website េ័ត៌មាន
New York Times ជាសដើម្។ រុបម្រវិញគឺ JavaScript បស្នែម្ រម្មភាេសៅឱ្យ web pages។
២. មេតុអ្វីបានជាគតូវមរៀន JavaScript?
សក្ៅេី ទ្ធភាេគា្្នស្ដនរំណត់រប ់ភាស្ JavaScript, មានសហតុ្ ជាសក្ចើនសទ្ៀតស្ដ
web developers សក្បើក្បា ់ភាស្ JavaScript៖
• JavaScript គឺ programming language ស្តម្ួយគត់ស្ដ ជាភាស្ native ក្មាប់
web browser
• JavaScript គឺជាភាស្សេញនិយម្ និ្ ំបូរអនរសក្បើក្បា ់សក្ចើន (rich community)
• JavaScript ជាភាស្ម្ួយស្ដ ងាយក្ ួ សរៀន ក្មាប់អនរចាប់ស្តើម្ដំបូ្ៗ
• JavaScript សក្បើបានទំ្្ Client side និ្ Server side
៣. ការចុឹះម្មឹះនិងរមបៀបមគបើគបាស្់ replit.com
1. ចូ សៅកាន់តំណភាជ្ប់ https://replit.com/
2. បស្កើត account សដ្យចុចបូតុ្ Signup ស្ដ សៅខា្ស ើស្្ំដដ
សរៀបសរៀ្សដ្យ៖ មា្ ទ័រអាយធី រម្ពុជា 4

JavaScript សម្សរៀនទ្ី១ ស ចរតីស្ណនាំ្ Introduction
3. សៅសេ បស្កើត account និ្ login រួចម្រសយើ្ចុចស ើ ញ្ញ្សក្ទ្បី និ្ចុចស ើបូតុ្

create Repl
5 សរៀបសរៀ្សដ្យ៖ មា្ ទ័រអាយធី រម្ពុជា

សម្សរៀនទ្ី១ ស ចរតីស្ណនាំ្ Introduction JavaScript
4. បនាទ្ប់ម្រសក្ជើ សរើ យរភាស្ HTML, CSS, និ្ JS បនាទ្ប់ម្រចុចស ើបូតុ្ create

Repl ម្ត្សទ្ៀត
5. ចុ្សក្កាយសយើ្នឹ្ទ្ទ្ួ បានដូចរូបខា្សក្កាម្

JavaScript សម្សរៀនទ្ី២ ម្ូ ដ្ឋ្នក្គឹេះសៅរនុ្ភាស្ JavaScript
មម្មរៀនទី២ ម្ូលដ្ឋានគ្រឹះមៅកនងភាសា
ុ JavaScript
១. Hello, World!
១.១ ការមគបើគបាស្់ document.write
ការសក្បើក្បា ់ document.write គឺសដើម្្បីបងាហ្ញ content សៅស ើ browser។
១.២ ការមគបើគបាស្់ console.log

ក្ប ិនសបើសយើ្ច្់បងាហ្ញ content សៅស ើផ្ទ្ំ្ console សយើ្ក្តូវសក្បើ console.log

សម្សរៀនទ្ី២ ម្ូ ដ្ឋ្នក្គឹេះសៅរនុ្ភាស្ JavaScript JavaScript
១.៣ ការមគបើគបាស្់ alert

Alert ខុ េីសគគឺសៅសេ ស្ដ សយើ្សក្បើ alert វានឹ្ popup content បនាទ្ប់ម្រសយើ្ក្តូវចុច
បូតុ្ ok ឬ Esc key សដើម្្បីបិទ្វិញ។
១.៤ ការមគបើគបាស្់ prompt

prompt function មានេីរ parameters។
let result = prompt(title, [default]);
* square brackets ([ ]) សៅ ្ខា្ default តំណ្្ឱ្យមានរ៏បានអត់រ៏បាន
(optional)។
ឧទហរណ៍៖
ក្ប ិនសបើសយើ្ចុចបូតុ្ Cancel ឬចុច keyboard “Esc”, prompt នឹ្សធែើការ return null។
ក្ប ិនបញ្េូ តដម្លសហើយចុចបូតុ្ Ok ឬចុច keyboard “Enter” សនាេះ prompt នឹ្សធែើការ return
តដម្លស្ដ សយើ្បានបញ្េូ ។

ចំណ្ំ៖ ការសក្បើក្បា ់ alert, prompt document.write, និ្ console.log ក្តូវ រស រ

សៅរនុ្ script tag។
១.៥ Limitation មៅកនង
ុ script tag
ក្ប ិនសបើសៅរនុ្ script tag មាន src attribute សនាេះ content ( alert(“Hello, World!”)
) ស្ដ សៅរនុ្ tag សនាេះនឹ្ម្ិនក្តូវបានដំសណើរការសទ្( ignored ) ។
ដំសណ្េះក្ស្យគឺក្តូវសក្បើ script tag េីរ
២. អ្ញ្ញ តតិ Variable

អញ្ញតតិគឺជា “named storage” ំរាប់ទ្ិននន័យ សហើយសយើ្សក្បើក្បា ់អញ្ញតតិសដើម្្បី្ទុរទ្ិននន័យ។
២.១ អ្ញ្ញ តតិ let

ក្បកា អញ្ញតតិសហើយ្ត ត
់ ដម្លឱ្យសៅសេ សក្កាយ (Declare variable and assign later) ៖
let number;
number = 10;
console.log(number);
ក្បកា អញ្ញតតិសហើយ្ត ត
់ ដម្លភាល្ម្ៗ (Declare variable and assign into a single line) ៖

let number = 10;

console.log(number);
ក្បកា អញ្ញតតិសក្ចើនសៅស ើជួរស្តម្ួយ (Declare multiple variables in one line) ៖
let message = "hello", age = 20, user = "Rotana";
សយើ្អាចបតូរតដម្លរប ់អញ្ញតតិ
let message = "hello";
message = "Hi how are you?";
២.២ អ្ញ្ញ តតិ var

ការសក្បើក្បា ់អញ្ញតតិ var ដូចសៅនឹ្ let ស្ដរ។ បុស្នតវាជាការសក្បើក្បា ់កា េីម្ន
ិ ទន់មាន let និ្
const។ ស ើ េីសនេះវាមានចំនុចសខ្ាយរប ់វា ស្ដ ក្តូវបានសគស្ ្ ូវសក្បើក្បា ់ម្រដ ់ឥ ូវ។
ក្ត្់បញ្ហ្សនេះសយើ្នឹ្ស ើរយរម្រនិយយម្ត្សទ្ៀតសៅសម្សរៀន The old “var” ។
var animal = "dog";
console.log(animal);
២.៣ អ្ញ្ញ តតិ const

ការសក្បើក្បា ់អញ្ញតតិ const រ៏ម្ិនខុ េី let សទ្, ចំនុចម្ួយស្ដ ខុ គាន្គឺសយើ្អាចផ្ល្ ់បតូរតដម្ល
រប ់ let ស្តសយើ្ម្ិនអាចផ្ល្ ់បតូរតដម្លរប ់ const បានសទ្ ក្ប ិនសបើសយើ្ផ្ល្ ់បតូរវានឹ្បស្កើតជា
Error ដូចរូបខា្សក្កាម្៖
២.៤ ការដ្ឋក់ម្មឹះអ្ញ្ញ តតិ (Variable)

ស្ដនរំណត់ដនការដ្រ់សឈា្្េះឱ្យអញ្ញតតិ។
1. សឈា្្េះក្តូវស្តជាស ខឬរ៏អរ្សរ ឬរ៏និម្ិតត ញ្ញ្ $ និ្ underscore ( _ )
2. អរ្សរដំបូ្រប ់សឈា្្េះម្ិនអាចជាស ខ
3. ម្ិនក្តូវសក្បើក្បា ់ Reserved name ( let, const, return, function ។ ។)
ការដ្រ់សឈា្្េះក្តឹម្ក្តូវ៖
let $ = 100;
let _ = "anything";
const fruit = "banana";
ការដ្រ់សឈា្្េះម្ិនក្តឹម្ក្តូវ៖

let 10 = "ten";
let function = 100;
សៅសេ សឈា្្េះមានេីេីរ រ្យស ើ្សៅសយើ្គប្បីសក្បើក្បា ់ (camelCase) ៖

camelCase មានន័យថាអរ្សរដំបូ្ដន រ្យបនាទ្ប់េី រ្យទ្ីម្ួយក្តូវស្តជាអរ្សរធំ។
let myName = "Thearith";
let myThankToYou = "Big thanks!";
៣. គបមេទទិននន័យ Data types

តដម្លរប ់អញ្ញតតិសៅរនុ្ JavaScript គឺស្ត្ស្តមានក្បសភទ្រប ់វាដូចជា Boolean, String ឬរ៏
Number។
សៅរនុ្ភាស្ JavaScript មាន៨ក្បសភទ្ទ្ិននន័យ។ បុស្នតសៅរនុ្សម្សរៀនសនេះសយើ្នឹ្និយយ
ក្តួ ៗអំេីក្បសភទ្ទ្ិននន័យទំ្្អ ់សនេះ ិនសៅរនុ្ជំេូរទ្ី២េួរសយើ្នឹ្ ំអិតក្បសភទ្នីម្ួយៗឱ្យបាន
ច្ា ់។ ក្បសភទ្ទ្ិននន័យរប ់អញ្ញតតិអាក្ ័យស ើតដម្លរប ់វា៖
let username = "Makara";
username = 12345;
ម្ុនដំបូ្អញ្ញតតិ username មានទ្ិននន័យជាក្បសភទ្ String សហើយបានបតូរសៅជា Number

បនាទ្ប់េីជួរ ( line ) username = 12345; ក្តូវបាន execute។
៣.១ Number
ក្បសភទ្ទ្ិននន័យ Number តំណ្្ឱ្យទំ្្ integer និ្ floating point ។
let num = 123;
num = 12.345;
alert( num );
៣.២ BigInt
សៅរនុ្ភាស្ JavaScript, ក្បសភទ្ទ្ិននន័យជា Number ម្ិនអាចស ើ េី (253-1) ស្ដ ស មើ
ហនឹ្ 9007199152420991 ឬរ៍តិចជា្ -(253-1) ក្មាប់ស្្នរអវិជជមាន។ ទំ្្អ ់សនេះ
គឺជាការរំណត់រប ់ភាស្ JavaScript ។ ក្ប ិនជាសយើ្ច្់សក្បើក្បា ់ចំនួនស្ដ ស ើ េីសនេះ
សយើ្សក្បើក្បា ់ BigInt។
const bigInt = 1234567890123456789012345678901234567890n;
អរ្សរ “n” សៅខា្ចុ្ស ខតំណ្្ឱ្យ BigInt។
៣.៣ String
String ក្តូវស្តដ្រ់ single quotes ( ‘ ’ ) ឬ double quotes ( “ ” ) សៅសកា្ប
្ ្ខា្
text។
const greetings = "Hello Sir! How's it going?";
const book = 'Cambodia History';

console.log(book);
ស ើ េីសនេះសយើ្សៅអាចសក្បើក្បា ់ template string ។

Syntax រប ់ template string `${}`
( `` ) និម្ិតត ញ្ញ្ Backticks
let a = 10;
let b = 20;
console.log(À = ${a}, B = ${b}`);
៣.៤ Boolean
ក្បសភទ្ទ្ិននន័យ Boolean មានស្តេីរតដម្លស្តបុសណ្្្េះគឺ true និ្ false។
const isTrue = true;
const isFalse = false;
console.log(isTrue, isFalse);
៣.៥ The “null” value

សៅរនុ្ភាស្ JavaScript, null គឺជា special value ស្ដ តំណ្្ឱ្យ “nothing”, “empty”
ឬរ៏ “unknown value”។ មានន័យថាវាគឺក្បសភទ្ទ្ិននន័យ null។
let sum = null;
៣.៦ The “undefined” value

ចំស្នរឯ undefined គឺជា special value ស្ដ តំណ្្ឱ្យតដម្លស្ដ ម្ិនបាន assign សៅឱ្យ
អញ្ញតតិ។
៣.៧ Objects
ក្បសភទ្ទ្ិននន័យស្ដ បានសរៀបរាប់ដូចខា្ស ើគឺក្តូវបានសៅថា “primitive value” ស្ដ តដម្ល
រប ់េួរវាអាច្ទុរនូវវតែុម្ួយ ( a single thing ) ស្តម្ួយបុសណ្្្េះ។ ចំស្នរឯ Objects គឺក្តូវបានសក្បើ
ក្មាប់្ទុរនូវ collections of data និ្ more complex entities។
const user = {
name: "Tola",
age: 18
};

៣.៨ Symbols
ក្មាប់ Symbols សនេះសយើ្នឹ្សរៀនសៅរនុ្សម្សរៀនទ្ី៤។ ការស្ដ ស ើរស ើ្សៅសេ សនេះគឺ
សដើម្្បីឱ្យអនរទំ្្អ ់គាន្ដឹ្ថា Data types សៅរនុ្ភាស្ JavaScript មានទំ្្អ ់៨។
៣.៩ The “typeof” Operator

The “typeof” operator returns តដម្លជាក្បសភទ្ទ្ិននន័យរប ់អញ្ញតតិស្ដ សយើ្បានសបាេះឱ្យ។
ស្រៈ ំខាន់រប ់វាគឺសដើម្្បីេិនិត្យសម្ើ ក្បសភទ្ទ្ិននន័យនីម្ួយៗស្ដ សយើ្ច្់ដឹ្។
ក្មាប់ការសក្បើក្បា ់មានេីររសបៀបសហើយ ទ្ធ្ គឺដូចគាន្៖
1. typeof x
2. typeof(x)
លំហាត់
ចូរសធែើការបងាហ្ញក្បសភទ្ទ្ិននន័យទំ្្៧ស្ដ សយើ្បានសរៀនសហើយសៅខា្ស ើសដ្យសក្បើក្បា ់
alert ក្មាប់សធែើការបងាហញ
្ ។

៤. ការផ្លាស្់បរគបមេទទិ
តូ ននន័យ Type Conversion
ជាទ្ូសៅ operators និ្ functions ភាគសក្ចើនផ្ល្ ់បតូរក្បសភទ្តដម្លរប ់អញ្ញតតិស្ដ សយើ្បាន
សបាេះឱ្យសៅកាន់េួរវា សហើយេួរវាសធែើការផ្ល្ ់បតូរក្បសភទ្តដម្ល (ឬសៅថាក្បសភទ្ទ្ិននន័យរ៏បាន)
សនាេះសៅ ជាក្បសភទ្ទ្ិននន័យក្តឹម្ក្តូវម្ួយ។ ជាឧទហរណ៍ alert បានផ្ល្ ប
់ តូរក្បសភទ្ទ្ិននន័យសៅជា
String សដ្យ យ
ែ័ ក្បវតតិ និ្ arithmetic operations សធែកា
ើ រផ្ល្ ់បតូរតដម្លសៅជា Number។
៤.១ String Conversion

ខា្សក្កាម្សនេះេួរសយើ្បានសក្បើក្បា ់ built-in String function សដើម្្បីផ្ល្ ប
់ តូរក្បសភទ្
តដម្លរប ់អញ្ញតតិ៖
៤.២ Numeric Conversion

Numeric conversion សរើតស ើ្សដ្យ ែ័យក្បវតតិសៅសេ ស្ដ សយើ្សក្បើក្បា ់ arithmetic
operations ដូចជា / * - %

ចំណ្ំ៖ ក្ប ិនសបើសយើ្សក្បើក្បា ់ arithmetic operation ( + )

វានឹ្បតូរសៅជាក្បសភទ្ទ្ិននន័យ
String វិញ។
សក្ៅេីការសក្បើក្បា ់ arithmetic operations សយើ្នូវអាចសក្បើក្បា ់ built-in Number

function សដើម្្បីផ្ល្ ់បតូរក្បសភទ្តដម្លរប ់អញ្ញតតិ៖
Numeric conversion rules៖
NaN = Not a Number

៤.៣ Boolean Conversion

ម្ុននឹ្និយយអំេី Boolean conversion សយើ្សៅស្គ្ ់អំេី falsy value និ្ truthy
value ិន។
• falsy value គឺរា ់តដម្លណ្ស្ដ returns ម្ិនេិត ( false )។
falsy value មានដូចជា 0, -0, undefined, null, empty string (""), និ្ NaN
សក្ៅេីសនេះគឺ truthy value ទំ្្អ ់។
• truthy value គឺជារា ់តដម្លណ្ស្ដ returns េិត ( true )។
ការសក្បើក្បា ់ built-in Boolean function សដើម្្បីផ្ល្ ់បតូរក្បសភទ្តដម្លរប ់អញ្ញតតិ៖
៥. Basic operators, maths

ម្ុននឹ្ចូ សៅកាន់ operations សៅរនុ្គណិតវិទ្្ា, សយើ្សៅស្គ្ ់ “Binary operator”,
“Unary operator”, និ្ “Operand” ទំ្្អ ់គា។
ន្
• Operand គឺជាតដម្លទំ្្ឡាយណ្ស្ដ អាចយរម្រគណនាបាន។
ឧទហរណ៍៖ 8 + 2; 8 និ្ 2 គឺជា operand។
• Unary operator គឺជា operator ស្ដ មានស្តម្ួយ operand។ ភាគសក្ចើនសយើ្សក្បើ
unary operator សដើម្្បី performs decrement/increment operations។
ឧទហរណ៍៖ let y = 10;
– –y;
(–) គឺជា operator, (y) គឺជា operand
(– –y) គឺជា unary operator ។

• Binary operator គឺ operator ស្ដ operates ជាម្ួយនឹ្២ operands សហើយ

returns តដម្ល។
ឧទហរណ៍៖ let y = 10;
let x = 5;
let z = y – x;
(y – x) គឺជា binary operator ។
(let z = y – x;) គឺជា expression។
៥.១ Maths operations
• Addition +
• Subtraction –
• Multiplication *
• Division /
• Remainder %
• Exponentiation **
៥.២ String Concatenation with binary +

ការតភាជ្ប់ String សដ្យសក្បើក្បា ់ binary + ៖

៥.៣ Numeric conversion, unary +

ការសក្បើក្បា ់ unary + សដើម្្បីផ្ល្ ់បតូរក្បសភទ្តដម្លសៅជា Number ៖
៥.៤ Operator precedence

ក្ប ិនសបើ expression ម្ួយមាន operator សក្ចើនការគណនាក្តូវគិតាម្ ំដ្ប់អាទ្ិភាេ
រប ់េួរវា។
* ( let total = 100 – 10 * 5; ) សៅថា expression។
ឧទហរណ៍ខា្ស ើគឺ operator (*) មានអាទ្ិភាេខព ់ជា្ operator (–)។

ខា្សក្កាម្សនេះគឺជាារា្អាទ្ិភាេ៖
Precedence Name Sign

… … …
17 unary plus +
17 unary negation -
16 exponentiation **
15 multiplication *
15 division /
13 addition +
13 subtraction -

… … …
3 assignment =
… … …
* ( … ) មានន័យថាសៅមានសទ្ៀត។
៦. ការមគបៀបម ៀប Comparisons
Comparisons គឺជាការសក្បៀបសធៀបរវា្តដម្លេីរ សហើយ ទ្ធ្ រប ់វាគឺមានស្តេីរសទ្គឺេិត
(true) និ្ម្ិនេិត (false)។
Comparisons មានដូចជា៖
• Greater than a > b
• Less than a<b
• Greater than or equals a >= b
• Less than or equals a <= b
• Equals a == b
• Not equals a != b
៦.១ ការមគបៀបម ៀប String

➢ រសបៀបដនការសក្បៀបសធៀប String
• សក្បៀបសធៀបម្ួយតួអរ្សរដំបូ្រប ់ strings ទំ្្េីរ
• ក្ប ិនសបើម្ួយតួអរ្សរដំបូ្រប ់ string ធំជា្ ម្ួយតួអរ្សរដំបូ្រប ់ string
ម្ួយសទ្ៀតគឺធំជា្សដ្យេុំចាំបាច់សក្បៀបសធៀបតួអរ្សរបនាទ្ប់ បុស្នតសបើស មើគាន្គឺក្តូវ
សក្បៀបសធៀបតួអរ្សរបនាទ្ប់
• សធែើរសបៀបសនេះរហូតដ ់អ ់តួអរ្សរ
• ក្ប ិនសបើសក្បៀបសធៀបរហូតដ ់តួអរ្សរចុ្សក្កាយសហើយគា្្នខា្ណ្ធំជា្គឺ
មានន័យថាស មើគាន្
• ក្ប ិនសបើសក្បៀបសធៀបតួអរ្សរដូចគាន្អរ្សរតូចគឺធំជា្អរ្សរធំ
alert( 'D' > 'C' ); // true
alert('Blue' > 'Yellow' ); // false
alert( 'Bee' > 'Be' ); // true
alert( 'a' > 'A' ); // true
៦.២ ការមគបៀបម ៀបរវាងគបមេទទិនន

ន ័យខុស្គ្នន
សៅសេ ស្ដ សក្បៀបសធៀបតដម្លេីរស្ដ មានក្បសភទ្ទ្ិននន័យខុ គាន្ JavaScript នឹ្សធែើការផ្ល្ ់
បតូរតដម្លទំ្្េីរសនាេះសៅជា Number។

console.log("2" > 1); // true
console.log(10 < "5"); // false
ក្មាប់តដម្លរប ់ Boolean true = 1, false = 0។
៦.៣ Strict equality

Strict equality តំណ្្សដ្យ ញ្ញ្ស មើ៣ ( === ) សហើយវាខុ គាន្េី Equality
comparison ( == ) គឺ Strict equality សក្បៀបសធៀបទំ្្តដម្លនិ្ក្បសភទ្ទ្ិននន័យរប ់តដម្លសនាេះ
ចំស្នរឯ Equality comparison សក្បៀបសធៀបស្តតដម្លបុសណ្្្េះ។

៦.៤ លទធផលចំណលកមៅមពលមគបៀបម ៀប null vs 0

សៅសេ ស្ដ សធែើការសក្បៀបសធៀប, JavaScript ចាត់ទ្ុរ null ស មើសៅនឹ្ 0 ។ បុស្នតម្រសម្ើ
ទ្ធ្ ទំ្្៤ខា្សក្កាម្វិញ៖
* សដើម្្បប
ី សញ្េៀ បញ្ហ្៖
1. រនុ្ការសក្បៀបសធៀបគួរស្តសក្បើក្បា ់ Strict equality ( === )
2. រុំសធែើការសក្បៀបសធៀបសដ្យសក្បើ >=, <=, >, < សៅសេ មាន null
៧. Conditional branching: if, '?'

សេ ខលេះសយើ្ច្់បាន ទ្ធ្ ស្្ស្ៗគាន្អាក្ ័យស ើ រខខណឌសៅសេ ស្ដ សយើ្សធែើការសក្បៀប
សធៀប។ សដើម្្បីសធែើដូសចនេះបានសយើ្អាចសក្បើ if statement និ្ conditional operator ( ? : )។
៧.១ The “if” statement

if ( … ) statement សធែើការវាយតដម្ល រខខណឌស្ដ ែិតសៅរនុ្រ្់ក្រចរ ( parentheses )
សហើយក្ប ិនសបើ ទ្ធ្ េិត ( true ) វានឹ្ដំសណើរការ ( execute ) ំណំដនរូដទំ្សនាេះ (
block of code )។

៧.២ Boolean conversion

if ( … ) statement សធែើការវាយតដម្ល expression ស្ដ ែិតសៅរនុ្វ្់ក្រចររប ់វាសហើយ
សធែើការបស្ម្ល្ ទ្ធ្ សៅជា Boolean ( true ឬ false )។
falsy value មានដូចជា 0, -0, undefined, null, empty string ( "" ), និ្ NaN សក្ៅេី
សនេះគឺtruthy value ទំ្្អ ់។
truthy គឺជារា ់តដម្លណ្ស្ដ returns េិត ( true )។
if (null) { // null is falsy
...
}
if ("null") { //string is true

...
}
៧.៣ The “else” clause

if ( … ) statement អាចមានឬម្ិនមាន “else” block។ ក្ប ិនសបើមាន “else” block វានឹ្
ដំសណើរការសៅសេ “if” block វាយតដម្ល ទ្ធ្ ម្រម្ិនេិត ( false )។

៧.៤ Several conditions: “else if”
សៅរនុ្ភាស្ JavaScript ដំសណើរការរប ់រម្មវិធី ( program ) គឺសដើរេីស ើចុេះម្រសក្កាម្។

ដូចសនេះ if ( num >= 100 ) block ដំសណើរការម្ុនសគ សបើ ទ្ធ្ ម្ិនេិត else if ( num >= 10 )
block នឹ្ដំសណើរការម្ត្សបើ ទ្ធ្ ម្ិនេិត else if ( num >= 0 ) block នឹ្ដំសណើរការ
ក្ត្់ចំនុចសនេះ ទ្ធ្ គឺេិត សហើយវាដំសណើរការ ំណំរូដស្ដ ែិតសៅរនុ្ block រប ់វា
បនាទ្ប់ម្របញ្េប់ ដំសណើរការរម្មវិធី ( program ) ដូសចនេះ else block ម្ិនបានដំសណើរការសទ្។
៧.៥ Conditional operator “? :”

ដំសណើរការរប ់ Conditional operator ដូចសៅនឹ្ if, else ស្ដរ។ បុស្នតសគសក្បើវា ក្មាប់ស្ត
រខខណឌេីរជសក្ម្ើ ស្តបុសណ្្្េះ។
* សយើ្អាចសក្បើក្បា ់ conditional operator ក្មាប់ រខខណឌសក្ចើនជសក្ម្ើ ដូចសៅនឹ្ if,

else if, else ស្ដរ ស្តជាទ្ូសៅសគម្ិនស្ណនាំ្ឱ្យសក្បើស្បបសនេះសទ្េីសក្ េះវាងាយនឹ្ក្ច ំ និ្មានភាេ
មុគស្្្ញ។

លំហាត់
ចូរសក្បើក្បា ់ if, else if, សហើយនិ្ else សដើម្្បីបងាហ្ញដងៃនីម្ួយៗាម្រយៈ console.log ។
ឧទហរណ៍៖ let day = “Monday”; ដូចសនេះសៅស ើផ្ទ្ំ្ console ក្តូវបងាហ្ញថា “Today is
Monday.”។ សបើ let day = “Tuesday”; ដូចសនេះសៅស ើផ្ទ្ំ្ console ក្តូវបងាហ្ញថា “Today is
Tuesday.”។
៨. Logical operators
សៅរនុ្ JavaScript programming មានបួន logical operators។
1. || ( OR ) logical operator
2. && ( AND ) logical operator
3. ! ( NOT ) logical operator
4. ?? ( Nullish Coalescing ) logical operator
៨.១ Logical operator (OR) ||
Logical operator ( OR ) សធែើការេិនិត្យសម្ើ តដម្លស្ដ សៅខា្ស្ែ្ (||) សបើេិតវានឹ្

return េិត សហើយបញ្្ឈប់ដំសណើរការ សបើម្ិនេិតវាសធែើការេិនិត្យសម្ើ តដម្លស្ដ សៅខា្ស្្្ំ (||)
សទ្ៀត សបើតដម្ល សនាេះេិតវានឹ្ return េិតសបើម្ិនដូសចាន្េះសទ្វា return ម្ិនេិត។
មានន័យថាឱ្យស្តមាខ្្ណ្េិត សនាេះវានឹ្ return េិត។

៨.២ Logical operator (AND) &&
ចំស េះ logical operator ( AND ) វិញទ ់ស្តតដម្លស្ដ សៅ ្ខា្ ( && ) េិតទំ្េីរ

បានវា return េិត សបើម្ិនដូសចាន្េះសទ្វា return ម្ិនេិត។
៨.៣ Logical operator (NOT) !

Logical operator ( NOT ) ឬសៅថា exclamation mark ( ! ) រ៏បាន។ វាសធែើការបញ្ចញ្រ្
តដម្លរប ់អញ្ញតតិ សបើតដម្លសនាេះេិតសៅជាម្ិនេិត សបើម្ិនេិតសៅជាេិត។
៨.៤. Nullish coalescing operator “??”

Nullish coalescing operator តំណ្្សដ្យនិម្ិតត ញ្ញ្ two question marks “ ?? ” ។
វាចាត់ទ្ុរ null និ្ undefined គឺដូចគាន្។ Nullish coalescing operator នឹ្ return
argument ទ្ី១ក្ប ិនសបើវាម្ិនស្ម្នជា null ឬរ៏ undefined, សបើម្ិនដូសចាន្េះ argument ទ្ី២
នឹ្ក្តូវបាន return សទេះបីជា argument ទ្ី២ជា null ឬរ៏ undefined រ៏សដ្យចុេះ។
ឧទហរណ៍១៖

ឧទហរណ៍២៖
សៅស ើផ្ទ្ំ្ console បងាហ្ញ ទ្ធ្ “Anonymous” សដ្យស្រស្តសៅសេ សយើ្ក្បកា

អញ្ញតតិ “student” សយើ្ម្ិនបាន្ត ់តដម្លសៅឱ្យវា ដូសចនេះសហើយ by default JavaScript
នឹ្្ត ់តដម្ល undefined សៅឱ្យអញ្ញតតិសនាេះ។ បនាទ្ប់ម្រសៅរនុ្វ្់ក្រចររប ់ “ console.log ”
nullish coalescing operator ( ?? ) ចាប់ស្តើម្េិនិត្យសម្ើ argument ទ្ី១ រប ់វាគឺ “ student ”
បនាទ្ប់េីេិនិត្យសហើយស ើញថាតដម្លរប ់ “ student ” គឺជា undefined បានជា argument ទ្ី២
“Anonymous” ក្តូវបាន return សហើយបងាហ្ញសៅស ើផ្ទ្ំ្ console។
* សគា បំណ្ដនការសក្បើក្បា ់ nullish coalescing គឺសដើម្្បីេិនិត្យសម្ើ ថាសតើអញ្ញតតិម្ួយហនឹ្
មានតដម្លជា (null ឬ undefined) ឬសទ្។ សហើយសបើតដម្លរប ់វាជា (null ឬ undefined) សយើ្អាច
្ត ់តដម្លងមីបានសដ្យសក្បើក្បា ់វិធីស្ញ្ច តដូចឧទហរណ៍ខា្សក្កាម្។
let student;
student = student ?? "John Doe";

លំហាត់
ចូរររអញ្ញតតិស្ដ មានតដម្លធំជា្សគរនុ្ចំសណ្ម្អញ្ញតតិទំ្្បួនខា្សក្កាម្សដ្យសក្បើក្បា ់
if, else if, else រួម្ទំ្ logical operator។
let a = 10;
let b = -8;
let c = 12;
let d = 2;
៩. Loops: while, do…while និង for loop

សេ ខលេះសយើ្ក្តូវការ រម្មភាេអែីម្ួយដស្ដ ៗ, ដូចសនេះ loops គឺជសក្ម្ើ ក្តឹម្ក្តូវបំ្ុត។
ដំសណើរការរប ់ loops គឺដំសណើរការរូដដស្ដ ៗ ( repeat the same code )
សក្ចើនដ្ាម្តក្ម្ូវការរប ់អនរ រស ររូដ។
៩.១ The “while” loop

Syntax រប ់ while loop ៖
while (condition) {
// block code ឬសៅថា body loop
}
while loop នឹ្ដំសណើរការ block code សៅសេ ស្ដ រខខណឌ (condition) េិតស្ត
បុសណ្្្េះ។

ដំសណើរការ៖
៩.២ The “do…while” loop

Syntax រប ់ while loop ៖
do {
} while (condition);
do…while loop ដំសណើរការ block code សហើយបានេិនិត្យសម្ើ រខខណឌ សបើ រខខណឌេិត

នឹ្បនតដំសណើរការ block code សទ្ៀត សបើម្ិនេិតបញ្េប់ដំសណើរការ loop។ ចំនុចខុ គាន្ រវា្ while
loop និ្ do…while loop គឺ while loop ទ ់ស្ត រខខណឌេិតបាន block code
ក្តូវបានដំសណើរការ បុស្នត do…while loop វិញសទេះបីជា រខខណឌម្ិនេិតរ៏បានដំសណើរការ block
code ម្ួយដ្ស្ដរ។


៩.៣ The “for” loop

for loop គឺ មុគស្្្ញជា្ while loop និ្ do…while loop បនតិច បុស្នតភាគសក្ចើនដនអនរ
រស ររូដចូ ចិតតសក្បើក្បា ់ for loop ។
Syntax រប ់ for loop ៖
for (begin; condition; step) {
}
for loop
begin let i = 0; ដំសណើរការស្តម្ត្គត់សៅរនុ្ for loop
condition i < 5; េិនិត្យរា ់រ្ែិ ជុំនីម្ួយៗរប ់ loop ( loop
iteration ) ក្ប ិនសបើម្ិនេិត loop
នឹ្ក្តូវបានបញ្េប់។
body loop console.log(“i: ” , i); ដំសណើរការម្ត្សហើយម្ត្សទ្ៀតសៅសេ
រខខណឌេិត
step i++ សធែើការសរើនតដម្លរប ់អញ្ញតតិ “i”
ម្ត្ម្ួយរា ់រ្ែិ ជុំរប ់ loop (
ម្ួយជុំសរើនតដម្លម្ួយ )
Algorithm រប ់ for loop ( សៅថាដំសណើរការរ៏បាន )

• ក្ប ិនសបើ រខខណឌេិត => ដំសណើរការ body loop => ដំសណើរការ step =>
ដំសណើរការ រខខណឌ។
• ដំសណើរការស្បបសនេះរហូតដ ់ជួប រខខណឌម្ិនេិត។
• ក្ប ិនសបើ រខខណឌម្ិនេិត => បញ្េប់ដំសណើរការ loop

៩.៤ Breaking the loop

សេ ខលេះសយើ្ម្ិនច្់ឱ្យ loop ដំសណើរការរហូតដ ជ
់ ួប រខខណឌម្ិនេិតបានឈប់សទ្។ ដូចសនេះ
សយើ្អាចសក្បើ “break” reserved word សដើម្្បប
ី ញ្េប់ដំសណើរការរប ់ loop សៅសេ ស្ដ ជួប
រខខណឌស្ដ សយើ្ច្់បានសហើយ។
៩.៥ Continue to the next iteration

“continue” reserved word សក្បើ ក្មាប់រំ ្ម្ួយរ្ែិ ជុំ ( skip an iteration ) សៅសេ
ស្ដ ជួប រខខណឌស្ដ សយើ្បានរំណត់។
សៅរនុ្ for loop ខា្ស ើសយើ្សធែើការបងាហ្ញស្តតដម្លស សទ្ ក្មាប់តដម្លគូសយើ្សធែើការរំ ្

សដ្យសក្បើក្បា ់ “continue” reserved word។
* ចំណ្ំ “continue និ្ break” អនរ រស ររូដខលេះសៅថា directive អនរខលេះសៅថា
reserved word ម្ួយណ្រ៏ម្ិនខុ ស្ដរ។

លំហាត់
ចូរសធែើការបងាហ្ញស ខគូនិ្ស ខស រនុ្ចសនាល្េះស ខេី១ដ ់១៥និ្សធែើការរំ ្ស ខ៩សដ្យសក្បើ

ក្បា ់ continue reserved word។
ទ្ធ្ គំរូ៖
១០. The “switch” statement

Switch statement អាចសក្បើជំនួ if statement។ សយើ្គួរសក្បើវាសៅសេ សយើ្ក្តូវការ
ស្តម្ួយជសក្ម្ើ រនុ្ជសក្ម្ើ ជាសក្ចើនស្ដ មានការរំណត់ក្តឹម្ក្តូវ។
Syntax រប ់ Switch statement ៖
switch(day) {
case 'Monday': // if (day === 'Monday')
block code
break;
case 'Tuesday': // if (day === 'Tuesday')

block code
break;
default:
block code
break;
}
Algorithm រប ់ switch statement

• តដម្លរប ់អញ្ញតតិ “day” ក្តូវបានេិនិត្យាម្ស្បប strict equality ( = = = )

• សៅរនុ្ switch statement, “case” ដំបូ្ក្តូវបានដំសណើរការម្ុនសគ សបើ “case” ទ្ី១ក្តូវនឹ្ (

match ) តដម្លអញ្ញតតិសៅរនុ្វ្់ក្រចរ switch statement សនាេះ block code សៅរនុ្ “case”
សនាេះនឹ្ដំសណើរការសហើយបញ្េប់ switch statement សបើម្ិនដូសចនេះសទ្ដំសណើរការសៅ “case”
បនត។
• ក្ប ិនសបើគា្ន “case” ណ្ក្តូវនឹ្ឬរ៏ស មើនឹ្តដម្លរប ់អញ្ញតតិ “day” សទ្ block code សៅរនុ្
default នឹ្ដំសណើរការ។
• ការសក្បៀបសធៀបសៅរនុ្ case នីម្ួយៗសៅនឹ្តដម្លរប ់អញ្ញតតិ “day” គឺ ក្បកាន់អរ្សរតូចធំ (
case sensitive ) និ្ ក្បសភទ្ទ្ិននន័យ ( data types )
const day = "sunday";
switch(day) {
case 'Monday':
console.log(`Today is ${day}.`);
break;
case 'Tuesday':
break;
case 'Wednesday':
break;
case 'Thursday':
break;
case 'Friday':
break;
case 'Saturday':
break;
case 'Sunday':
break;
default:
console.log(Ùnknown day!`);
break;
}

ទ្ធ្ ដនឧទហរណ៍ខា្ស ើគឺ “Unknown day!” ក្តូវបានបងាហ្ញសៅស ើផ្ទ្ំ្ console,

សដ្យស្រគា្្ន “case” ម្ួយណ្ ក្តូវនឹ្តដម្លរប ់អញ្ញតតិ “day” ។
*ស ើ េីសនេះសយើ្អាចសធែើការ group “case”
const num = 4;
switch(num) {
case 1:
case 2:
case 3:
console.log(`Num is in range {1-3}.`);
break;
default:
console.log(`Num is not in range {1-3}.`);
break;
}
លំហាត់
ចូរសក្បើក្បា ់ switch statement សដើម្្បីសធែើការបងាហ្ញសឈា្្េះស្ខម្ួយរនុ្ចំសណ្ម្ស្ខទំ្្១២
សៅសេ ស្ដ អនរសក្បើក្បា ់ ( user ) សធែើការបញ្េូ តដម្លាម្រយៈ prompt ។ ឧទហរណ៍៖
សយើ្មាន អញ្ញតតិ “month” ម្ួយស មើនឹ្ prompt ( “បញ្េូ ស្ខ១រន្
ុ ចំសណ្ម្ទំ្១២” );
សហើយសៅសេ ស្ដ user បញ្េូ “ឧ ភា” ក្តូវបងាហ្ញ ទ្ធ្ សៅស ើផ្ទ្ំ្ console ថា
“ស្ខសនេះគឺជាស្ខឧ ភា” សបើ user បញ្េូ “ម្ិងុនា” ក្តូវបងាហ្ញ ទ្ធ្ សៅស ើផ្ទ្ំ្ console ថា
“ស្ខសនេះគឺជាស្ខម្ិងុនា”។
១១. Functions
Functions គឺជាបណ្តំដនរូដ ស្ដ សយើ្សក្បើ ក្មាប់សដ្េះក្ស្យបញ្ហ្ជារ់លារ់ណ្ម្ួយ។
ស្រៈ ំខាន់រប ់ functions មានដូចជា៖
1. ងាយក្ ួ រនុ្រររំហុ ្គ្ និ្សធែើការស្រតក្ម្ូវស្តម្ួយរស្នល្ រស្នល្ស្្ស្សទ្ៀតរ៏ក្តូវ
បានស្រតក្ម្ូវ
2. រស រម្ួយដ្សក្បើបានសក្ចើនរស្នល្សដ្យេុំចាំបាច់ រស ររូដដស្ដ ៗ
3. ក្មាប់សដ្េះក្ស្យបញ្ហ្ មុគស្្្ញ
សយើ្បានសក្បើខលេះៗសហើយដូចជា alert( text ), prompt( message, [default] ) ទំ្សនេះ

ុទ្ធស្តជា built-in functions សៅរនុ្ភាស្ JavaScript ។

ចំណ្ំ៖ built-in functions គឺជា functions ទំ្្ឡាយណ្ស្ដ មានក្ស្ប់សដ្យសយើ្

ក្គាន់ស្តសៅម្រសក្បើស្តបុសណ្្្េះ។
១១.១ ការគបកាស្ Function (Function Declaration)
function sayHello () {
console.log("Hello Rotana!");
សៅសេ ស្ដ សយើ្សៅ function សៅសក្បើ គឺសយើ្សៅសឈា្្េះរប ់ function រួចដ្រ់វ្់ក្រចរ

សៅបនាទ្ប់។ ឧ.ទ្៖ sayHello();
១១.២ Local variables

Local variables គឺជាអញ្ញតតិស្ដ ែិតសៅរនុ្ function block សដ្យមាន opening curly
brace “ { ” និ្ closing curly brace “ } ” សកា្្ប ្ខា្។
function sayHello () {
const greetings = "Hello sir, how are you doing?";

console.log(greetings);
}
សៅរនុ្ function sayHello, អញ្ញតតិ “greetings” គឺជា local variable។ សយើ្ម្ិនអាចយរ
“greetings” ម្រសក្បើសៅខា្សក្ៅ function sayHello បានសទ្។ សបើសយើ្យរម្រសក្បើសៅខា្សក្ៅ
សនាេះនឹ្មាន Error សរើតស ើ្។

១១.៣ Outer variables

ក្ប ិនសបើសយើ្ច្់សក្បើអញ្ញតតិស្ដ អាចសក្បើទំ្្រនុ្ function block ្្ និ្សៅសក្ៅ function
block ្្សយើ្សក្បើ outer variable។
* រា ់អញ្ញតតិទំ្អ ់ស្ដ ែិតសៅសក្ៅ function block គឺជា outer variable ឬអាចសៅថា
ជា global variable។
function ម្ិនក្តឹម្ស្តមាន ិទ្ធសដើម្្បី access អញ្ញតតិស្ដ សៅខា្សក្ៅ block រប ់វាសទ្ស្ងម្ទំ្

អាចសធែើការផ្ល្ ់បតូរតដម្លរប ់អញ្ញតតិសនាេះបានស្ងម្សទ្ៀត្្។
១១.៤ Parameters
សយើ្អាចបញ្េូនទ្ិននន័យសៅកាន់ function block ាម្រយៈ parameters។

សយើ្បានសបាេះ argument ទ្ី១ស្ដ មានតដម្ល 8 ាម្រយៈ parameter ទ្ី១ “ num1 ”,

argument ទ្ី២ស្ដ មានតដម្ល 3 ាម្រយៈ parameter ទ្ី២ “ num2 ” សៅសេ ស្ដ សយើ្ call
សៅ function សៅរនុ្ឧទហរណ៍សនេះគឺ multiple( 8, 3 );
១១.៥ Default values

សៅសេ ស្ដ function ក្តូវបានសៅបុស្នត argument ម្ិនក្តូវបាន្ត ់ឱ្យ សនាេះតដម្លរប ់
parameter នឹ្ស មើ undefined។
function sayHello(hello) {
console.log("Hello: ", hello);
sayHello();
តដម្លរប ់ parameter “ hello ” ស មើនឹ្ undefined ដូចសនេះ ទ្ធ្ ស្ដ បងាហ្ញសៅស ផ្

ើ ទ្ំ្
console គឺ “ Hello: undefined ”។
សដើម្្បីរុំឱ្យតដម្លរប ់ parameter “hello” ស មើនឹ្ undefined សយើ្អាចសក្បើ default value។
function sayHello(hello = "hey,") {

console.log(hello, "John");

១១.៦ Alternative default parameters

ក្ប ិនសបើសយើ្ម្ិនច្់សក្បើក្បា ់ default values ( default parameters ) សទ្សយើ្មាន
វិធីស្ញ្ច តម្ួយសទ្ៀតគឺសក្បើក្បា ់ if statement សដើម្ប្ ីសធែើការេិនិត្យសម្ើ តដម្លរប ់ parameter សនាេះ។
function sayHello(hello) {
if (hello == undefined) {
hello = "Hey, guy!";
console.log("Hello = ", hello);

}
sayHello();
១១.៧ Returning a value

function អាចសធែើការ return តដម្លក្ត ប់សៅកាន់ function call វិញ។
function sum (num1, num2) {
return num1 + num2;
const result = sum(2, 5);

console.log(`Result: ${result}`);
សៅរនុ្ function “sum” សយើ្បានសធែើការ return num1 + num2; សៅសេ សយើ្ call
សៅ function “sum” សយើ្បានសបាេះ argument (2) និ្ argument (5) សៅជាម្ួយ ដូសចនេះ
function “sum” បាន return តដម្ល 7 ម្រវិញសហើយសយើ្សធែើការសបាេះបនតសៅឱ្យអញ្ញតតិ “result”
បនាទ្ប់ម្រសយើ្យរតដម្លសនាេះបងាហ្ញសៅស ផ្
ើ ទ្ំ្ console ាម្រយៈ console.log។
ចំណ្ំ៖ function ស្ដ អត់មាន return ឬរ៏ return ទ្សទ្, function សនាេះស មើនឹ្ return
undefined ។
• function អត់មាន return
function sayHi() {
console.log("Hi, there!");
}
console.log(sayHi() == undefined);

• function return ទ្សទ្

const result = num1 + num2;
return;
}
console.log(sum(1, 3) == undefined);
១១.៨ ការដ្ឋក់ម្មឹះឱ្យ function (naming a function)

សដ្យស្រស្ត function គឺជា រម្មភាេម្ួយស្ដ សយើ្សក្បើ ក្មាប់សដ្េះក្ស្យបញ្ហ្ ដូចសនេះ
សឈា្្េះរប ់វាគឺគួរស្តជារិរិយ ័េទ។
• calculateSum(…) គណនា្ បូរសហើយ return តដម្ល
• getName(…) return សឈា្្េះ
• setName(…) ្ត ់តដម្លសៅឱ្យសឈា្្េះ
• getData(…) return ទ្ិននន័យ
• checkPermission(…) return true ឬរ៏ false ។ ។
➢ សគា ការណ៍ស្ដ គួរអនុវតតាម្ one function – one action ។

ឧទហរណ៍ក្ប ិនសបើ function សយើ្គឺ getName អ៊ីចឹ្គួរសក្បើ ក្មាប់ស្ត return name សទ្
ម្ិនគួរសធែើការគណនា្ បូរឬរ៏េិនិត្យសម្ើ ិទ្ធិអែីទំ្្អ ់សក្ៅស្តអំេី return name។ ក្ប ិនសបើ
function សយើ្ calculateSum ម្ិនគួរសៅគណនា្ ស្ចរ ្ គុណ ឬរ៏្ ដរសទ្ គឺគណនាស្ត
្ បូរសហើយ return តដម្លបុសណ្្្េះ។
១១.៩ Function = = Comments

សដ្យស្រស្តការដ្រ់សឈា្្េះឱ្យ function គឺគប្បីខលីសហើយមានន័យក្គប់ក្គាន់ សនាេះគឺមានន័យថា
ស មើនឹ្សយើ្សធែើការរំណត់ចំណ្ំ ( comments ) ថារស្នល្នឹ្ជាអែី សធែើអែី ។ ។
១២. Function expressions

សៅរនុ្ចំនុច ១១.១ សយើ្បានសរៀនអំេី function declaration រួចសហើយ។ សៅរនុ្ចំនុចសនេះ
សយើ្នឹ្សៅស្ ែ្យ ់អំេី function expressions វិញម្ត្។
let sayHello = function () {
};

ការសក្បើក្បា ់ function expressions មាន រខណៈខុ េី function declaration។
• Function declaration
o សៅសេ ស្ដ JavaScript ដំសណើរការរម្មវិធគ
ី ឺវាសធែើការ execute function
declaration ម្ុនសគ បនាទប
្ ់ម្របានវាសធែើការេីខា្ស ើចុេះម្រសក្កាម្។ មានន័យថាសទេះ
បីជា function declaration រស រសៅខា្ស ើសគឬសៅខា្សក្កាម្សគរ៏
JavaScript សធែើការ execute វាម្ុនសគដស្ដ ។
sum(10, 8); // ទ្ធ្ គឺ 18 បងាហញ
្ សៅស ផ្
ើ ទ្ំ្ console សដ្យម្ិនមាន Error
console.log(num1 + num2);
• Function expressions
o សៅសេ ស្ដ JavaScript ដំសណើរការរម្មវិធីគឺវាម្ិនបានចាត់ទ្ុរ function
expressions ថាជា រខណៈេិស ស្ដ ក្តូវ execute ម្ុនសគសទ្។ ដូចសនេះ
ការក្បកា function expressions សៅរស្នល្ណ្ និ្ការ call សៅ function
ម្រសក្បើសៅរស្នល្ណ្គឺជាបញ្ហ្ស្ដ សយើ្ក្តូវយ ់ដឹ្ទំ្្អ ់គាន្។
sayHello(); // Error (ReferenceError) ម្ិនអាច access sayHello

ម្ុននឹ្ក្បកា
};
ទ្ធ្ ដនការ call សៅ function sayHello ខា្ស ើគឺ Error សដ្យស្រស្ត

JavaScript ដំសណើរការេីស ើចុេះម្រសក្កាម្សេ ម្រដ ់ជួរ ( line ) sayHello();
JavaScript ម្ិនស ើញមានការក្បកា sayHello ម្ុននឹ្ call សៅសក្បើ ដូចសនេះ
បានជា JavaScript បងាហញ
្ Error និ្បញ្េប់ដំសណើរការរម្មវិធី ( program )វិញ។
ដំសណ្េះក្ស្យគឺសយើ្ក្តូវស្ត call សៅ function បនាទ្ប់េីការក្បកា រួច។

};
sayHello(); // ទ្ធ្ “Hello Rotana” បងាហញ
្ សៅស ផ្
ើ ទ្ំ្ console
ការបរក្ស្យខា្ស ើសយើ្ស ើញេីចំនុចម្ិន អរប ់ function expressions និ្ចំនុច អ

រប ់ function declaration។ ឥ ូវសយើ្ម្រសម្ើ េីចំនុច អរប ់ function expressions និ្
្ វិបាររប ់ function declaration វិញម្ត្។
• Function declaration
let pen = 10;

let book = 20;
let tax = 1;
const calculateTotal = function () {

function sum(a, b) {
return a + b;
}
const subTotal = sum(pen, book);

return subTotal + (subTotal * tax) / 100;
};
console.log(calculateTotal());
console.log(sum(pen, book)); // *
ឧទហរណ៍ខា្ស ើសៅសេ JavaScript ដំសណើរការរម្មវិធីេីស ើចុេះម្រសក្កាម្ម្រដ ់ជួរ (//

*) នឹ្មាន Error សរើតស ើ្។ សដ្យស្រស្ត function declaration អាច access បានស្តរនុ្
scope រប ់វាស្តបុសណ្្្េះ(ក្ត្់ចំនុចសនេះ scope រប ់វាគឺ block រប ់ function
calculateTotal)។ សៅសេ ស្ដ សយើ្យរវាម្រសក្បើសៅសក្ៅ scope រប ់វា សហើយសៅសេ
JavaScript ដំសណើរការម្រ ដ ់ក្ត្់ចំនុច (// *) JavaScript គិតថាសយើ្សៅ function
សនាេះម្រសក្បើសដ្យម្ិនបានក្បកា ជាម្ុនដូចសនេះបានជាបងាហ្ញ Error “sum is not defined”។

• Function expressions
ឥ ូវសយើ្យរ function ខា្ស ើម្រសក្បើដស្ដ សដ្យផ្ល្ ់បតូរ function sum េី function
declaration សៅជា function expressions។
let sum;
let pen = 10;
let book = 20;
let tax = 1;
sum = function (a, b) { // *

return a + b;
}

};
console.log(sum(pen, book)); // **
សៅសេ សយើ្ដំសណើរការរម្មវិធី JavaScript, សយើ្ស ញ

ើ ថាបាន ទ្ធ្ ដូចស្ដ សយើ្រំេឹ្
ទ្ុរសដ្យគា្្ន Error សរើតស ើ្។ សដ្យស្រស្ត function expressions, សយើ្អាច្ត ់តដម្ល (
assign value ) ឱ្យសៅសេ សក្កាយបាន។ ដូចស្ដ សយើ្បានស ើញសៅជួរ (// *) សហើយគឺសយើ្
បាន្ត ់តដម្លជា function សៅឱ្យវា បនាទ្ប់ម្រសយើ្ call សៅវាម្រសក្បើសៅជួរ ( // ** ) ។
សៅសេ ស្ដ JavaScript ដំសណើរការរម្មវិធីម្រដ ់ជួរ (// **) JavaScript បានដឹ្ថា function
sum ក្តូវបានក្បកា រួចសហើយសៅជួរ (// *) ដូចសនេះ JavaScript សធែើការបងាហញ
្ តដម្លរប ់ function
sum សៅស ផ្
ើ ទ្ំ្ console សហើយបញ្េប់រម្មវិធី។
១៣. Arrow functions, the basics

សៅសេ និយយដ ់ function expressions សយើ្ម្ិនក្តួវសភលច arrow functions សទ្។
ជាទ្ូសៅអនរ រស ររូដស្ត្ស្តសក្បើ arrow functions ជំនួ function expressions រ៏សក្ េះស្ត
arrow functions ខលីនិ្ងាយក្ ួ សក្បើជា្ អែីស្ដ េិស គឺ arrow functions គឺជា version ងមី។
let sum = (a, b) => a + b;

console.log(sum(7, 2)); // ទ្ធ្ គឺ ៩

១៣.១ Multiline arrow functions

ក្ប ិនសបើ body រប ់ arrow functions មានស្តម្ួយជួរសទ្គឺសយើ្អាច រស រស្បបសនេះបាន
let sum = (a, b) => a + b;។
បុស្នតសបើមានចាប់េីេីរជួរស ើ្សៅសយើ្ក្តូវស្តសក្បើ opening និ្ closing curly brace ( { } )។

let sum = (a, b) => {
let result = a + b;
return result;
};
console.log(sum(7, 2)); // ទ្ធ្ គឺ ៩
លំហាត់
ចូរផ្ល្ ់បតូរ functions ខា្សក្កាម្សៅជា arrow functions ទំ្្អ ់។ ក្ប ិនសបើ function
សនាេះមាន body ស្តម្ួយជួរសទ្ក្តូវស្តសក្បើក្បា ់រសបៀបខលីសដ្យម្ិនមាន ( { } )។
let sum;
let pen = 10;
let book = 20;
let tax = 1;
sum = function (a, b) {

return a + b;
}

};
console.log(sum(pen, book));

សម្សរៀនទ្ី៣ គុណភាេរប រ
់ ដ
ួ Code quality JavaScript
មម្មរៀនទី៣ ្ុែភាពរបស្់កដ
ូ Code quality
១. Coding style
សគា ការណ៍ រស ររូដស្ដ អនរ រស ររូដទំ្្អ ់គួរសគារេាម្គឺការ រស ររូដរប ់សយើ្
ក្តូវមានរសបៀបសរៀបរយសហើយងាយក្ ួ រនុ្ការសម្ើ (read) ក្មាប់ទំ្្ខលួនឯ្ និ្អនរ រស ររូដ
ស្្ស្សទ្ៀត។
១.១ Curly braces

ការសក្បើក្បា ់ curly braces ឱ្យក្ បាម្រ្បួន។
បញ្ជ្រ់៖ ក្មាប់រសបៀប រស ររូដឱ្យមានមានសស្ភ័ណភាេសនេះគា្្នក្តូវឬរ៏ខុ សទ្។
• Not good ☹
if (x == 1) console.log("x: ", x);
• Not good ☹
if (x == 1)
console.log("x: ", x);

JavaScript សម្សរៀនទ្ី៣ គុណភាេរប រ
់ ដ
ួ Code quality
• Not good ☹
if (x == 1) { console.log("x: ", x); }
• Good 😊
if (x == 1) {
console.log("x: ", x);
}
១.២ គបណវងកូដកនងម្ួ
ុ យជួរមដក
សបើសយើ្ រស ររូដស្វ្រនុ្ម្ួយជួរសដរៗគឺេិបារសម្ើ ទំ្្សគទំ្្សយើ្ ដូចសនេះសយើ្ រស រ
រុំឱ្យស្វ្សេរ សបើ text ហនឹ្ស្វ្សយើ្គួរចុេះបនាទ្ប់។
ចំណ្ំ្៖ សបើសយើ្សក្បើ single quotes (‘ ’) ឬ double quotes (“ ”)
សហើយចុេះបនាទ្ត់សនាេះនឹ្មាន Error ។ ដំសណ្េះក្ស្យគឺសយើ្ក្តូវសក្បើ backtick quotes (` `)។
• Not good ☹
console.log("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lore");
• Error ☹
console.log("Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aspernatur, quasi? Vel consequatur sunt, necessitatibus aliquid delectus
asperiores eos");
• Good 😊
console.log(`
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Unde aliquam voluptatibus
iusto labore adipisci, sint consequuntur
`);
១.៣ ការចូលបនទត់ ( Indents )

• ការចូ បនាទ្ត់ជួរសដរ ( Horizontal indents ) ២ ឬ ៤ space ឬរ៏ ១ tab
return a + b; // ក្ត្់ម្ួយជួរសនេះគឺសយើ្ចូ បនាទ្ត់ម្ួយ tab
}

សម្សរៀនទ្ី៣ គុណភាេរប រ
់ ដ
ួ Code quality JavaScript
• ការចុេះបនាទ្ត់ជួរឈរ
return a + b;
}
<= ទ្ុរចសនាល្េះម្ួយបនាទ្ត់
console.log("Sum: ", sum(12, 3));
១.៤ Semicolons ;
By default JavaScript នឹ្សធែើការដ្រ់ semicolons សៅក្ត្់ចំនុច line break។ បុស្នតសយើ្
គប្បីសក្បើ semicolons ; រា ់ line break សដ្យខលួនឯ្សជៀ វា្មាន Error ស្ដ េិបារនឹ្
ស្ ែ្ររ។
១.៥ Nesting levels

Nesting levels សក្ចើនស្តសរើតមានសៅសេ ស្ដ សយើ្សក្បើក្បា ់ if statement, loop ។ ។
វាអាចប្កជាភាេ មុគស្្្ញសៅវិញរនុ្ការសដ្េះក្ស្យអែីម្ួយក្ប ិនអនុវតតដូចខា្សក្កាម្៖
• គប្បីសជៀ វា្ ☹
if ( x > 0) {
if (x == y) {
if (x > z) {
... block code
}
}
}

JavaScript សម្សរៀនទ្ី៣ គុណភាេរប រ
់ ដ
ួ Code quality
• គប្បីសជៀ វា្ក្ប ិនជាអាច ☹

for (let i = 0; i < 100; i++) {
for (let j = 1; j < i; j++) {
if (j == null) {
return ...
}
}
}
២. ការមគបើគបាស្់ comments
ជាទ្ូសៅសយើ្សក្បើក្បា ់ comments សដើម្្បីេិេណ៌នាអំេីដំសណើរការរប ់រូដ។ Comments
មានដូចជា៖
• single-line : //
• multi-line : /* … */ និ្ 
២.១ Bad comments

// រូដសនេះ ក្មាប់គណនាសនេះ សហើយស្ទរសៅឱ្យ (...) សហើយទ្ទ្ួ បានស្បប (...)
// ... សៅសេ ម្ួយស្ខសក្កាយម្រ ម្រសម្ើ ខលួនឯ្រ៏អត់យ ់
… block code
២.២ Good comments

/*
* Returns x ែ័យគុណ n-th។
* @parameter {number} x គឺជាតួស ខស្ដ ក្តូវបស្កើន។
* @parameter {number} n គឺជា ែ័យគុណសហើយក្តូវស្តជាស ខ។
* @return {number} x ែ័យគុណ n-th។
*/
function pow(x, n) {
... block code
}
ចំណ្ំ្៖ ការដ្រ់សឈា្្េះឱ្យអញ្ញតតិឬ functions, classes ។ ។ គឺ ុទ្ធ ឹ្ជាការ comments។
let email = "example@gmail.com";

let password = "@9os3023l";
function login() {
... block code
}

សម្សរៀនទ្ី៤ Objects JavaScript
មម្មរៀនទី៤ Objects
១. Objects
សៅរនុ្សម្សរៀនទ្ី២សយើ្បានសរៀនអំេីក្បសភទ្ទ្ិននន័យនិ្បានស្គ្ ់ objects បនតិចបនតួចស្ដរ។
សៅរនុ្សម្សរៀនសនេះសយើ្នឹ្សធែើការ ំអិតអំេី objects ។ Objects គឺជាក្បសភទ្ reference type វា
ខុ េី primitive type មានដូចជា String Number Boolean ។ ។ សយើ្សក្បើ objects សដើម្្បី
្ទុរទ្ិននន័យសក្ចើនក្បសភទ្ (to store collections of various data) សហើយធាតុ (properties)
ស្ដ សៅរនុ្ Objects ក្តូវបានសគសៅថា key/value pairs។ សៅរនុ្ភាស្ខលេះធាតុស្ដ សៅរនុ្
objects ក្តូវបានសគសៅថា property/value, សៅរនុ្ភាស្ JavaScript សយើ្រ៏អាចសៅថា
property/value បានស្ដរ។ ដូសចនេះក្ប ិនសបើសយើ្អានស ៀវសៅ ឬសម្ើ សម្សរៀនជាវើសដអូ សហើយសគ
សៅថា key/value pairs ឬរ៏ property/value សយើ្អាចដឹ្បានថាវាគឺ ុទ្ធស្តជាធាតុ
(properties) សៅរនុ្ objects ។ ឥ ូវសយើ្ម្រសម្ើ េីរសបៀបបស្កើត objects វិញម្ត្៖
• រសបៀបទ្ី១៖ object constructor
let animal = new Object();
រសបៀបទ្ី១សនេះគឺសយើ្បស្កើត object សដ្យសក្បើ object constructor “new Object()”។
• រសបៀបទ្ី២៖ object literal

let animal = {};
ចំស្នរឯសៅរនុ្រសបៀបទ្ី២សនេះសយើ្បស្កើត object សដ្យសក្បើក្បា ់ object literal “ { } ”។
រសបៀបបស្កើត objects ទំ្្េីរសនេះ ុទ្ធស្តក្តូវដូចគាន្ បុស្នតជាទ្ូសៅគឺអនរ រស ររូដសក្ជើ សរើ

រសបៀបទ្ី២សក្ចើនជា្េីសក្ េះវាងាយក្ ួ រនុ្ការ រស រនិ្អាន សហើយម្្ា្្វិញសទ្ៀតសបើសយើ្គិតអំេី
performance រសបៀបទ្ី២គឺស ឿនជា្។
១.១ Literals and properties

let dog = { // dog object
color: "white", // key “color” ្ទុរតដម្ល value “white”
eye_color: "black", // key “eye_color” ្ទរ

ុ តដម្ល value “black”
weight: 12 // key “weight” ្ទុរតដម្ល value “12”
};

JavaScript សម្សរៀនទ្ី៤ Objects
* ចំណ្ំ color: "white", eye_color: "black", weight: 12 គឺជាធាតុ (properties)

រប ់ object dog។ key/value pairs ខណឌស្ចរសដ្យនិម្ិតត ញ្ញ្ colon “ : ” សៅខា្ស្ែ្ “ : ”
គឺជា key ចំស្នរឯសៅខា្ស្្្ំគឺជា value។ ក្មាប់ការដ្រ់សឈា្្េះឱ្យ key វិញសបើចាប់េីេីរ រ្យស ើ្
សយើ្ក្តូវ រស រដូចខា្សក្កាម្៖
• សក្បើនិម្ិតត ញ្ញ្ underscore “ _ ”
eye_color
• សក្បើ camelCase
eyeColor
• ក្ប ិនសបើច្់សក្បើ space ក្តូវសកា្្បសដ្យ double quotes ( “ ” )

“eye color”
eye color // ក្ប ិនសបើម្ិនសក្បើ double quotes សទ្នឹ្មាន Error
បនាទ្ប់េីបស្កើតសយើ្អាចបស្នែម្ធាតុសៅរនុ្ object និ្ ុបសចញេី object បានដូចគាន្។

• បស្នែម្ធាតុងមី (height = 1);
dog.height = 1;
console.log(dog);
* បញ្ជ្រ់៖ សៅសេ ធាតុ ែិតសៅរនុ្ “{ }” រប ់ object សយើ្សក្បើនិម្ិតត ញ្ញ្ colon “ : ” សដើម្្បី
្ត ់តដម្ល (value) សៅឱ្យ key ។ បុស្នតសបើសៅសក្ៅ “{ }” សយើ្សក្បើនិម្ិតត ញ្ញ្ “ = ” សដើម្្ប្
ី ត ់តដម្ល
សហើយសក្បើសឈា្្េះរប ់ object ភាជ្ប់ជាម្ួយនិម្ិតត ញ្ញ្ dot “ . ” សដើម្្បីចាប់យរ ( access ) key
ណ្ម្ួយស្ដ សយើ្ច្់បស្នែម្ឬច្់បតូរតដម្ល ។
• ុបធាតុសចញេី object dog

delete dog.color;
console.log(dog);
សៅសេ សយើ្ច្់ ុបធាតុណ្ម្ួយសយើ្ក្គាន់ស្តសក្បើ reserved word “delete” សៅេីម្ុខ
key ស្ដ សយើ្ច្់ ុប បនាទ្ប់េីសយើ្ ុប key តដម្លរប ់ key រ៏ក្តូវបាន ុបដូចគាន្។
១.២ Square brackets

ខា្ស ើសយើ្បានស្គ្ ់េរី សបៀបចាប់យរ ( access ) key ណ្ម្ួយរប ់ object សដ្យ
សក្បើក្បា ់និម្ិតត ញ្ញ្ dot “ . ” ។ ឥ ូវសនេះសយើ្ម្រសម្ើ េីរសបៀប access key រប ់ object
សដ្យសក្បើក្បា ់ square brackets “ [ ] ” វិញម្ត្។
ជាទ្ូសៅសយើ្សក្បើ square brackets “ [ ] ” សដើម្្បី access key សៅសេ key សនាេះមានេីេីរ
រ្យស ើ្សៅសហើយសយើ្សក្បើ space សដើម្្បីដរឃ្ល្ដូចឧទហរណ៍ខា្ស ើ “eye color”។

let dog = {
color: "white",
"eye color": "black",
weight: 12
};
console.log("My dog's eye colors are ", dog["eye color"], ".");

console.log(dog["color"])
dog["eye color"] = "brown";

console.log("My dog's eye colors are ", dog["eye color"], ".");
១.៣ Computed properties

ក្ប ិនសបើសយើ្សក្បើ square brackets “[ ]” សកា្្បធាតុសៅរនុ្ object literal សហើយធាតុសនាេះ
គឺជាអញ្ញតតិស្ដ សៅខា្សក្ៅ object សនាេះធាតុសនាេះនឹ្ក្តូវបានសៅថា computed property។
let animal = "sheep";
let farm = {
[animal]: 20,
cow: 30
};
console.log("There are ", farm.sheep, " sheep in the farm.");
សៅរនុ្ console.log សយើ្ access computed property រប ់ object farm “farm.sheep”

េីសក្ េះសឈា្្េះរប ់ computed property គឺជាតដម្លរប ់អញ្ញតតិ animal សៅរនុ្ឧទហរណ៍សនេះគឺ
“sheep”។ រុបម្រវិញ computed property គឺជាតដម្លរប ់អញ្ញតតិម្ួយ សហើយអញ្ញតតិសនាេះសយើ្យរ
ម្រសក្បើសៅរនុ្ object និ្សកា្្បអញ្ញតតិសនាេះសដ្យ square brackets “[ ]”។
សៅរនុ្ឧទហរណ៍ខា្ស ើសយើ្បស្កើត computed properties សៅសេ សយើ្បស្កើត object
ឥ ូវសយើ្ម្រសម្ើ ការបស្កើត computed properties សហើយបតូរតដម្លងមី បនាទ្ប់េីបស្កើត object។
let animal = "sheep";
let farm = {
cow: 30
};
farm[animal] = 20;
farm.sheep = 50;
console.log("There are ", farm.sheep, " sheep in the farm.");

១.៤ Property value shorthand

ជាធម្មាអនរ រស ររូដចូ ចិតតសក្បើអញ្ញតតិស្ដ មានក្ស្ប់យរម្រសធែើជាតដម្លរប ់ property។
let name = "Marry";
let age = 22;
let height = 1.7;
const user = {
name: name,
age: age,
height: height
};
console.log("User details: ", user);
សៅរនុ្ object user សយើ្ស ើញថា value “name, age, និ្ height” គឺមានសឈា្្េះ ដូចនឹ្
key “name, age, និ្ height” ។ សៅរនុ្ភាស្ JavaScript ក្ប ន
ិ សបើ key និ្ value
មានសឈា្្េះដូចគាន្ស្បបសនេះសយើ្អាច រស រជាទ្ក្ម្្់ខលីបាន គឺ រស រដូចខា្សក្កាម្។
let name = "Marry";
let age = 22;
let height = 1.7;
const user = {
name,
age,
height
};
console.log("User details: ", user);
១.៥ Property name limitation

ការដ្រ់សឈា្្េះឱ្យ property៖
• ម្ិនក្តូវដ្រ់សឈា្្េះឱ្យ property ដូចសៅនឹ្ reserved word សទ្
const user = {
break: "Amma",
while: 20,
const: 1
}; // bad naming ☹

• ក្ប ិនសបើសយើ្ដ្រ់សឈា្្េះឱ្យ property ជា Number សនាេះ JavaScript នឹ្ផ្ល្ ់បតូរវាសៅជា

String សដ្យ យ
ែ័ ក្បវតតិ។
const user = {
10: "ten",
}; //
console.log(user[10]);
console.log(user["10"]);
១.៧ The “for…in” loop

សៅរនុ្ភាស្ JavaScript មានទ្ក្ម្្់ loop េិស េីរ, for…in និ្ for … of។ សៅរនុ្
សម្សរៀនសនេះសយើ្និយយស្ត for…in សទ្ ក្មាប់ for…of សយើ្នឹ្ស ើរយរម្រនិយយ
សៅសេ សក្កាយ។
Syntax៖
for (let key in object) {
...body
}
key គឺជា key សៅរនុ្ object សហើយដំសណើរការរ្ែិ ជុំរប ់វាមានបុនា្នដ្អាក្ ័យស ើ
properties ស្ដ ែិតសៅរនុ្ object សនាេះថាសតើមានបុនា្ន។
ឧទហរណ៍៝៖
const bear = {
color: "black",
leg: 4,
weight: 150,
height: 2
};
for (let key in bear) {

console.log("Key: ", key);
}
សៅរនុ្ឧទហរណ៍ខា្ស ើ object bear មានបួន properties ដូសចនេះរ្ែិ ជុំរប ់វាគឺបួនដ្។
* ចំណ្ំ for…in និ្ for…of ខុ េី for loop ដ្ច់ក្ េះ។
១.៨ Ordered like an object

សៅរនុ្ object មាន special fashion ordered ម្ួយ, ក្ប ិនសបើ properties គឺជា integer
សៅសេ សយើ្សក្បើជាម្ួយ for…in ទ្ធ្ នឹ្ក្តូវបានតសក្ម្ៀបាម្ ំដ្ប់េី តូចសៅធំ។
ឧទហរណ៍ទ្ី១៖
const orderedObject = {
"2": "two",
"5": "five",
"3": "three",

"8": "eight"
};
for (let key in orderedObject) {

console.log(key); // 2 3 5 8
}
ឧទហរណ៍ទ្ី២៖
const orderedObject = {
"2": "two",
num: 10,
fruit: "apple",
"8": "eight"
};
for (let key in orderedObject) {

console.log(key); // 2 8 num fruit
}
សៅរនុ្ឧទហរណ៍ទ្ី២សនេះសយើ្ស ើញថា ទ្ធ្ គឺ 2, 8, num, និ្ fruit សដ្យស្រស្ត
object តសក្ម្ៀបស្ត properties ណ្ស្ដ ជា integer property បុសណ្្េះ្ សក្ៅេីនឹ្គឺ property
ណ្បស្កើតម្ុនក្តូវបានបងាហ្ញសចញម្រម្ុន។

លំហាត់
ចូរ រស រ JavaScript program សដើម្្បីសធែើការ ុប properties រប ់ object cart ណ្ស្ដ
ជា integer property។
const cart = {
bag: 20,
"fashion shoes": 100,
"10": 29,
shoes: 39,
32: 43
};
hint៖ សក្បើក្បា ់ built-in function “Number” ឬរ៏ unary + សដើម្្បីដឹ្ថាធាតុសនាេះជា
integer ឬម្ិនស្ម្ន។

២. Object references and copying

ភាេខុ គាន្ម្ួយដ៏ចម្្ប្រវា្ objects និ្ primitives គឺ objects ក្តូវបាន្ទុរ (store) តដម្ល
និ្ចម្ល្ (copy) តដម្ល by reference ចំស្នរឯ primitive values វិញមានដូចជា String,
Number, Boolean ។ ។ គឺចម្ល្ (copy) តដម្ល as a whole value។
សដ្យស្រស្ត រ្យខលេះសយើ្បរស្ក្បម្រគឺគា្នន័យក្គប់ក្គាន់សបើសធៀបសៅនឺ្អតែន័យសដើម្ រប ់សគ
ដូសចនេះសយើ្គួរសរៀនចំណ្ំ រ្យរប ់សគសដ្យភាជ្ប់ជាម្ួយនឹ្ឧទហរណ៍។
សតើចម្ល្ (copy) តដម្ល as a whole value យ្្ដូចសម្តចសៅ?
ឧទហរណ៍ខា្សក្កាម្៖
const book = "History";
const copyBook = book;
ឧទហរណ៍ខា្ស ើសយើ្បានបស្កើតអញ្ញតតិ book សហើយ្ត ់តដម្ល “History” សៅឱ្យវា បនាទ្ប់ម្រ

សយើ្ copy តដម្លអញ្ញតតិ book សៅឱ្យអញ្ញតតិ copyBook ាម្រយៈអញ្ញតតិ book ។ សដ្យស្រអញ្ញតតិ
book គឺជាក្បសភទ្ primitive type ដូចសនេះបនាទ្ប់េី copy រួចតដម្លរប ់ អញ្ញតតិទំ្្េីរ គឺឯររាជ្យ
(independent value)។ ក្ត្់ចំនុចសនេះមានន័យថាសទេះសបើតដម្ល រប ់អញ្ញតតិ copyBook បានម្រេី
អញ្ញតតិ book រ៏េិតស្ម្នបុស្នតអញ្ញតតិទំ្្េីរម្ិនមាន ទ្ំនារ់ទ្ំន្និ្គាន្សទ្។ ក្ប ិនសបើសយើ្បតូរតដម្ល
រប ់អញ្ញតតិ book តដម្លរប ់អញ្ញតតិ copyBook គឺសៅដស្ដ ម្ិនស្ក្បក្បួ សទ្ សហើយសបើបតូរតដម្ល
រប ់អញ្ញតតិ copyBook រ៏ម្ិនបេះ ់តដម្លរប ់អញ្ញតតិ book ស្ដរ។

ឥ ូវសយើ្ម្រសម្ើ េីការចម្ល្ (copy) តដម្ល by reference រប ់ object ម្ត្។

const book = {
title: "History"
};
const copyBook = book;
ឧទហរណ៍ខា្ស ើអញ្ញតតិ book គឺជា reference type ដូចសនេះបនាទ្ប់េីចម្ល្តដម្លឱ្យ អញ្ញតតិ

copyBook រួចម្រ អញ្ញតតិ copyBook រ៏កាល្យសៅជា reference type ដូចគាន្សហើយអញ្ញតតិទំ្្េីរ
ច្អុ សៅកាន់ទ្ីាំ្្ ( address ) រួម្ម្ួយដូចគាន្គឺ property (title: “History”)។ ក្ប ិនសបើតដម្ល
រប ់ title ក្តូវបានផ្ល្ ់បតូរ អញ្ញតតិទំ្្េីរ (book និ្ copyBook) នឹ្ទ្ទ្ួ តដម្លងមីរប ់ title
សនាេះដូចគាន្។

២.១ Comparison by reference

ការសក្បៀបសធៀបេីរ objects ស្ដ អាចស មើគាន្សៅបាន ុេះក្ាស្ត objects ទំ្្េីរសនាេះគឺច្អុ សៅ
កាន់ទ្ីាំ្រួម្ម្ួយដូចគាន្ ( point to the same address )។
let apple = {};
let banana = apple;
console.log(apple == banana); // true

console.log(apple === banana); // true
ក្ប ិនសបើ objects ទំ្្េីរសនាេះម្ិនបានច្អុ សៅកាន់ទ្ីាំ្រួម្ម្ួយសទ្សនាេះ objects ទំ្្េីរគឺ

ដ្ច់ខាតម្ិនអាចស មើគាន្បានសទ្។
let apple = {};
let banana = {};
console.log(apple == banana); // false

console.log(apple === banana); // false
២.២ Cloning, Object.assgin

សយើ្បានដឹ្រួចសហើយថាសៅសេ សយើ្ចម្ល្តដម្លរប ់ object ម្ួយសៅកាន់ object ម្ួយសទ្ៀត,
objects ទំ្្េីរសនាេះច្អុ សៅកាន់ទ្ីាំ្រួម្ម្ួយ។ បុស្នតក្ប ិនសបើសយើ្ច្់ចម្ល្តដម្លរប ់ object
ម្ួយសៅកាន់ object ម្ួយសទ្ៀតសដ្យម្ិនឱ្យេួរវាច្អុ សៅកាន់ទ្ីាំ្រួម្ម្ួយសទ្ មានន័យថាឱ្យេួរវា
ដ្ច់សដ្យស្ រេីគាន្ម្ិន រ់េ័នធគាន្ សតើសយើ្សធែើបានសដ្យរសបៀបណ្?
សយើ្អាចសធែើបានាម្េីររសបៀបគឺ Cloning និ្ Object.assgin៖
• Cloning
let apple = {
color: "red",
shape: "round"
};
let clone = {};
for (let key in apple) {

clone[key] = apple[key];
}
console.log("Object clone: ", clone);

// បនាទ្ប់េីផ្ល្ ់បតូរតដម្លរប ់ property “color” សៅរនុ្ object clone
// រួចម្រគឺម្ិនបេះ ់ដ ់ property “color” សៅរនុ្ object apple សទ្
clone.color = "green";
console.log("Object clone: ", clone); // color = “green”
console.log("Object apple: ", apple); // color = “red”
• Object.assign

let apple = {
color: "red",
shape: "round"
};
let clone = Object.assign({}, apple);
clone.color = "green";
console.log("Object clone: ", clone); // color = “green”
console.log("Object apple: ", apple); // color = “red”
សៅរនុ្រ្់ក្រចររប ់ Object.assign មានេីរ parameters, parameter ទ្ី១គឺជាក្បសភទ្

ទ្ិននន័យ( { } តំណ្្ឱ្យ object ) និ្ parameter ទ្ី២គឺ object សដើម្ស្ដ សយើ្ច្់ចម្ល្េី។
ដំសណើរការរប ់ Object.assign({}, apple)៖
o ម្ុនដំបូ្ចម្ល្តដម្លរប ់ object apple សៅរនុ្ “ { } ”
{
color: "red",
shape: "round"
}
o បនាទ្ប់ម្រ return “ { } ” សៅឱ្យអញ្ញតតិ clone
let clone = {
color: "red",
shape: "round"
};

៣. Object methods, “this”

Objects ក្តូវបានបស្កើតស ើ្សដើម្្បីតំណ្្ឱ្យអែីម្ួយដូចជា car, human, animal ។ ។
Animal អាចមាន រម្មភាេដូចជា សដើរ សហើរ ស្ហ និ្បសញ្េញ ំស ្ជាសដើម្។
ឧទហរណ៏៖
const cat = {
name: "Sema",
fur: "gray",
meow: function() {
console.log("Meow Meow!");
}
};
cat.meow(); // Meow Meow!
សៅរនុ្ឧទហរណ៍ខា្ស ើសយើ្បស្កើត object cat។ សៅរនុ្ object សនេះសយើ្បានបស្កើត

properties េីរគឺ name និ្ fur ស ើ េីសនេះសយើ្រ៏បានបស្កើត method meow ស្ដ method
សនេះសធែើការបងាហ្ញឃ្ល្ “Meow Meow” សៅស ើផ្្
ទ្ំ console សៅសេ ស្ដ សយើ្ call សៅវា
“cat.meow()”។
ចំណ្ំ៖ function ស្ដ ែិតសៅរនុ្ object ក្តូវបានសៅថា method ។

៣.១ Method shorthand

ឥ ូវសយើ្យរឧទហរណ៍ខា្ស ើម្រផ្ល្ ់បតូរសៅជាទ្ក្ម្្់ខលី។
const cat = {
name: "Sema",
fur: "gray",
meow() { // *
console.log("Meow Meow!");
}
};
cat.meow(); // Meow Meow!
សៅក្ត្់បនាទ្ត់ // * សយើ្ផ្ល្ ់បតូរ method សៅជាទ្ក្ម្្់ខលីសដ្យក្គាន់ស្ត ុបនិម្ិតត ញ្ញ្

colon “ : ” និ្ reserved word “ function ”។
៣.២ “this” in methods

ជាការេិតណ្ ់ methods ក្តូវការ access ទ្ិននន័យ ( properties ) ស្ដ មានសៅរនុ្ object
សដើម្្បីសធែើការរប ់វា។ សដើម្្បី access ទ្ិននន័យ, method អាចសក្បើ keyword “ this ”។
ចំណ្ំ៖ សៅរនុ្ object, this តំណ្្ឱ្យ object។
let user = {
firstname: "John",
lastname: "Cena",
fullname() {
return this.firstname + " " + this.lastname;
}
};
console.log(user.fullname()); //John Cena
ឧទហរណ៍ខា្ស ើសៅរន្
ុ method fullname សយើ្សក្បើ this សដើម្្បី access properties (
firstname, lastname ) បនាទ្ប់ម្រសយើ្ភាជ្ប់ properties ទំ្្េីរសដ្យ unary operator + និ្
white space “ ” សដើម្្បីបស្កើតបានជាសឈា្្េះសេញម្ួយ។

១.៦ “ in ” operator
សដើម្្បីេិនិត្យសម្ើ ថា property ម្ួយហនឹ្ ែិតសៅរនុ្ object ម្ួយហនឹ្ស្ដរឬសទ្ សយើ្សក្បើក្បា ់
“in” operator សហើយតដម្លស្ដ វា returns ក្ត ប់ម្រវិញមានស្តេីរសទ្គឺេិត និ្ម្ិនេិត។
const user = {
10: "ten",
};
console.log("10" in user); // true

console.log(10 in user); // true
console.log(20 in user); // false
console.log("name" in user); // false
៣.៣ “this” is not bound

សៅរនុ្ភាស្ JavaScript, keyword “this” behave ខុ េី programming languages
ស្្ស្សទ្ៀត វាអាចសក្បើសៅរនុ្ function សទេះបី function សនាេះម្ិន ែិតសៅរនុ្ object រ៏សដ្យ។
តដម្លរប ់ this ម្ិនបានភាជ្ប់ ( bound ) សៅនឹ្អែីម្ួយឱ្យជារ់លារ់សទ្។ តដម្លរប ់ this
ក្តូវបានវាយតដម្លសដ្យ JavaScript engine អំ ុ្សេ call-time សហើយវាម្ិនអាក្ ័យថាសតើ
method ហនឹ្ក្បកា សៅរស្នល្ណ្សទ្, បុស្នតវាអាក្ ័យស ើ object សៅេីម្ុខនិម្ិតត ញ្ញ្ dot ( . )
ស្ដ access function ស្ដ វា ែិតសៅ។
let user = { name: "John cena" };
let admin = { name: "Admin" };
function displayName() {
console.log( this.name );
}
user.func = displayName;
admin.func = displayName;
user.func(); // John cena

admin["func"](); // Admin
ចំណ្ំ៖ សៅសេ ស្ដ សយើ្ call សៅ function សដ្យគា្្ន object, this ស មើនឹ្ undefined។
function displayName() {
console.log( this.name );
}
displayName(); // undefined
រនុ្ររណីសនេះក្ប ិនសបើ ែិតសៅរនុ្ “strict mode” this.name នឹ្ប្កឱ្យមាន error។

បុស្នតសបើ ែិតសៅរនុ្ ‘non-strict mode” ដូចឧទហរណ៍ខា្ស ើ this គឺតណ្
ំ ្ឱ្យ window សៅស ើ

browser ដូចសនេះបានជាគា្្ន error។ រនុ្ររណី this ស មើនឹ្ window សយើ្នឹ្ស ើរម្រនិយយ

សេ សក្កាយសទ្ៀត។

៣.៤ Arrow functions អ្ត់មន “this”

Arrow functions គឺវាមាន រខណៈេិស ខុ េី regular functions, េួរវាម្ិនមាន ‘this”
សទ្។ សបើសក្បើ this សៅរនុ្ arrow functions, this នឹ្ក្តូវបាន access េីខា្សក្ៅ scope រប ់វា។
let user = {
firstname: "John",
lastname: "Cena",
fullname() {
const tranformFullname = () => {
return `${this.firstname} ${this.lastname}`.toUpperCase();
}
return tranformFullname;
}
};
const result = user.fullname();

console.log(result()); //JOHN CENA
ឧទហរណ៍ខា្ស ើ this.firstname និ្ this.lastname បានម្រេី scope ខា្សក្ៅរប ់

arrow function “tranformFullname” គឺ method “fullname”។ ក្មាប់ arrow functions
សយើ្នឹ្ ំអិតឱ្យកាន់ស្តច្ា ់សៅរនុ្សម្សរៀន Advanced working with functions។

៤. Constructor, operator “new”

សៅសេ ស្ដ សយើ្បស្កើត object សដ្យសក្បើ object literal “{ }” សយើ្អាចបស្កើតម្ត្បានស្ត
ម្ួយសទ្។ ឧទហរណ៍ក្ប ិនសបើសយើ្ច្់បស្កើត object human េីរស្ដ មាន properties ដូចគាន្
សយើ្ក្តូវ រស រេីរដ្។
let john = {
age: 25,
height: 1.8,
weight: 73
};
let marry = {
age: 18,
height: 1.62,
weight: 42
};
ក្ប ិនសយើ្ច្់បស្កើត៤ឬរ៏៥សទ្ៀតសយើ្ក្តូវ រស រដស្ដ ៗស្បបសនេះ៤-៥ដ្សទ្ៀត។ ំណ្្

អស្ដ សៅរនុ្ភាស្ JavaScript សយើ្អាចបស្កើត object សដ្យសក្បើ Constructor function
“new”។ សៅសេ ស្ដ សយើ្បស្កើត object សដ្យសក្បើក្បា ់ constructor function “new”
គឺសយើ្ រស រស្តម្ត្សទ្ សហើយអាចសៅសក្បើបានសក្ចើនដ្ាម្តក្ម្ូវការ។
៤.១ Constructor function

Constructor functions សបើនិយយាម្បសចេរសទ្ សៅរនុ្ភាស្ JavaScript គឺជា
regular functions សនាេះឯ្។ បុស្នតវាមានេីរចំនុចស្ដ សយើ្ក្តូវរត់ចំណ្ំ្៖
1. Constructor functions ចាប់ស្តើម្សដ្យអរ្សរធំម្ួយតួដំបូ្ ( ក្មាប់អរ្សរធំសនេះសយើ្
អាច រស រជាអរ្សរតូចធម្មារ៏បាន គា្្នច្ាប់ស្ដ រំហិតឱ្យក្តូវស្ត រស រស្បបសនេះសទ្
បុស្នតសយើ្គប្បី រស រអរ្សរធំម្ួយតួដំបូ្ម្ុនសគ) សដើម្្បីងាយក្ ួ ដ ់អនរ រស ររូដ
ស្្ស្សទ្ៀត ដឹ្ថាវាជា Constructor functions ឬរ៏ regular functions
សៅសេ ស្ដ សគសម្ើ រូដរប ់សយើ្ សហើយវារ៏ជាការយ ់ក្ បទ្ូសៅរប អ
់ នរ រស រ
រូដស្ដរ។
2. Constructor functions ក្តូវសក្បើជាម្ួយ “new” operator ( ក្ប ិនសបើសយើ្អត់សក្បើ
new operator សៅេីម្ុខ function call សទ្ JavaScript engine នឹ្ចាត់ទ្ុរវាជា
regular function )។

function Human(age, height, weight) {
this.age = age;
this.height = height;
this.weight = weight;
}
const john = new Human(25, 1.8, 73);

const marry = new Human(18, 1.62, 42);
const dara = new Human(14, 1.65, 52);
console.log("John: ", john); //{ age: 25, height: 1.8, weight: 73 }

console.log("Marry: ", marry); //{ age: 18, height: 1.62, weight: 42 }
console.log("Dara: ", dara); //{ age: 14, height: 1.65, weight: 52 }
សៅសេ ស្ដ function “Human” ក្តូវបានដំសណើរការជាម្ួយ new operator វានឹ្បស្កើត

ឱ្យមានបីតំណ្រ់កា ដូចខា្សក្កាម្៖
1. object ទ្សទ្រម្ួយក្តូវបានបស្កើតស ើ្សហើយ assign សៅឱ្យ “this” keyword
2. បនាទ្ប់ម្រ add new properties សៅកាន់ “this”
3. ចុ្សក្កាយ returns “this”
function Human(age, height, weight) {

// this = {}; (Implicitly)
// add new properties to this

this.age = age;
this.height = height;
this.weight = weight;
//return this; (Implicitly)

}
ចំណ្ំ៖
• Implicitly មានន័យថាអែៗ
ី ក្តូវបានសរៀបចំស ើ្ទ្ុរជាម្ុនសដ្យភាស្ JavaScript
• Explicitly មានន័យថាអែីៗក្តូវបាន រស រស ើ្, បស្កើតស ើ្, សរៀបចំស ើ្សដ្យ
អនរ រស ររូដផ្ទ្ ់
• ម្ូ សហតុស្ដ សក្បើក្បា ់ constructor functions គឺ reusable
• សយើ្ម្ិនអាចសក្បើក្បា ់ arrow functions ជា constructor functions បានសទ្
េីសក្ េះ arrow functions ម្ិនមាន “this”

៤.២ Return from constructors

ជាធម្មា constructor functions ម្ិនមាន return statement សទ្ េីសក្ េះការងាររប ់វាគឺ
assign តដម្លសៅឱ្យ “this” បនាទ្ប់ម្រតដម្លរប ់ “this” កាលយ
្ សៅជា ទ្ធ្ រប ់វាសដ្យ យ
បុស្នតក្ប ិនសបើសយើ្សក្បើ return statement សៅរនុ្ constructor function សនាេះវាមាននឹ្ការ
ស្ក្បក្បួ ដូចខា្សក្កាម្៖
• ក្ប ិនសបើ “return” statement ក្តូវបានសក្បើសដើម្្បី returns តដម្លជា object សនាេះ
object សនាេះនឹ្កាល្យសៅជា ទ្ធ្ រប ់ constructor function ជំនួ ឱ្យ “this”
• ក្ប ិនសបើ “return” statement ក្តូវបានសក្បើសដើម្្បី returns តដម្លជា primitive
សទ្សនាេះ constructor function នឹ្ម្ិនខែ ់េីវាសទ្ សហើយយរតដម្លរប ់ “this”
ជា ទ្ធ្ រប ់វាដស្ដ ។
function Human(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
const fullname = this.firstname + " " + this.lastname;
return {
fullname: fullname
};
}
const marry = new Human("marry", "lazana");

console.log(marry); // { fullname: 'marry lazana' }
return 10 + 2;
}
const marry = new Human("marry", "lazana");

console.log(marry); // { firstname: 'marry', lastname: 'lazana' }

៤.៣ Methods in constructors

សៅរនុ្ constructor functions រ៏អាចមាន methods ្្ស្ដរ។
this.fullname = function() {
console.log(`Fullname: ${this.firstname} ${this.lastname}`);
}
}
const marry = new Human("Marry", "Lazana");

marry.fullname(); // Fullname: Marry Lazana
លំហាត់
ចូរបស្ម្ល្ object ខា្សក្កាម្ឱ្យសៅជា constructor function សហើយសធែើការបងាហ្ញតដម្លរប ់វា
ាម្រយៈ console.log។
const student = {
name : "Makara",
class_name: "12A",
grade : 12
};

៥. Optional chaining “?.”

Optional chaining គឺជា feature ងមីរប ់ភាស្ JavaScript, វាមានស្រៈ ំខាន់ណ្ ់។
ម្ុខងាររប ់វាគឺសក្បើសដើម្្បី access nested object properties សដ្យម្ិនប្កឱ្យមាន error
សរើតស ើ្សទេះបីជា properties សនាេះម្ិនស្ម្នជា object រ៏សដ្យ។
៥.១ The “non-existing property” problem

សេ ស្ដ សយើ្ access property រប ់ object ស្ដ អត់មាន, ទ្ធ្ ស្ដ សយើ្ទ្ទ្ួ
បានគឺ undefined បុស្នតសបើសយើ្ access nested properties ស្ដ properties ទំ្្សនាេះម្ិនទន់
មានវិញវានឹ្ប្កជា error។
const user = {};
console.log(user.address); // undefined
console.log(user.address.line1); // error occurs
ដំសណ្េះក្ស្យគឺសយើ្សក្បើ Logical AND (&&)៖

const user = {};
console.log(user.address && user.address.line1); // undefined
៥.២ Optional chaining

សដ្យស្រស្តដំសណ្េះក្ស្យខា្ស ើក្តូវ រស រសក្ចើន ដូសចនេះសហើយបានជា JavaScript
Developers បស្កើត feature សនេះម្រសដើម្្បី ក្ម្ួ វាឱ្យមានភាេងាយក្ ួ ជា្ម្ុន។
ឧទហរណ៍ user?.address ៖
ដំសណើរការរប ់វាគឺក្ប ិនសបើតដម្លសៅខា្ស្ែ្រប ់វា “ ?. ” ជា Object សនាេះវានឹ្បនត access
សៅខា្ តំំារប ់វាសទ្ៀតបុស្នតសបើតដម្លខា្ស្ែ្រប ់វាម្ិនស្ម្នជា Object សទ្ វានឹ្បញ្្ឈប់ក្តឹម្នឹ្។
ម្ូ សហតុស្ដ សយើ្ក្តូវសក្បើវាសនាេះេីសក្ េះសេ ខលេះសយើ្ម្ិនអាចដឹ្ម្ុនបានសទ្ថាអញ្ញតតិសនាេះជា
object ឬម្ិនស្ម្ន សបើវាជា object វិញសយើ្រ៏ម្ិនដឹ្ស្ដ ថា properties រប ់វាស្ដ សយើ្ក្តូវការ
access សនាេះមានតដម្លជា object ឬរ៏អត់។ ឧទហរណ៍សយើ្ទញទ្ិននន័យ user េី database ម្រ
សហើយច្់បានអា ័យដ្ឋន
្ រប ់ user សនាេះ, ក្ប ិនសបើអា ័យដ្ឋ្នសនាេះមានសយើ្នឹ្ទ្ទ្ួ បាន
ទ្ធ្ ដូចស្ដ សយើ្ច្់បាន បុស្នតសបើអត់មានវិញ សយើ្ច្់ឱ្យតដម្លសនាេះស មើនឹ្ undefined ជាជា្
error សហើយបញ្េប់រម្មវិធីរប ់សយើ្។

ឥ ូវសយើ្យរឧទហរណ៍ខា្ស ើម្រសក្បើម្ត្សទ្ៀតសដ្យសក្បើ optional chaining វិញម្ត្៖

const user = {};
console.log(user.address?.line1); // undefined

៦. Symbol type
Object keys អាចមានស្តេីរក្បសភទ្បុសណ្្្េះគឺ string type និ្ symbol type ម្ិនអាចជា
numbers ឬរ៏ Booleans ជាដ្ច់ខាត។
៦.១ Symbols
“symbols” តំណ្្ឱ្យ unique identifier។ សហើយសយើ្អាចបស្កើតវាបានសដ្យសក្បើក្បា ់
Symbol()។
const id = Symbol();
សៅសេ ស្ដ សយើ្បស្កើតអញ្ញតតិស្ដ មានក្បសភទ្ជា symbol សយើ្គួរស្តេិេណ៌នាអំេី symbol

សនាេះ។ សយើ្អាចេិេណ៌នាសៅរនុ្វ្់ក្រចររប ់ Symbol()។
const studentId = Symbol("studentId");
សៅរនុ្ភាស្ JavaScript, symbols ក្តូវបានធានាថាមានស្តម្ួយ (unique)

សទេះបីជាសយើ្ បស្កើត symbols សក្ចើនសដ្យសក្បើការេិេណ៌នា ( description ) ដូចគាន្រ៏សដ្យ។
const studentId1 = Symbol("studentId");
console.log(studentId1 == studentId2); // false
warning ៖ សៅសេ ស្ដ សយើ្សក្បើ Symbol ជាម្ួយ built-in function “alert” នឹ្មាន Error
សរើតស ើ្សដ្យស្រស្ត default behavior រប ់ “alert” គឺបស្ម្ល្តដម្លទំ្្អ ់ស្ដ ែិតសៅរនុ្វ្់
ក្រចររប ់វាសៅជា string បុស្នត ក្មាប់ symbol គឺជា special type ម្ួយស្ដ function “alert”
ម្ិនអាចបស្ម្ល្វាសៅជា string សដ្យខលួនឯ្សទ្ដូចសនេះសយើ្ក្តូវសក្បើ array method “toString()”
សដើម្្បីជំនួយ។
alert(studentId1); // TypeError: Cannot covert a Symbol value to a String
alert(studentId1.toString()); // Symbol(studentId)
៦.២ Symbols in an object literal

ក្ប ិនសបើសយើ្ច្់សក្បើ symbol សៅរនុ្ object សយើ្ក្តូវដ្រ់ symbol សនាេះសៅរនុ្ square
brackets “[ ]”។
const student = {
[studentId]: "0001"

};
សៅសេ ស្ដ សយើ្ access symbol សយើ្ក្តូវស្តសក្បើ square brackets “[ ]” ដូចគាន្ ម្ិនអាច
សក្បើនិម្ិតត ញ្ញ្ dot “ . ” បានសទ្។
console.log(student[studentId]); // 0001
៦.៣ Symbols are skipped by for...in

សៅរនុ្ for…in symbol ក្តូវបានរំ ្។ មានន័យថាសយើ្ម្ិនអាចបងាហ្ញ properties ស្ដ
មានក្បសភទ្ជា symbol បានសទ្។
const student = {
[studentId]: "0001",
name: "Heng leaphea",
age: 21,
gender: "female"
};
for (let key in student) {

console.log(key); // name, age, gender but no studentId
}
៦.៤ Global Symbols

សយើ្បានដឹ្រួចម្រសហើយថា symbol គឺ unique សទេះបីជាេួរវាមានសឈា្្េះ ( description )
ដូចគាន្រ៏សដ្យ។ បុស្នតសេ ខលេះសយើ្ច្់ឱ្យ symbol ស្ដ មានសឈា្្េះដូចគាន្ ែិតសៅរនុ្ស្្នរ (
entities ) ស្តម្ួយ។ សដើម្្បីសធែើដូសចនេះបានគឺសយើ្ក្តូវបស្កើត symbol សនាេះសៅរនុ្ global symbol
registry។ សៅសេ ស្ដ សយើ្បស្កើតវាសៅរនុ្ global symbol registry
េួរវាក្តូវបានធានាថាសៅសេ ស្ដ access symbol ស្ដ មានសឈា្្េះដូចគាន្សនាេះគឺវា return
symbol ដូចគាន្ក្ត ប់ម្រវិញ។
// ទញយរេី global registry

const studentId = Symbol.for("studentId"); // សៅសេ ស្ដ សយើ្ទញយរេី
// global registry សហើយអត់ទន់
// មាន studentId, global registry
// នឹ្សធែើការបស្កើតឱ្យសដ្យ ែ័យក្បវតតិ
// ទញយរេី global registry
const professorId = Symbol.for("studentId");
console.log(studentId === professorId); // true

៦.៥ Symbol.keyFor
សៅសេ ស្ដ សយើ្ដឹ្ថា identifier ម្ួយជាក្បសភទ្ symbol ស្តក្ប ិនជាសយើ្ម្ិនដឹ្ថាវាជា
symbol ឬរ៏ជា global symbol សទ្, គឺសយើ្អាចសក្បើ Symbol.keyFor សដើម្្បីសធែើការេិនិត្យ។
const local = Symbol("local");

const global = Symbol.for("global");
console.log(Symbol.keyFor(local)); // undefined
console.log(Symbol.keyFor(global)); // global
ដំសណើរការរប ់ Symbol.keyFor គឺវាសក្បើ global symbol registry សដើម្្បីស្ ែ្ររសឈា្្េះ

រប ់ symbol។ ដូសចនេះក្ប ិនសបើ symbol សនាេះម្ិនស្ម្នជា global symbol សទ្វាក្បារដជាររម្ិន
ស ើញសហើយ returns undefined បុស្នតសបើវាររស ើញវានឹ្ returns សឈា្្េះរប ់ global symbol
សនាេះ។ ស ើ េីសនេះសបើសយើ្ច្់ដឹ្សឈា្្េះរប ់ symbol ( local symbol ) សយើ្អាចសក្បើ dot ( . )
និ្ description។
console.log(local.description); // local

សម្សរៀនទ្ី៥ ក្បសភទ្ទ្ិននន៍យ Data types JavaScript
ជំពូកទី២ កគម្ិតថានក់ម្ យម្ Intermediate
មម្មរៀនទី៥ គបមេទទិនននយ
័ Data types
១. Methods of primitives
សយើ្បានសរៀនសក្ចើនម្រសហើយអំេី object methods, ម្ិនក្តឹម្ស្ត object សទ្ស្ដ អាចមាន
methods ូម្្បីស្ត primitives រ៏អាចមាន methods ស្ដរ។ សៅសេ ស្ដ សយើ្សក្បើ methods
ជាម្ួយ primitive, primitive សនាេះក្តូវបានចាត់ទ្ុរថាជា object ( a primitive as an object )។
ម្ុននឹ្បនតសយើ្រំ ឹរអំេី primitives បនតិច៖
• Primitives
o តដម្លរប ់វាជាក្បសភទ្ primitive
o សៅសេ ស្ដ សយើ្ចម្ល្តដម្លរប ់ primitive តដម្លវាក្តូវបានចម្ល្ as a whole
o សៅរនុ្ភាស្ JavaScript មាន៧ primitive types ៖ string, number,
bigint, Boolean, symbol, null, and undefined។
១.១ A primitive as an object

អែីស្ដ សយើ្គួរយ ដ
់ ឹ្សៅេីសក្កាយ a primitive as an object ។
1. Primitives គឺសៅស្តជា primitives ដស្ដ ។
2. JavaScript អាចឱ្យសយើ្ access methods និ្ properties រប ់ strings,
numbers, Booleans, និ្ symbols។
3. សដើម្្បីអាចឱ្យ primitive កាល្យសៅជា object បាន សហើយ access methods និ្
properties រប ់វាបាន, គឺក្តូវមាន special “object wrapper” ម្ួយស្ដ មានតួនាទ្ី
ក្មាប់បស្នែម្ម្ុខងារសៅឱ្យ primitive សហើយវាបាត់សៅវិញភាល្ម្ៗ បនាទ្ប់េីបញ្េប់
ការងារ។
ចំស េះ primitive type នីម្ួយៗ Object wrappers គឺសដើរតួខុ ៗគាន្សៅាម្ក្បសភទ្

primitive សនាេះ។ Object wrappers នឹ្្ត ់ ំណំដន methods ខុ ៗគាន្សៅាម្ក្បសភទ្
primitive។
let greetings = "Hello sir!";
greetings = greetings.toUpperCase();
console.log(greetings); // HELLO SIR!

JavaScript សម្សរៀនទ្ី៥ ក្បសភទ្ទ្ិននន៍យ Data types
1. String “greetings” គឺជា primitive។ ដូចសនេះសៅសេ ស្ដ access method

រប ់វា, special object wrapper ម្ួយក្តូវបានបស្កើតស ើ្សហើយ object
សនេះស្គ្ ់តដម្លរប ់ string “ Hello sir! ” សហើយសក្បើ methods toUpperCase()
2. Method សនេះដំសណើរការបស្ម្ល្តដម្ល string “ Hello sir! ” សៅជា “ HELLO SIR! ”
3. បនាទ្ប់េីបញ្េប់ការងារវាសហើយ, object wrapper បានបាត់សៅវិញភាល្ម្, បន្ស ់ទ្ុរ
primitive “ greetings ” សៅស្តជា primitive ដស្ដ ។
let num = 102.20394;
num = num.toFixed(2);
console.log(num); // 102.20
ឧទហរណ៍ទ្ី២សនេះគឺសយើ្សក្បើ method “ toFixed() ” រប ់ number សហើយដំសណើរការវាគឺ

ដូចគាន្សៅនឹ្ឧទហរណ៍ទ្ី១។ ម្ុខងាររប ់ method “ toFixed() ” គឺរំណត់យរបុនា្នខទ្់សៅ
សក្កាយសរ្បៀ ឧទហរណ៍ក្ប ិនសបើសបាេះស ខ២ចូ សៅរនុ្វ្់ក្រចរសនាេះមានន័យថាយរ២ខទ្់។
ចំណ្ំ៖ null និ្ undefined ម្ិនមាន methods សទ្។ េួរវាគឺជា special primitive types,
សហើយេួរវារ៏គា្ន special object wrappers ស្ដរ។
២. Numbers
សៅរនុ្ភាស្ JavaScript, Numbers មានេីរក្បសភទ្។
1. Regular numbers គឺក្តូវបាន្ទុរតដម្លរនុ្ទ្ក្ម្្់ 64-bit format IEEE-754 ឬសយើ្អាច
សៅម្្ា្្សទ្ៀតថា “ double precision floating point numbers ” ។
2. BigInt numbers, តំណ្្ឱ្យស ខសក្ចើនខទ្់ស្ដ regular numbers ម្ិនអាចមានស ើ ។
ស ខរប ់ regular numbers គឺមានរំណត់ម្ិនអាចស ើ េី 253 និ្ម្ិនអាចតិចជា្ -253។
ដូចសនេះក្ប ិនសបើសយើ្ច្់សក្បើស ើ សនេះគឺសយើ្ក្តូវសក្បើស ខ bigint។
២.១ មគចើនរមបៀបកនងការស្រមស្រ
ុ number
• regular way
let num = 1000000;
• underscore ( _ ) ងាយក្ ួ រនុ្ការអាន

let num = 1_000_000;
• ជាម្ួយនឹ្អរ្សរ e
let num = 1e6; // e6 ស មើនឹ្ស ខ ូន្យ៦ដ្ សបើ e10 ស ខ ូន្យ១០ដ្ ។ ។

ក្ប ិនសបើស ខសក្កាយសរ្បៀ , សយើ្សក្បើ e- និ្ចំនួនសក្កាយសរ្បៀ ស្ដ សយើ្ច្់បាន

let num = 1e-5;
console.log(num); // 0.00001
• Hex, binary and octal numbers

o Hexadecimal
console.log(0xaa); // 170
console.log(0xAA); // 170 ( អរ្សរតូចធំគឺដូចគាន្ )
សយើ្ រស រ hex number សដ្យស្តើម្សចញេី 0x សហើយជាទ្ូសៅសយើ្សក្បើវា

តំណ្្ឱ្យេណ៌
o Binary និ្ Octal numbers
let a = 0b11111111; //binary
let b = 0o377; //octal
console.log("a", a); //255

console.log("b: ", b); //255
ក្មាប់ binary និ្ octal គឺសយើ្រក្ម្នឹ្សក្បើណ្ ់។
២.២ toString(base)
Method “ num.toString(base) ” returns string ស្ដ តំណ្្ឱ្យស ខសៅរនុ្ក្បេ័នធ
numeral ជាម្ួយ base ( សគា ) ស្ដ សយើ្បាន្ត ់ឱ្យ។ By default សគា ស្ដ return េី
toString() គឺសគា ១០។
• សគា មានដូចជា 2, 8, 10, 16, និ្ 36
o សគា 2 តំណ្្ឱ្យ binary, អាចជាស ខ 0 ឬរ៏ 1
o សគា 8 តំណ្្ឱ្យ octal, ស ខមានេី 0-7
o សគា 16 តំណ្្ឱ្យ hex, ស ខមានេី 0-9 និ្ A-F
o សគា 36 គឺជាសគា ស្ដ ធំបំ្ុតសៅរនុ្ក្បេ័នធ numeral, , ស ខមានេី 0-9 និ្េី
A-Z។ រខណៈេិស រប ់សគា 36 គឺសយើ្បស្ម្ល្ស ខេីស្វ្ឱ្យសៅជាខលី។
console.log(2945289..toString(36)); //1r4ll
ចំណ្ំ្៖ សៅសេ ស្ដ សយើ្សក្បើស ខផ្ទ្ ់ជាម្ួយ toString() សយើ្ក្តូវបស្នែម្និម្ិតត ញ្ញ្ dot ( . )
ម្ួយសទ្ៀតសដើម្្បីឱ្យ JavaScript ដឹ្ថាវាម្ិនស្ម្នជាស ខស្ដ សៅសក្កាយសរ្បៀ សទ្ ស្តសបើសយើ្អត់សក្បើ
សនាេះ JavaScript នឹ្គិតថាវាជាស ខសក្កាយសរ្បៀ សដ្យស្រស្តស ខសក្កាយសរ្បៀ ម្ិនអាចជា
អរ្សរបានសទ្ដូចសនេះវានឹ្ return error ក្ត ប់ម្រវិញ។ ទ្នទឹម្នឹ្សនេះសយើ្រ៏អាចសក្បើវ្់ក្រចរជំនួ
(2945289).toString(36);។
២.៣ Rounding
Rounding ( ប្គត់ ) គឺជា math operations ស្ដ សយើ្សក្បើញឹរញាប់ជា្សគ។

built-in functions ក្មាប់ rounding មានដូចជា៖

• Math.floor
ប្គត់ចុេះ៖ 3.1 សៅជា 3, -2.2 សៅជា -3
• Math.ceil
ប្គត់ស ើ្៖ 3.1 សៅជា 4, -2.2 សៅជា -2
• Math.round
ប្គត់សៅខា្ស ខស្ដ ជិតបំ្ុត៖ 3.1, 3.2, 3.3, 3.4 សៅជា 3។
3.5, 3.6, 3.7, 3.8, 3.9 សៅជា 4 ។
• Math.trunc
ុបស ខសក្កាយសរ្បៀ សចា ទំ្្អ ់៖
3.1 សៅជា 3
3.6 សៅជា 3
-2.8 សៅជា -2
ក្បមាណវិធីខា្គឺ អខាល្ំ្ណ្ ់ ក្មាប់ការប្គត់េីស ខមានសរ្បៀ សៅជាស ខអត់សរ្បៀ ។

បុស្នតក្ប ិនសបើសយើ្ច្់ប្គត់ស ខសក្កាយសរ្បៀ សក្ចើនខទ្់ឱ្យ ់ស្តម្ួយខទ្់ ឬរ៏េីរខទ្់ ឬរ៏បីខទ្់វិញ?
ឧទហរណ៍ម្ួយរនុ្ចំសណ្ម្ក្បមាណវិធីខា្ស ើ៖
console.log(Math.round(2.3834)); //2
សៅសេ ស្ដ សយើ្សក្បើ Math.round គឺវាប្គត់ស ខសក្កាយសរ្បៀ ទំ្្អ ់។

ឥ ូវសយើ្សម្ើ េីវិធីស្ញ្ច តប្គត់សដ្យសក្បើ toFixed() វិញម្ត្៖
console.log((2.3854).toFixed(2)); //2.39
ឧទហរណ៍ខា្ស ើសយើ្សក្បើ toFixed(2) សដើម្្បីយរស្តេីរខទ្់សក្កាយសរ្បៀ បុសណ្្្េះ។

សៅសេ ស្ដ សយើ្សក្បើ toFixed(),
វាសធែកា
ើ រកាត់យរចំនួនខទ្់ស្ដ សយើ្ច្់បានសហើយប្គត់ខទ្់សនាេះាម្វិធី ស្ដ ក្ សដៀ្សៅនឹ្
Math.round ស្ដរ។

២.៤ Imprecise calculations

សយើ្បានដឹ្សហើយថាដ្ទខា្រនុ្រប ់ numbers គឺតំណ្្សដ្យ 64-bit format IEEE-
754, ដូសចនេះវាេិតជាមាន 64 bits ក្មាប់្ទុរស ខ។ រនុ្ចំសណ្ម្ 64 សនាេះ 52 គឺក្តូវបាន្ទុរតដម្ល
ជាស ខ, 11 ក្តូវបាន្ទុរទ្ីាំ្រប ់តដម្លសក្កាយសរ្បៀ និ្ 1 ចុ្សក្កាយ ក្មាប់ ញ្ញ្ ( sign )។
ក្ប ិនសបើស ខសនាេះធំសេរស ើ ការរំណត់ ( 64-bit storage ) រប ់វា, វានឹ្កាល្យសៅជា
infinity។
console.log(1e400); // infinity
ចំណ្ំ៖ (0.1 + 0.2) ម្ិនស មើនឹ្ 0.3 សទ្, សដ្យស្រស្ត number ក្តូវបាន្ទុរសៅរនុ្ memory
ជាទ្ក្ម្្់ binary ( 1 និ្ 0 )។ សៅរនុ្ក្បេ័នធ binary number, ្ ស្ចរ 1/10 ទ្ធ្ ស ខ
សក្កាយសរ្បៀ គឺគា្នទ្ីបញ្េប់ ដូសចនេះគា្្នវិធីស្ញ្ច តណ្ស្ដ ធានាថាអាច្ទុរតដម្ល 0.1 គឺ 0.1 និ្ 0.2
គឺ 0.2 សៅរនុ្ក្បេ័នធ binary number សទ្។
console.log(0.1 + 0.2 == 0.3) // false;
console.log(0.3); // 0.3
console.log(0.1 + 0.2 ); // 0.30000000000000004
សយើ្អាចសក្បើ toFixed() សដើម្្បីសដ្េះក្ស្យបញ្ហ្សនេះបាន បុស្នតក្តូវចាំថាតដម្លស្ដ returns េី

toFixed() គឺជា String។
let sum = 0.1 + 0.2;
sum = sum.toFixed(2);
console.log(sum); // "0.30"
console.log(typeof sum) // string
ក្ប ិនសយើ្ច្់បស្ម្ល្តដម្លសនាេះសៅជា Number វិញសយើ្អាចសក្បើ unary operator +

sum = +sum;
console.log(sum); // 0.3
console.log(typeof sum); // number
២.៥ Tests: isFinite និង isNaN

សៅរនុ្ភាស្ JavaScript មាន special numeric values េីរ៖
• Infinity និ្ -Infinity គឺជា special numeric value ស្ដ តដម្លទំ្្សនេះតំណ្្ឱ្យ
តដម្លស្ដ ធំជា្ ឬតូចជា្ស ខស្ដ បានរំណត់សៅរនុ្ភាស្ JavaScript។
• NaN ( not a number ) គឺតំណ្្ឱ្យតដម្លស្ដ ម្ិនស្ម្នជាស ខ។ សតើអែីសៅជាតដម្ល
ស្ដ ម្ិនស្ម្នជាស ខ?
console.log("Hey" * 10); // NaN

Infinity និ្ NaN គឺ ត

ែិ សៅរនុ្ក្បសភទ្ number, បុស្នតវាម្ិនស្ម្នជាក្បសភទ្ number
ធម្មាសទ្ដូចសនេះសហើយបានជាវាមាន special functions សដើម្្បីេិនិត្យសម្ើ ថាសតើតដម្ល
ណ្ស្ដ ែិតសៅរនុ្ក្បសភទ្ដូចវា។
• isNaN(value) បស្ម្ល្តដម្លស្ដ ែិតរនុ្វ្់ក្រចររប ់វាសៅជា number សហើយសធែើការ
េិនិត្យសម្ើ ថាសតើតដម្លសនាេះជាក្បសភទ្ NaN ឬសទ្
console.log(isNaN("hey")); // true
console.log(isNaN(NaN)); // true
console.log(isNaN(10)); // false
• isFinite(value) បស្ម្ល្តដម្លស្ដ ែិតរនុ្វ្់ក្រចររប ់វាសៅជា number សហើយ

returns ម្ិនេិត ( false ) ក្ប ិនសបើតដម្លសនាេះជា NaN/Infinity/-Infinity និ្
returns េិត ( true ) សបើតដម្លសនាេះជាក្បសភទ្ស ខ ( regular numbers )។
console.log(isFinite(-Infinity)); // false
console.log(isFinite(NaN)); // false
console.log(isFinite(10)); // true
២.៦ parseInt និង parseFloat

សៅសេ ស្ដ សយើ្េ្ាយម្បស្ម្ល្តដម្លអែីម្ួយសៅជាស ខសដ្យសក្បើក្បា ់ unary operator +
ឬ built-in function Number() តដម្លសនាេះនឹ្កាល្យជា NaN ក្ប ិនសបើបស្ម្ល្សៅបរាជ័យ។
const a = "20px";
const b = "100rem";
console.log("Unary +: ", +a); //NaN

console.log("Number(): ", Number(b)); //NaN
ឧទហរណ៍ទ្ី១សដ្យសក្បើ parseInt និ្ parseFloat៖

const a = "20px";
const b = "100rem";
console.log("parseInt: ", parseInt(a)); //20

console.log("parseFloat: ", parseFloat(b)); //100
const num1 = " 12.345+";
console.log("parseInt: ", parseInt(num1)); //12

console.log("parseFloat: ", parseFloat(num1)); //12.345
ជាទ្ូសៅអនរ រស ររូដសេញនិយម្សក្បើ parseFloat ជា្ parseInt សដ្យស្រស្ត

parseFloat returns ស ខមានសរ្បៀ ឬរ៏គា្នសរ្បៀ អាក្ ័យស ើតដម្លសដើម្រប ់វា បុស្នត parseInt
ម្ិនដូសចាន្េះសទ្។

ឧទហរណ៍ទ្ី៣៖
const num2 = "id245";
console.log("parseInt: ", parseInt(num2)); //NaN

console.log("parseFloat: ", parseFloat(num2)); //NaN
ក្មាប់ functions ទំ្្េីរខា្ស ,ើ េួរវារ៏មានស្ដនរំណត់ដនការសធែើការរប ់វាស្ដរ។

ក្ប ិនសបើវាចាប់ស្តើម្ដំសណើរការសហើយជួបនិម្ិតត ញ្ញ្ (ឧ.ទ្ @ ! *…) ឬរ៏អរ្សរ(a-z)
សនាេះវានឹ្បញ្េប់ ដំសណើរការសហើយ returns NaN។
ឧទហរណ៍ទ្ី៤ ចំនុចេិស រប ់ parseInt៖

const white = "0xff";
console.log(parseInt(white, 16)); //255

console.log(parseInt("ff", 16)); //255
console.log(parseInt("2n9c", 36)); //123456
parseInt មាន parameters ទ្ីេីរស្ដ អាចឱ្យសយើ្បស្ម្ល្តដម្លស្ដ សៅរនុ្ parameter

ទ្ី១សៅជាតដម្លសៅរនុ្សគា ១០រនុ្ក្បេ័នធ numeral។
២.៧ Other math functions

• Math.random() គឺជាការចាប់យរតដម្លណ្ម្ួយរនុ្ចសនាល្េះេី 0.1 ដ ់ 0.9។
console.log(Math.random()); //0.6676144999946243
console.log(Math.random()); //0.9066768157566805
ស ើ េីសនេះសយើ្រ៏អាចស្រស្ក្ប default behavior រប ់វាបានស្ដរ។

ឧទហរណ៍សយើ្ច្់បានេីចសនាល្េះ1 – 10៖
console.log(Math.random() * 10 + 1);
ក្ប ិនសបើសយើ្អត់សក្បើ + 1 វានឹ្ចាប់យរេី 0 – 10។
• Math.pow(n, power)
n គឺជាស ខ ( natural number ) រើឯ power គឺជា ែ័យគុណ។
console.log(Math.pow(2, 5)); //32

• Math.max(num1, num2, num3…) / Math.min(num1, num2, num3…)

• Math.max returns តដម្លស្ដ ធំជា្សគ
let num1 = 20;
let num2 = -100;
let num3 = 3;
console.log(Math.max(num1, num2, num3)); // 20
• Math.min returns តដម្លស្ដ តូចជា្សគ

let num1 = 20;
let num2 = -100;
let num3 = 3;
let num4 = 100;
console.log(Math.min(num1, num2, num3, num4)); // -100
លំហាត់
ចូរបស្កើត JavaScript function ម្ួយសដើម្្បីេិនិត្យសម្ើ ថាសតើ តដម្លស្ដ បានសបាេះសៅាម្រយៈ
parameter រប ់ function សនាេះជា natural number ឬម្ិនស្ម្ន។
ចំណ្ំ៖ Natural numbers គឺជាស ខស្ដ ចាប់េី 0 ស ើ្សៅ 0, 1, 2, 3, 4 …។
isNaturalNumber(-15); // not a natural number
isNaturalNumber(20.8); // not a natural number
isNaturalNumber(15); // yes, it is a natural number

៣. Strings
សៅរនុ្ភាស្ JavaScript, ទ្ិននន័យជា text ក្តូវបាន្ទុរសៅរនុ្ memory ជាក្បសភទ្
strings។ ទ្ក្ម្្់ដ្ទខា្រនុ្រប ់ strings គឺ UTF-16។
៣.១ Quotes
Strings គឺក្តូវបានសកា្្ប ្ខា្សដ្យ single quotes, double quotes ឬ backticks។
let single = 'single-quoted';
let double = "double-quoted";
let backticks = `backticks`;

single quotes និ្ double quotes គឺសយើ្សក្បើ ក្មាប់សកា្្ប strings ដូចសៅនឹ្ backticks
ស្ដរ។ បុស្នត backticks មានភាេរ ់រសវើរជា្ ( flexibility )។
let shoes = 24;
let bag = 100;
console.log(`
Shoes' price: ${shoes}
Bag's price: ${bag}
Total: ${shoes + bag}
`);
ភាេបត់ស្បនរប ់ backticks គឺសយើ្អាចចុេះបនាទ្ត់បុនា្នជួររ៏បាន, ស ើ េីសនេះសយើ្អាច
សៅអញ្ញតតិស្្ស្ម្រសក្បើរ៏បានសហើយអញ្ញតតិទំ្្សនាេះម្ិនថា functions, objects, array ។ ។
ុទ្ធស្តអាចសក្បើបានទំ្្អ ់ ម្្ា្្សទ្ៀតទ្ក្ម្្់ស្បបសនេះ “ `${…}` ” ក្តូវបានសគឱ្យសឈា្្េះថា template
string។
៣.២ Special characters

ក្ប ិនសបើសយើ្ចុេះបនាទ្ប់សៅរនុ្ single quotes ឬ double quotes ក្បារដជាមាន error។
console.log("
apple
banana
"); // error
សយើ្អាចសក្បើ “ newline character (\n) ” សដើម្្បីសធែើការចុេះបនាទ្ត់។

console.log("banana\napple\nmango"); // banana
// apple
// mongo

ខា្សក្កាម្សនេះគឺជាារា្ special characters៖
ឧទហរណ៍ backslash \ ៖
console.log('I\'m a student.'); // I'm a student
console.log(`Backslash: \\`); // Backslash: \
សៅរនុ្ string សយើ្សក្បើ backslash (\) សដើម្្បី escape character។ ឧទហរណ៍ខា្ស ើ
ក្ប ិនសបើសយើ្ម្ិនសក្បើ backslash (\) “I\’m a student” នឹ្ម្ិនក្តូវបានបងាហ្ញស ើផ្ទ្ំ្ console
សទ្េីសក្ េះសយើ្បានសក្បើ single quotes សដើម្្បីសកា្្ប string ដូចសនេះសយើ្ម្ិនអាចសក្បើ single quotes
សៅរនុ្ single quotes បានសទ្ក្ប ិនជាសយើ្ចាំ្បាច់សក្បើ សយើ្ក្តូវសក្បើ backslash (\) សដើម្្បីឱ្យ
JavaScript engine ដឹ្ថា single quotes ស្ដ សៅខា្រនុ្គឺម្ិនស្ម្នចុ្បញ្េប់ដន string
រប ់សយើ្សទ្។ សដ្យស្រស្តសៅរនុ្ string អត់មាន backslash (\) សទ្ក្ប ិនសបើសយើ្ច្់សក្បើវា
សៅរនុ្ string សយើ្ក្តូវស្តសក្បើវា ទួន (\\)។
៣.៣ String length

Length គឺជា property រប ់ string។
const flower = "sun flower";
console.log(flower.length); // 10
សៅសេ ស្ដ សយើ្សក្បើ length property គឺវារាប់តួអរ្សរនីម្ួយៗរួម្ទំ្ white space

ស្ដ មានសៅរនុ្ string សហើយបូរបញ្េូ គាន្បនាទ្បម្
់ រ returns ទ្ធ្ ។

៣.៤ Accessing characters

សដើម្្បីទញយរតួអរ្សរនីម្ួយៗសៅរនុ្ string បានសយើ្សក្បើ square brackets ( [ ] ) ឬសក្បើ
method str.charAt(postion)។
console.log(flower[0]); // s
console.log(flower.charAt(0)); // s
console.log(flower[flower.length - 1]); // r
ភាេខុ គាន្ស្តម្ួយគត់រវា្ square brackets និ្ charAt គឺ៖

• charAt returns empty string (“ ”) ក្ប ិនសបើទ្ីាំ្ដនតួអរ្សរស្ដ សយើ្ access
សនាេះម្ិនមាន
• square brackets returns undefined ក្ប ិនសបើទ្ីាំ្ដនតួអរ្សរស្ដ សយើ្ access
សនាេះម្ិនមាន
console.log(flower[12]); // undefined
console.log(flower.charAt(12)); // empty string ""
ស ើ េីសនេះសយើ្អាចសក្បើ for…of សដើម្្បី loop បងាហញ

្ តួអរ្សរនីម្ួយៗរប ់ string។
for (let char of flower) {

console.log(char); //s u n (white_space) f l o w e r
}
៣.៥ Strings are immutable

តួអរ្សរនីម្ួយៗរប ់ string ម្ិនអាចផ្ល្ ់បតូរបានសទ្។
let cat = "meow";
console.log(cat); // meow
cat[0] = "M"; // error: cannot assign to read

// only property '0' of string 'meow'
ដំសណ្េះក្ស្យគឺ assign តដម្លងមីទំ្្អ ់៖

let cat = "meow";
console.log(cat); // meow
cat = "Meow";
console.log(cat); // Meow

៣.៦ Changing the case

Methods “ toLowerCase() ” និ្ “ toUpperCase() ” គឺផ្ល្ ់បតូរអរ្សរតូចសៅធំ និ្េីធំ
ម្រតូច។
let dog = "Ah Dam";
console.log(dog.toLowerCase()); // ah dam
console.log(dog.toUpperCase()); // AH DAM
console.log(dog[dog.length-1].toUpperCase()); // M
៣.៧ Searching for a substring

សដើម្្បីស្ ែ្ររ substring សៅរនុ្ string គឺសយើ្អាចសធែើបានាម្សក្ចើនវិធី។
• str.indexOf(substring, position)
ដំសណើរការ indexOf គឺចាប់ស្តើម្ររ substring សៅរនុ្ string េីទ្ីាំ្្ (position)
ស្ដ សយើ្បាន្ត ់ឱ្យ ក្ប ិនសបើសយើ្អត់បាន្ត ់ position ឱ្យវាសទ្គឺវាររេីទ្ីាំ្្
ដំបូ្សៅរនុ្ string បនាទប
្ ់ម្រសបើវាររស ើញ វានឹ្ returns ទ្ីាំ្្រប ់ substring
សនាេះ បុស្នតសបើររម្ិនស ើញសទ្វានឹ្ returns -1។
let sentence = "There are many dog in the fields.";
console.log(sentence.indexOf("are")); // 6
console.log(sentence.indexOf("re")); // 3
console.log(sentence.indexOf("re", 5)); // 7 (start from index 5)
• str.lastIndexOf(substring, position)
ដំសណើរការ lastIndexOf គឺបញ្ចញ្រ្ េី indexOf គឺវាសធែើការស្ ែ្ររេីទ្ីាំ្្ចុ្បំ្ុត
ដន string ម្រវិញ។
let phrase = "as soon as";
console.log(phrase.indexOf("as")); // 0
console.log(phrase.lastIndexOf("as")); // 8
• includes returns េិតឬម្ិនេិតអាក្ ័យថាសតើ substring សនាេះមានសៅរន្

ុ string
ឬសទ្
console.log(phrase.includes("soon")); // true
console.log(phrase.includes("sky")); // false

• startsWith returns េិត ឬម្ិនេិតអាក្ ័យថាសតើ substring សនាេះេិតជាចាប់

ស្តើម្ដំបូ្សៅរនុ្ string ស្ម្នឬសទ្
console.log(phrase.startsWith("soon")); // false
console.log(phrase.startsWith("As")); // false
console.log(phrase.startsWith("as")); // true
• ចំស្នរឯ endsWith គឺបញ្ចញ្រ្ សៅនឹ្ startsWith

let phrase = "more pain more gain";
console.log(phrase.endsWith("more")); // false
console.log(phrase.endsWith("gain")); // true
៣.៨ Getting a substring

សៅរនុ្ភាស្ JavaScript សយើ្អាចទញយរ substring េី string បានាម្បីរសបៀប៖
• str.slice(start [, end])
* [ ] មានន័យថាអាចមានឬអាចអត់ (optional)
slice returns តដម្លម្ួយស្្នររប ់ string អាចចាប់េីស្្នរដំបូ្រប ់ string សៅរហូត
ស ើរស្ ្ស្តស្្នរចុ្សក្កាយ។
let fruit = "pineapple";
console.log(fruit.slice(0, 4)); //pine

console.log(fruit.slice(0, 1)); //p
console.log(fruit.slice(4)); //apple (start from index 4)
សៅសេ សយើ្សក្បើស ខអវិជជមានសៅរនុ្វ្់ក្រចររប ់ slice គឺវាជារាប់េីខា្ស្្្ំម្រវិញ។

ឧទហរណ៍ខា្សក្កាម្គឺសយើ្ចាប់ស្តើម្េីទ្ីាំ្្ទ្ី៣រាប់េីស្្ំរហូតដ ់ទ្ីាំ្្ទ្ី១រាប់េីស្្ំ។
console.log(fruit.slice(-3, -1)); //pl
• str.substring(start [, end])
substring returns តដម្លម្ួយស្្នររប ់ string េីចសនាល្េះរវា្ start និ្ end។ វាក្ សដៀ្
សៅនឹ្ slice ស្ដរបុស្នត substring អាចឱ្យសយើ្សក្បើតដម្ល start ធំជា្ end។ បុស្នតសយើ្ម្ិនសក្បើ
ស ខអវិជជមានដូចសៅរនុ្ slice បានសទ្។
console.log(fruit.substring(3, 9)); //eapple
console.log(fruit.substring(9, 3)); //eapple
console.log(fruit.slice(3, 9)); //eapple

console.log(fruit.slice(9, 3)); //empty string ""

• str.substr(start [, length])
substr returns តដម្លម្ួយស្្នររប ់ string ចាប់េី start សៅ, ជាម្ួយនឹ្ length
ស្ដ សយើ្បាន្ត ់ឱ្យ។ វាខុ េី methods េីរខា្ស ើ, សៅរនុ្ substr គឺសយើ្អាចសក្បើ
second parameter (length) សដើម្្បីរំណត់ចំនួនតួអរ្សរស្ដ សយើ្ច្់បាន។
console.log(fruit.substr(0, 4)); //pine

console.log(fruit.substr(0, 7)); //pineapp
សយើ្អាចសក្បើស ខអវិជជមានសៅរនុ្ parameter ទ្ី១ (start), សហើយវានឹ្សធែើការរាប់េី

ខា្ តំំាម្រវិញសហើយរាប់បនតសៅខា្ស្្្ំសទ្ៀត៖
console.log(fruit.substr(-5, 5)); //pine
ារា្ ស្ខប ក្មាប់ Methods ទំ្្បីខា្ស ើ៖
៣.៩ Comparing strings

សៅរនុ្សម្សរៀន Comparisons, សយើ្បានដឹ្រួចសហើយថា strings ក្តូវបានសក្បៀបសធៀបាម្
តួអរ្សរនិ្តួអរ្សរ (character-by-character) ាម្ ំដ្ប់អរ្សរ។ Characters ក្តូវបាន
សក្បៀបសធៀបសដ្យ numeric codes ស្ដ តំណ្្ឱ្យអរ្សរទំ្សនាេះ។ Numeric code រប ់ a គឺ 97
ស្ដ វាធំជា្ numeric code រប ់ Z គឺ 90។
console.log("a" > "Z") //true;
console.log("a" > "z") //false;
សដើម្្បីអាចដឹ្ numeric codes រប ់អរ្សរនីម្ួយៗសយើ្អាចសក្បើ

str.codePointAt(position) និ្ String.fromCodePoint(code) សដើម្្បីអាចដឹ្ថា code
ហនឹ្តំណ្្ឱ្យអរ្សរអែី។
console.log("b".codePointAt(0)); // 98
console.log(String.fromCodePoint(97)); // a


ារា្ ASCII៖
លំហាត់
ចូរបស្កើត JavaScript function ម្ួយស្ដ parameter រប ់វាគឺជាក្បសភទ្ string

សហើយសៅរនុ្ string សនាេះមានអរ្សរតូចនិ្ធំ ក្ប ិនសបើអរ្សរតូចសយើ្បស្ម្ល្វាសៅជាធំសបើមានអរ្សរធំ
សយើ្បស្ម្ល្វាសៅជាអរ្សរតូចវិញ។
ឧទហរណ៍៖ swapCaseSensitive(“BaNaNa”); // ទ្ធ្ គឺ “bAnAnA”

៤. Arrays
សយើ្អាចសក្បើ Array សដើម្្បី្ទុរទ្ិននន័យាម្ ំដ្ប់, ឧទហរណ៍៖ ទ្ី១ ទ្ី២ ទ្ី៣ ទ្ី៤ ។ ។
Array គឺជា special data structure ម្ួយស្ដ សយើ្អាច្ទុរទ្ិននន័យបានសក្ចើនក្បសភទ្និ្ាម្
ំដ្ប់ ំសដ្យ។
៤.១ ការគបកាស្ Declaration

ការក្បកា array អាចសធែើសៅបាន២រសបៀប៖
let bag = new Array(); // array constructor (new Array())
let cart = []; // literal array ([])
ការក្បកា array រ៏ម្ិនខុ េីការក្បកា object ស្ដរសទ្គឺអនរ រស ររូដចូ ចិតតសក្បើរសបៀប

ទ្ីេីរជា្ ( [ ] )។
let cart = ["shoes", "shirt", "pants"];
console.log(cart[0]); // shoes
console.log(cart[1]); // shirt
console.log(cart[2]); // pants
ផ្ល្ ់បតូរតដម្លរប ់ធាតុ ( element ) សៅរនុ្ array “cart” ាម្រយៈ index

cart[2] = "skirts";
console.log(cart[2]); // skirts
បស្នែម្ធាតុងមី ( new element ) សៅរនុ្ array “cart”

cart[3] = "earrings";
console.log(cart[3]); // earrings
រុបធាតុទំ្អ ់សៅរនុ្ array

console.log(cart); // [ 'shoes', 'shirt', 'skirts', 'earrings' ]
console.log(cart.length); // 4
ចំណ្ំ៖ ធាតុ ( element ) នីម្ួយៗសៅរនុ្ array ខណឌស្ចរសដ្យ comma “ , ” សហើយ

ធាតុដំបូ្ស មើនឹ្ index ( 0 ) ធាតុទ្ី២ស មើនឹ្ index ( 1 ) ធាតុទ្ី៣ស មើនឹ្ index ( 2 ) ស្បបសនេះ
រហូតដ ់ធាតុចុ្សក្កាយស មើនឹ្ ( arr.length – 1 )។
console.log(cart[cart.length-1]); // earrings

៤.២ Methods pop, push, shift, unshift

Queue គឺជាវិធីស្ញ្ច ម្
ត ួយរនុ្ចំសណ្ម្វិធីស្ញ្ច តជាសក្ចើន ស្ដ សយើ្សក្បើសៅរនុ្ array។
Queue គឺជា ំដ្ប់ដនធាតុស្ដ សយើ្រុញបញ្េូ ( push ) និ្ទញសចញម្រវិញ ( shift )។
Queue ក្តូវបានសគស្គ្ ់ថាជា FIFO ( First-InFirst-Out ),

ស្ដ ទ្ិននន័យចូ ទ្ី១សចញទ្ី១ ចូ ទ្ី២សចញទ្ី២ ចូ ទ្ី៣សចញទ្ី៣ ។ ។
ចំស្នរឯ Stack វិញគឺខុ េី Queue, Stack ឬ LIFO ( Last-In-First-Out ),
ស្ដ ទ្ិននន័យ ចូ ចុ្សក្កាយសគសចញម្ុនសគ។
សៅរនុ្ភាស្ JavaScript, array អាចសក្បើតិចនិចទំ្្េីរខា្ស ើបានសដើម្្បីបញ្េូ ទ្ិនននយ

័
និ្ទញសចញម្រវិញ។

• Methods ស្ដ សធែើការសៅខា្ចុ្ array

o pop ទញទ្ិននន័យសចញេី array សហើយ returns ទ្ិននន័យសនាេះ
console.log(cart.pop()); // pants
console.log(cart); // [ 'shoes', 'shirt' ]
o push រុញទ្ិននន័យបញ្េូ សៅរនុ្ array

console.log(cart); // [ 'shoes', 'shirt', 'pants' ]

cart.push("earrings");
console.log(cart); // [ 'shoes', 'shirt', 'pants', 'earrings' ]
• Methods ស្ដ សធែើការសៅខា្សដើម្ array

o shift ទញទ្ិននន័យដំបូ្សចញេី array សហើយ returns ទ្ិននន័យសនាេះ
console.log(cart.shift()); // shoes
console.log(cart); // [ 'shirt', 'pants' ]
o unshift បញ្េូ ទ្ិននន័យសៅរនុ្ array ក្ត្់ទ្ីាំ្្ដំបូ្ប្អ ់

cart.unshift("earrings");
console.log(cart); // [ 'earrings', 'shoes', 'shirt', 'pants' ]

៤.៣ Performance
រនុ្ចំសណ្ម្ methods ទំ្្បួនខា្ស ើ, methods push/pop ដំសណើរការស ឿន។ ចំស្នរឯ
methods shift/unshift ដំសណើរការយឺត។
សហតុ្ ស្ដ methods ស្ដ សធែើការសៅខា្ចុ្ array ដំសណើរការស ឿនជា្ methods

ស្ដ សធែើការសៅខា្សដើម្ array។
cart.shift();
method shift ម្ិនក្តឹម្ស្ត ុបធាតុស្ដ សៅក្ត្់ index 0 សទ្ស្ងម្ទំ្្ក្តូវរំរិ ធាតុស្ដ សៅ
់ម្រខា្ស្ែ្សទ្ៀត។
shift operation ក្តូវសធែើបីដំណ្រ់កា ៖
1. ុបធាតុក្ត្់ index 0
2. រំរិ ធាតុស្ដ សៅ ់ម្រខា្ស្ែ្ និ្បតូរស ខ index ឱ្យក្តឹម្ក្តូវាម្ទ្ីាំ្្នីម្ួយៗ
3. Update array “cart” length
ដំសណើរការស្បបសនេះសបើធាតុសៅរនុ្ array មានតិចនឹ្ម្ិនមានបញ្ហ្សចាទ្សទ្ បុស្នតសបើធាតុសៅរនុ្

array មានសៅដ ់រយឬរ៏ដ ់ ន់វិញសនាេះនឹ្ក្តូវចំណ្យសេ សក្ចើន។ ក្មាប់ unshift វិញរ៏ដូច
គាន្ស្ដរសៅសេ ស្ដ រុញធាតុចូ សៅរនុ្ array សហើយ វាក្តូវរំរិ ធាតុ និ្ទ្ីាំ្ index នីម្ួយៗសៅ
ខា្ តំំាឱ្យបានក្តឹម្ក្តូវាម្ទ្ីាំ្ងមីរប ់ធាតុទំ្្សនាេះ។

ឧទហរណ៍ pop ៖
cart.pop();
ឧទហរណ៍ខា្ស ើសយើ្ស ើញសហើយថា method pop ម្ិនចាំបាច់រំរិ ទ្ីា្

ំ ធាតុនិ្ index
ណ្ម្ួយសទ្គឺវាក្គាន់ស្ត ុបធាតុស្ដ សៅចុ្សក្កាយសគសហើយ update length រប ់ array
ស្តបុសណ្្្េះ។ ចំស្នរឯ push រ៏ម្ិនខុ គាន្ស្ដរ គឺវាក្គាន់ស្តបញ្េូ ធាតុសៅខា្ចុ្ប្អ ់ដន array
បនាទ្ប់ម្រ update length។
៤.៤ Loops: for…in / for…of

សៅសេ ស្ដ សយើ្សក្បើ for…in និ្ for…of ជាម្ួយ array សយើក្តូវដឹ្ថា for…of access
ធាតុនីម្ួយៗស្ដ មានសៅរនុ្ array ចំស្នរឯ for…in access index នីម្ួយៗរប ់ array។
for (let key of cart) {

console.log(key); //shoes shirt pants
}
for (let key in cart) {

console.log(key); // 0 1 2
}
* ជាទ្ូសៅសគសក្បើ for…in ជាម្ួយនឹ្ object, for…of សក្បើជាម្ួយ array។
៤.៥ new Array()

សយើ្ដឹ្សហើយថាការក្បកា array មានេីររសបៀបគឺ array literal ( [ ] ) និ្ array
constructor ( new Array() )។ សយើ្បានដឹ្សក្ចើនសហើយអំេីការសក្បើក្បា ់ array literal
ឥ ូវសយើ្ម្រសម្ើ េីការក្បកា array constructor ម្ត្។
let arr1 = new Array("10", "20", "30", "40");

console.log(arr1); // [ '10', '20', '30', '40' ]

ក្ប ិនសបើ parameter សៅរនុ្វ្់ក្រចរគឺជាស ខសនាេះវានឹ្បស្កើត array ស្ដ ម្ិនមានធាតុ

បុស្នតមាន length សហើយ length សនាេះអាក្ ័យស ើ parameter ស្ដ ជាតដម្លស ខសនាេះ។
ស ើ េីសនេះសបើសយើ្ access ធាតុនីម្ួយៗាម្រយៈ index ទ្ធ្ ស្ដ ទ្ទ្ួ បានគឺ undefined។
let arr1 = new Array(4);
console.log(arr1.length); // 4
console.log(arr1[0]); // undefined
៤.៦ Multidimensional arrays

ធាតុស្ដ សៅរនុ្ array អាចមានសក្ចើនក្បសភទ្, ស្តសបើធាតុសនាេះជា array សយើ្សៅវាថាជា
array សក្ចើនវិមាក្ត។
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1
៤.៧ toString
សៅរនុ្ភាស្ JavaScript, សយើ្អាចបស្ម្ល្ array ឱ្យសៅជា string បានសដ្យសក្បើក្បា ់
method toString ។
let arr1 = [1, 2, 3, 4];
console.log(arr1); // [ 1, 2, 3, 4 ]
console.log(arr1.toString()); // 1,2,3,4
console.log(arr1.toString() == '1,2,3,4'); // true
arr1 = arr1.toString();
console.log(typeof arr1); // string
សៅសេ សយើ្សក្បើ square brackets ( [ ] ) ជាម្ួយនឹ្ unary + ទ្ធ្ គឺស មើនឹ្ string។
console.log([] + 1); // 1
console.log([1] + 1); // 11
console.log([1, 2] + 1); // 1, 21

លំហាត់
ចូរបស្កើត JavaScript function ស្ដ មាន parameter ម្ួយស្ដ តដម្លរប ់ parameter
សនាេះគឺជា array ដន integer។ សៅរនុ្ function សនាេះសយើ្សធែើការ loop ធាតុនីម្ួយៗស្ដ មាន
សៅរនុ្ array បនាទ្ប់ម្របូរបញ្េូ គាន្, ចុ្សក្កាយ returns ទ្ធ្ ស្ដ បានេី្ បូរសនាេះ។
let arrayOfNumbers = [1, 8, 29, 2, -4];
sum(arrayOfNumbers); // 36

៥. Array methods
សដ្យស្រស្តសៅរនុ្ភាស្ JavaScript មាន array methods សក្ចើនដូចសនេះសៅរនុ្សម្សរៀន
សនេះសយើ្នឹ្ស្ប្ស្ចរវាជាបីចំនុចធំៗ។
៥.១ Add និង Remove ធាតុ (element)

ក្មាប់ pop/push និ្ shift/unshift សយើ្បានសរៀនរួចសហើយដូចសនេះសៅរនុ្ចំនុចសនេះសយើ្
នឹ្ម្ិនស ើរម្រនិយយម្ត្សទ្ៀតសទ្។
• splice គឺជា method ស្ដ អាចសធែើបានសក្ចើនម្ុខងារដូចជា ុប, បស្នែម្, និ្ជំនួ ធាតុ
សៅរនុ្ array។
Syntax រប ់ splice៖
arr.splice(start[, deleteCount,] [element1, element2, ...]);
start ចាប់ស្តើម្េី index ទ្ី…, deleteCount ចំនួនស្ដ ក្តូវ ុប, element1, element2
ធាតុស្ដ ក្តូវបស្នែម្ឬជំនួ ។
បញ្ជ្រ់ម្ត្សទ្ៀត៖ [ ] មានន័យថាមានរ៏បានអត់រ៏បាន ( optional )។
o ុប Delete
let fruits = ["apple", "banana", "grape", "pineapple"];
fruits.splice(2, 2); // from index 2 remove 2 element

console.log(fruits); // [ 'apple', 'banana']
let fruits = ["apple", "banana", "grape", "pineapple"];
fruits.splice(1); // remove all after index 1 element

console.log(fruits); // [ 'apple']
o បស្នែម្ Add
let fruits = ["apple", "banana", "grape"];
fruits.splice(2, 0, "mango"); // at index 2 add 1 more element

console.log(fruits); // [ 'apple', 'banana', 'mango', 'grape']

fruits.splice(-1, 0, "durian", "papaya"); // after first element from

// the right add 2 element.
console.log(fruits); // ['apple', 'banana', 'durian', 'papaya',
// 'grape' ].
o ជំនួ ( Replace )
fruits.splice(2, 1, "durian"); //replace the last element with

// "durian".
console.log(fruits); // [ 'apple', 'banana', 'durian' ]
fruits.splice(0, 2, "mango", "rambutan"); // replace the first and

// second element with
// "mango" and "rambutan".
console.log(fruits); // [ 'mango', 'rambutan', 'grape' ]
• slice គឺជា method ស្ដ returns array ងមីស្ដ បានម្រេីការចម្ល្េី start ដ ់ end (
បុស្នតម្ិនរាប់បញ្េូ ទំ្ end សទ្ )។
Syntax រប ់ slice៖
arr.slice([start], [end]);
let copyFruits = fruits.slice(0, 2);
console.log("Original: ", fruits); // [ 'apple', 'banana', 'grape' ]

console.log("Copy: ", copyFruits); // [ 'apple', 'banana' ]
ឧទហរណ៍ទ្ី២ សដ្យគា្ន
្ end ៖
let copyFruits = fruits.slice(0);

console.log("Copy: ", copyFruits); // [ 'apple', 'banana', 'grape' ]

ឧទហរណ៍ទ្ី៣ សដ្យគា្ន
្ start និ្ end ៖
let copyFruits = fruits.slice();

console.log("Copy: ", copyFruits); // [ 'apple', 'banana', 'grape' ]
• concat គឺជា method ក្មាប់បស្កើត array ងមម្

ី ួយស្ដ បានម្រេីការបញ្េូ គាន្រវា្ធាតុ
រប ់ array ជាសក្ចើននិ្ធាតុស្្ស្សទ្ៀត ( ស្ដ ម្ិនស្ម្នជាធាតុរប ់ array )។
Syntax រប ់ concat៖
arr.concat(argument1, argument2...)
let num1 = [10, 20];
let num2 = [30, 40];
let num3 = num1.concat(num2, 5);
console.log("num3: ", num3); // [ 10, 20, 30, 40, 5 ]
let num = [1, 2].concat([3, 4, 5]);
console.log("num: ", num); // [ 1, 2, 3, 4, 5 ]
• Iterate : forEach គឺជា method ក្មាប់ដំសណើរការ function call រា ់ធាតុទំ្្អ ់

ស្ដ មាន សៅរនុ្ array។
Syntax រប ់ forEach៖
arr.forEach(function(element, index, array) {
// do something with element
});
let sizes = [28, 29, 30, 31, 32, 33];
sizes.forEach(function(ele, i, arr) {
console.log(Èlement(${ele}) at Index(${i}) of array sizes (${arr})`);
// Element(28) at Index(0) of array sizes [28,29,30,31,32,33]
});

៥.២ Searching in array

សៅរនុ្ចំនុច ៣.៧ searching for a substring សយើ្បានស្គ្ ់េី indexOf/lastIndexOf/
និ្ includes សដ្យ methods ទំ្អ ់សនេះសយើ្សក្បើ ក្មាប់ស្ ែ្ររ substring សៅរនុ្ string។
ស ើ េីសនេះសយើ្រ៏អាចសក្បើេួរវាជាម្ួយ array បានស្ដរ។
• indexOf, lastIndexOf, និ្ includes
o arr.indexOf(element, from) ស្ ែ្ររ element េី index ( from ) សហើយ
returns index រប ់ element សនាេះ, បុស្នតសបើវាររម្ិនស ើញសទ្នឹ្ returns -1។
o arr.lastIndexOf(element, from) ដំសណើរការដូច indexOf ស្ដរ,
បុស្នតវាចាប់ស្តើម្េី ស្្្ំម្រស្ែ្។
o arr.includes(element, from) ស្ ែ្ររ element េី index ( from ) សហើយ
returns េិតសបើវាររស ើញ, ម្ិនដូសចាន្េះសទ្ returns ម្ិនេិត។
let user = { name: "Foo" };
let diverseData = ["hello", 20, false, user];
console.log(diverseData.indexOf("hello")); // 0
console.log(diverseData.indexOf("hello", 1)); // -1 because it starts from
// index 1
console.log(diverseData.lastIndexOf(user)); // 3
console.log(diverseData.lastIndexOf(user, diverseData.length - 2)); // -1
console.log(diverseData.includes(20)); // true
console.log(diverseData.includes(20, 2)); // false

• find និ្ find index

find returns ធាតុស្ដ សយើ្ស្ ែ្ររក្ប ិនសបើធាតុសនាេះមានសៅរនុ្ array, សបើអត់មានសទ្
វានឹ្ returns undefined។ ចំស្នរឯ findIndex returns index រប ់ធាតុក្ប ិនសបើ
វាមាន, សបើម្ិនមានសទ្វា returns -1។
Syntax រប ់ find៖
arr.find(function (element, index, array) {
// ...do something
});
ឧទហរណ៍ find ៖
let getObject = diverseData.find(function (element, index, array) {

if (typeof element === "object") {
return element;
}
});
console.log(getObject); // { name: 'Foo' }
Syntax រប ់ findIndex៖
arr.findIndex(function (element, index, array) {
// ...do something
});
ឧទហរណ៍ findIndex ៖
let getIndex = diverseData.findIndex(function (element, index, array) {

if (typeof element === "boolean") {
return index;
}
});
console.log(getIndex); // 2
• filter

filter គឺជាការសក្ចាេះយរធាតុេី array។

Syntax រប ់ filter៖
arr.filter(function(element, index, array) {
// ... do something
});
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumber = num.filter(function(ele, i, arr) {

return ele % 2 == 0;
});
console.log(evenNumber); // [ 2, 4, 6, 8, 10 ]
៥.៣ Transform an array

Methods ទំ្្បុនា្នខា្សក្កាម្សនេះគឺជា methods ស្ដ នឹ្ផ្ល្ ់បតូរទ្ក្ម្្់សដើម្រប ់ធាតុ
និ្ ំដ្ប់រប ់ធាតុនីម្ួយៗរប ់ array។
• map
let num = [1, 2, 3, 4, 5];
let doubleEachElement = num.map(function(ele, i, arr) {

return ele * 2;
});
console.log(doubleEachElement); // [ 2, 4, 6, 8, 10 ]
ជាទ្ូសៅសៅសេ ស្ដ សយើ្សក្បើ array method សយើ្ក្តូវការស្តម្ួយ parameter

សៅរនុ្ function call រប ់ method សនាេះបុសណ្្្េះ។
let doubleEachElement = num.map(function(ele) { //only one param(ele)

return ele * 2;
});

ស ើ េីសនេះក្ប ិនសបើ body សៅរនុ្ function call សនាេះមានស្តម្ួយជួរសទ្សយើ្អាច រស រ

ជាទ្ក្ម្្់ខលីបានសដ្យសក្បើក្បា ់ arrow function ៖
let num = [1, 2, 3, 4, 5];
let doubleEachElement = num.map((ele) => ele * 2);
console.log(doubleEachElement); // [ 2, 4, 6, 8, 10 ]
• sort()
Method sort គឺក្តូវបានសក្បើ ក្មាប់តសក្ម្ៀបធាតុាម្ ំដ្ប់សរើនឬងយ។
let num = [1, 2 , 15];
console.log(num.sort()); // [ 1, 15, 2 ]
ឧទហរណ៍ខា្ស ើបនាទ្បេ
់ ី sort សហើយសយើ្ស ើញថាស ខស្ដ ក្តូវាម្ ំដ្ប់
ស្ក្បសៅជាម្ិនក្តូវាម្ ំដ្ប់វិញ។ ម្ូ សហតុសដ្យស្រស្តសៅសេ សធែើការសក្បៀបសធៀប
sort បានបស្ម្ល្ធាតុទំ្្សនាេះសៅជា string, សហតុដច
ូ សនេះសហើយបានជា “2” > “15”។
console.log("2".codePointAt(0)); // 50
console.log("15".codePointAt(0)); // 49
សដើម្្បីឱ្យ sort ដំសណើរការបានក្តឹម្ក្តូវសយើ្ក្តូវសក្បើ helper function ៖

1. ក្ប ិនសបើ return ធំជា្ 0 មានន័យថា a ធំជា្ b ដូចសនេះ b ក្តូវសៅម្ុខ a
2. ក្ប ិនសបើ return តូចជា្ 0 មានន័យថា a តូចជា្ b ដូចសនេះ a ក្តូវសៅម្ុខ b
3. ក្ប ិនសបើ return ស មើ 0 មានន័យថា a និ្ b បុនគាន្ ដូចសនេះ a និ្ b ររ្ារស្នល្
សរៀ្ខលួនដស្ដ
let num = [1, 2 , 15];
console.log(num.sort(compare)); // [ 1, 2, 15 ]
function compare(a, b) { // helper function

if(a > b) return 1;
if(a < b) return -1;
return 0;
}
ក្ប ិនសបើសយើ្ម្ិនច្់សក្បើ helper function សទ្សយើ្អាចសក្បើ arrow function៖

let num = [1, 2 , 15];
console.log(num.sort((a, b) => a - b)); // [ 1, 2, 15 ]

console.log(num.sort((a, b) => b - a)); // [ 15, 2, 1 ]

• reverse()
Reverse បញ្ចញ្រ្ ំដ្ប់ចា ់។
let num = [1, 2, 3, 4, 5];
console.log(num.reverse()); // [ 5, 4, 3, 2, 1 ]
Split សក្បើ ក្មាប់បំស្បរ string សៅជា array ៖

const greeting = "Hello, sir!";
// split by comma "," and white space
console.log(greeting.split(", ")); // [ 'Hello', 'sir!' ]
const who = "you me";

// split by white space
console.log(who.split(" ")); // [ 'you', 'me' ]
const flower = "rose";

//split by default
console.log(flower.split("")); // [ 'r', 'o', 's', 'e' ]
console.log(flower.split``); // [ 'r', 'o', 's', 'e' ]
const whQuestions = "who-where-what-which-when-why";

//split by hyphen "-"
console.log(whQuestions.split("-")); // [ 'who', 'where', 'what',
// 'which', 'when', 'why' ]
Join គឺ្ទុយេី split, វាបញ្េូ ធាតុរប ់ array ចូ គាន្រួចបស្ម្ល្សៅជា string ៖

const num = [1, 2, 3, 4];
console.log(num.join``); //1234
console.log(num.join("")); //1234
// join together with hyphen "-"

console.log(num.join("-")); // 1-2-3-4
// join together with symbol @

console.log(num.join("@")); // 1@2@3@4

• reduce និ្ reductRight

Method reduce គឺសក្បើសដើម្្បីគណនាររតដម្លរួម្ម្ួយ។
Syntax រប ់ reduce ៖
let result = arr.reduce(function (accumulator, item, index, array) {
// ...do something
}, [initial value]);
o accumulator - គឺជា ទ្ធ្ ស្ដ បានម្រេី previous function call

o item - ធាតុនីម្ួយៗរប ់ array
o index - ជាទ្ីាំ្រប ់ធាតុ
o array - the original array
o initial value - ក្ប ិនសបើមាន initial value, accumulator ស មើនឹ្ initial
value សបើម្ិនដូសចាន្េះសទ្វាស មើនឹ្ធាតុទ្ី១រប ់ array
ឧទហរណ៍ reduce ជាម្ួយនឹ្ initial value៖

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce(function (multiple, current) {

return multiple * current;
}, 1);
console.log(result); // 120

ឧទហរណ៍ reduce និ្ reduceRight សដ្យគា្្ន initial value ៖
let arr = [1, 2, 3, 4, 5];
let result1 = arr.reduce(function (minus, current) {

return minus - current;
});
console.log(result1); // -13
let result2 = arr.reduceRight(function (minus, current) {

return minus - current;
});
console.log(result2); // -5

៥.៤ Array.isArray
សដ្យស្រស្តសៅរនុ្ភាស្ JavaScript, array, function, object ុទ្ធស្ត based on object
ទំ្្អ ់។ ដូចសនេះក្ប ិនសបើសយើ្សក្បើ typeof សដើម្្បីេិនិត្យសម្ើ ក្បសភទ្រប ់ array សនាេះ ទ្ធ្ គឺ
object។
let arr = [1, 2, 3, 4, 5];
console.log(typeof arr); // object
សដើម្្បីច្់ដឹ្ច្ា ់ថាអញ្ញតតិហនឹ្ជាក្បសភទ្ array ឬម្ិនស្ម្នសយើ្អាចសក្បើ Array.isArray()។

let arr = [1, 2, 3, 4, 5];
let user = {
name: "Sokha"
};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(user)); // false
ស ចរតី ស្ខបរួម្៖
• សដើម្្បី add និ្ remove element៖
• push(...items) – បស្នែម្ items ខា្ចុ្ប្អ ់ដន array
• pop() – ុប item ខា្ចុ្ប្អ ់ដន array
• shift() – ុប item ខា្សដើម្ដំបូ្ដន array
• unshift(...items) – បស្នែម្ items ខា្សដើម្ដំបូ្ដន array
• splice(pos, deleteCount, ...items) – ក្ត្់ទ្ីា្
ំ រប ់ index, ុបចំនួនធាតុ
(items or elements), សហើយជំនួ សដ្យធាតុងមី
• slice(start, end) – បស្កើត array ងមីម្ួយសដ្យចម្ល្ធាតុរប ់ array សដើម្ាំ្្េី
start រហូតដ ់ end (ម្ិនរាប់បញ្េូ ទំ្្ end សទ្)
• concat(...items) – returns array ងមីម្ួយសដ្យចម្ល្ធាតុរប ់ array
ម្ួយឬរ៏សក្ចើន បញ្េូ គាន្និ្ទ្ិនន័យស្ដ ម្ិនស្ម្នជាធាតុរប ់ array
រ៏អាចរួម្បញ្េូ បានស្ដរ
• សដើម្្បី search among elements៖

• indexOf និ្ lastIndexOf(item, pos) – ររសម្ើ item ចាប់េីទ្ីាំ្ pos
ស្ដ បាន្ត ់ឱ្យរួច return index ដន item សនាេះ ឬ return -1 សបើររម្ិនស ើញ
• includes(value) – returns េិតក្ប ិនសបើ array សនាេះមាន value ស្ដ សៅរនុ្
វ្់ក្រចររប ់ includes, សបើម្ិនដូសចាន្េះសទ្ return ម្ិនេិត

• find និ្ filter(func) – filter សក្ចាេះយរធាតុាម្រយៈការ return េី function

call, ចំស្នរឯ find return ធាតុស្ដ មានសៅរនុ្ array ឬរ៏ undefined
ក្ប ិនសបើម្ិនមាន
• findIndex ដូចសៅនឹ្ find ស្ដរ, បុស្នតវា return index ជំនួ សដ្យធាតុរប ់ index
• សដើម្្បី loop element នីម្យ

ួ ៗ៖
• forEach(func) – call សៅ function call ក្គប់ធាតុទំ្្អ ,់ បុស្នតវាម្ិនមាន
return សទ្
• សដើម្្បីបស្ម្ល្ array ៖
• map(func) – បស្កើត array ងមីម្ួយស្ដ បានេីការ return ដន function call
រា ់ធាតុនីម្ួយៗ
• sort(func) – តសក្ម្ៀបធាតុាម្ ំដ្ប់សហើយ return ធាតុទំ្្សនាេះ
• reverse() – បញ្ចញ្រ្ ដ្
ំ ប់ធាតុសៅរនុ្ array សហើយ return ធាតុទំ្្សនាេះ
• split/join – បស្ម្ល្ string សៅជា array និ្បស្ម្ល្ array សៅជា string
• reduce/reduceRight(func, initial) – គណនាររ ទ្ធ្ ម្ួយស្ដ ទ្ធ្ សនាេះ
បានម្រេីធាតុនីម្ួយៗដន array គណនាបញ្េូ គាន្
• ចំនុចគួរយ ់ដឹ្ ៖
• Array.isArray(arr) េិនិត្យសម្ើ arr ជាក្បសភទ្ array ឬម្ិនស្ម្ន
• សៅសេ ស្ដ សយើ្សក្បើ methods sort, reverse និ្ splice, ទ្ក្ម្្់សដើម្ដន array
ក្តូវបានផ្ល្ ់បតូរ។

លំហាត់
ចូរបស្កើត JavaScript function ម្ួយសដើម្្បីតសក្ម្ៀបធាតុរប ់ array ាម្ ំដ្ប់សរើន
ឬងយអាក្ ័យស ើ parameter ទ្ី២, សបើ param ទ្ី២ ស មើនឹ្ “descending” ដ្
ំ ប់ដន array
ក្តូវតសក្ម្ៀបាម្ ំដ្ប់េីស ើចុេះសក្កាម្, សបើ param ទ្ី២ ស មើនឹ្ “ascending” ដ្
ំ ប់ដន array
ក្តូវតសក្ម្ៀបាម្ ំដ្ប់េីសក្កាម្ស ើ្ស ើ។
const nums = [ 43, 56, 23, 89, 88, 90, 99, 652];
sortNums(nums, "descending"); // [ 652, 99, 90, 89, 88, 56, 43, 23 ]

sortNums(nums, "ascending"); // [ 23, 43, 56, 88, 89, 90, 99, 652 ]

៦. Destructuring Assignment
សៅរនុ្ភាស្ JavaScript, array និ្ object ជាក្បសភទ្ទ្ិននន័យស្ដ សយើ្ស ើញសគសក្បើក្បា ់
ញឹរញាប់ជា្សគ។ សេ ខលេះតដម្លរប ់ argument ស្ដ សយើ្សបាេះសៅឱ្យ function ាម្រយៈ
parameter ជាស្្នរម្ួយដន object ឬ array ស្តម្ិនស្ម្នជា object ឬ array ទំ្្ម្ូ សទ្។
Destructuring assignment គឺជា special syntax ស្ដ សយើ្អាចបស្ម្ល្ធាតុរប ់ object
និ្ array ជា ំណំអញ្ញតតិស្ដ សេ ខលេះវាមានភាេងាយក្ ួ ក្មាប់សយើ្យរសៅសធែើការស្្ស្ៗ។
ក្ប ិនសបើ function ម្ួយមាន params សក្ចើន ឬរ៏ params ទំ្្សនាេះមាន default values
សក្ចើនរសញរដញ, សយើ្អាចសក្បើ Destructuring សដើម្្បី ក្ម្ួ វាឱ្យមានងាយក្ ួ ។
៦.១ Array destructuring

រសបៀបបស្ម្ល្ ( destructure ) array ជា ំណំអញ្ញតតិ៖
const fruits = ["apple", "banana", "mango"];
const [apple, banana, mango] = fruits;
console.log(apple); // apple
console.log(banana); // banana
console.log(mango); // mango
ក្ប ិនសបើសយើ្ម្ិនច្់បានធាតុណ្ម្ួយសយើ្ក្គាន់ស្តទ្ុរចសនាល្េះឱ្យសៅទ្សទ្រវា្ comma “ , ”

និ្ comma។
const fruits = ["apple", "banana", "mango"];
const [apple, , mango] = fruits; // we don’t want banana
សយើ្សៅអាចសក្បើ split ជាម្ួយ string សហើយបស្ម្ល្វាសដើម្្បីបានជា ំណំអញ្ញតតិ៖

const fruits = "apple,banana,mango";
const [apple, banana, mango] = fruits.split(",");
console.log(banana); // banana

ស ើ េីសនេះសយើ្អាចបស្ម្ល្ string សៅជា ំណំអញ្ញតតិបានស្ងម្សទ្ៀត៖

const nums = "1234";
const [num1, , num3, num4] = nums;
console.log(num1); // 1
េិស ជា្សនេះគឺសយើ្អាច switch តដម្លរវា្អញ្ញតនិ្អញ្ញតតិសដ្យសក្បើរូដស្តម្ួយជួរបុសណ្្្េះ៖

let num1 = 10;
let num2 = 20;
let num3 = 30;
console.log(`num1: ${num1}; num2: ${num2}; num3: ${num3}`);

// num1: 10; num2: 20; num3: 30
[num3, num1, num2] = [num1, num2, num3];
console.log(`num1: ${num1}; num2: ${num2}; num3: ${num3}`);

// num1: 20; num2: 30; num3: 10
▪ The rest ( three dots “ … ” )

ក្ប ិនសបើ array ម្ួយមានធាតុសក្ចើន សហើយសយើ្ច្់បស្ម្ល្វាសៅជាអញ្ញតតិក្តឹម្ស្តេីរ
ឬបីបុសណ្្្េះសយើ្អាចសក្បើ the rest “ … ”។ សៅសេ ស្ដ សយើ្សក្បើ “ … ” ធាតុស្ដ សៅ
់ទំ្្បុនា្ននឹ្ធាល្រ់សៅរនុ្អញ្ញតតិសនាេះ។
const books = ["Absalom, Absalom!", "A time to kill", "East of Eden", "The
sun also rises"];
const [title1, title2, ...titles] = books;
console.log("Title1: ", title1); // Title1: Absalom, Absalom!

console.log("Title2: ", title2); // Title2: A time to kill
console.log("Titles: ", titles); // Titles: [ 'East of Eden', 'The sun
// also rises' ]

▪ Default values
ក្ប ិនសបើធាតុស្ដ សៅរនុ្ array តិចជា្អញ្ញតិតស្ដ សយើ្ច្់បានសនាេះេុំមាន error សទ្បុស្នត
តដម្លរប ់អញ្ញតតិសនាេះស មើនឹ្ undefined។
const books = ["Absalom, Absalom!", "A time to kill"];
const [title1, title2, title3] = books;

console.log("Title3: ", title3); // Title3: undefined
ដូចសនេះសយើ្អាចសក្បើ default values សដើម្្បីសជៀ វា្តដម្លរប ់អញ្ញតតិស មើនឹ្ undefined។

ក្តូវចាំ្ថា default value ក្តូវបាន assign សៅឱ្យអញ្ញតិត ុេះក្ាស្តអញ្ញតតិសនាេះម្ិនទន់មាន
តដម្ល។
const books = ["Absalom, Absalom!", "A time to kill"];
const [title1, title2 = "Pale fire", title3 = "Brave new world"] = books;

console.log("Title3: ", title3); // Title3: Brave new world
៦.២ Object destructuring

Object destructuring រ៏ម្ិនខុ េី array destructuring សទ្, អែីស្ដ ខុ គាន្គឺ syntax
និ្សឈា្្េះរប ់អញ្ញតតិ។ សៅសេ ស្ដ សយើ្សក្បើ object destructuring, ណ
ំ ំអញ្ញតតិស្ដ សយើ្ច្់
បស្ម្ល្េី object ក្តូវស្តមានសឈា្្េះដូចសៅនឹ្ properties រប ់ object សនាេះ។
▪ Array destructuring - let [var1, var2] = arr;
▪ Obect destructuring - let {var1, var2} = obj;
const user = {
firstname: "Joe",
lastname: "Biden"
};
const { lastname, firstname } = user;
const { a, b } = user;
console.log(a); // undefined
console.log(b); // undefined
console.log(firstname); // Joe
console.log(lastname); // Biden

const { title, author, published } = {
author: "Lois Lowry",
published: "May 2, 2011",
title: "Numbers the stars"
};
console.log(title); //Numbers the stars

console.log(author); // Lois Lowry
console.log(published); // May 2, 2011
ឧទហរណ៍ទ្ី៣ បតូរសឈា្្េះរប ់អញ្ញតតិ៖

const { title: t, author: a, published: p } = {
author: "Lois Lowry",
published: "May 2, 2011",
title: "Numbers the stars"
};
console.log(t); //Numbers the stars

console.log(a); // Lois Lowry
console.log(p); // May 2, 2011
▪ The rest pattern “ … ”

const user = {
name: "Kanha",
gender: "female",
age: 19,
dob: "19, 09, 2002"
};
const { name, ...rest } = user;

console.log(name); // Kanha
console.log(rest); // { gender: 'female', age: 19, dob: '19, 09, 2002' }
console.log(rest.dob); // 19, 09, 2002

៦.៣ Smart function parameters

សេ ខលេះ function រប ់សយើ្មាន parameter សក្ចើនស្ដ េិបារនឹ្សបាេះតដម្លសៅ ឱ្យក្តូវ
ាម្ ំដ្ប់។ សេ ខលេះសទ្ៀត parameter ស្ដ មាន default value ក្ស្ប់ស្បរជាេិបារយ ់ថាជា
អែីសៅវិញសៅសេ ស្ដ call សៅ function ម្រសក្បើ។
ឧទហរណ៍ params សក្ចើន៖
function getUserInfo(name, age, gender, dob, pob) {
// do something
};
getUserInfo(12, "Chanty", "male", "12, 02, 1999", "Battambang");
ឧទហរណ៍ខា្ស ើសនេះសៅសេ ស្ដ សយើ្ call សៅ function ម្រសក្បើសហើយសបាេះតដម្លសៅឱ្យវា,

សេ ខលេះសយើ្អាចនឹ្ក្ច ំដូចឧទហរណ៍ខា្ស ស្ើ ដរ ក្ប ិនសបើដូសចនេះស្ម្នសនាេះតដម្លរប ់ params
name និ្ age ម្ិនក្តឹម្ក្តូវសទ្សដ្យស្រស្តសយើ្សបាេះ argument ទ្ី១ “12” ម្ុន សនាេះ name
នឹ្ទ្ទ្ួ បានតដម្ល12សនេះ, ចំស្នរឯ age ស្បរជាទ្ទ្ួ បានតដម្ល “Chanty” សៅវិញ។
ឧទហរណ៍ params ស្ដ មាន default value ៖
function findTriangleArea (base, height = 10) {
return base * height * 0.5;
}
const result = findTriangleArea(8, undefined);

console.log("Result: ", result); // 40
ឧទហរណ៍ខា្ស ើ សយើ្គណនាររដ្ទក្រលាក្តីសកាណស្រ្ បុស្នតសៅសេ ស្ដ សយើ្សបាេះ

undefined សៅឱ្យអំ ុ្សេ call សៅ function, សធែើឱ្យអនរដដទ្ស្ដ សគម្រសម្ើ រូដរប ់សយើ្
េិបារយ ់ថាជាអែីសៅវិញ។
ជសក្ម្ើ ដ៏ អគឺសក្បើ destructuring ៖

const user = {
name: "Chanty",
age: 12,
gender: "male",
dob: "12, 02, 1999",
pob: "Battambang"
}
getUserInfo(user);
function getUserInfo({ dob, gender, name, age, pob}) {

console.log(name); // Chanty
console.log(age); // 12
console.log(gender); // male
console.log(dob); // 12, 09, 1999
console.log(pob); // Battambang

};
ងាយក្ ួ អានងាយក្ ួ យ ់៖
const options = {
base: 8,
};
const result = findTriangleArea(options);

function findTriangleArea ({base, height = 10}) {

return base * height * 0.5;
}
លំហាត់
ចូរបស្កើត JavaScript function ស្ដ មានសឈា្្េះថា restResluts និ្មាន parameter ម្ួយ
សហើយ argument ស្ដ សបាេះសៅឱ្យ param សនាេះក្តូវស្តជា array ។ បនាទ្បម្
់ រសៅរនុ្ restResults
ក្តូវ return object ម្ួយ, ស្ដ properties សៅរនុ្ object សនាេះមានដូចជា៖
o property ដំបូ្គឺជាធាតុដំបូ្រប ់ array
o property ទ្ី២គឺជាធាតុទ្ី២រប ់ array
o property ទ្ី៣គឺជាធាតុស្ដ សៅស ់ទំ្្អ ់រប ់ array

៧. Date និង time

សេ ខលេះរម្មវិធីស្ដ សយើ្ រស រក្តូវការបងាហ្ញេីសេ សវលា ឬរ៏ដងៃស្ខជាសដើម្។ សដើម្្បីសធែើដូចសនេះ
បានសយើ្ក្តូវសក្បើ Date, Date គឺជា built-in object សៅរនុ្ភាស្ JavaScript។ Date ្ទុរ date
និ្ time សហើយវាមាន methods ក្មាប់ក្គប់ក្គ្ date និ្ time។
៧.១ ការបមងកើត Creation

សដើម្្បីបស្កើត Date សយើ្ក្តូវសក្បើ Date constructor “new Date()”។
• new Date()
const today = new Date();
console.log(today); // 2021-10-28T08:34:38.411Z
• new Date(milliseconds)
const date = new Date(0);
console.log(date); // 1970-01-01T00:00:00.000Z
សៅសេ ស្ដ សយើ្បស្កើត Date សហើយសបាេះស ខ 0 ចូ , សនាេះគឺស មើនឹ្កា បរិសចេទ្
ដងៃទ្ី 1 ស្ខម្ររា ឆន្ំ 1970 ជាសេ សវលាចាប់ស្តើម្ ក្មាប់ Unix computer ឬរ៏ Unix
epoch។ ម្្ា្្សទ្ៀតស ខស្ដ តំណ្្ឱ្យ milliseconds ស្ដ សបាេះចូ សៅរនុ្
វ្់ក្រចររប ់ Date ក្តូវបានសគសៅថា timestamp ាំ្េីសេ សនាេះម្រ។
const aDayBefore = -24 * 3600 * 1000;
const date = new Date(aDayBefore);
• new Date(dateString)
const date = new Date("2019-12-12");
• new Date(year, month, date, hours, minutes, seconds, ms)

o year ក្តូវស្តមាន៤ស ខ៖ 2002
o month រាប់េី០(Jan) រហូតដ ់ 1(Dec)
1
o date គឺជាដងៃរនុ្១ស្ខ, សបើអត់មាន ស ខ1នឹ្ក្តូវយរម្រសក្បើ
o hours/minutes/seconds/ms សបើអត់មាន ស ខ០នឹ្ក្តូវយរម្រសក្បើ
const date = new Date(2002,08, 12, 0, 0, 0, 0);
const date1 = new Date(2002, 08, 12);
console.log(date1); // 2002-09-11T00:00:00.000Z
សដ្យស្រស្តការបងាហ្ញសមា្្សៅស ើមា្ ុីនរុំេ្យួទ្័រនិ្ IDE ខុ គានៗ
្ បានជាសយើ្
ទ្ទ្ួ បាន ទ្ធ្ “2002-09-11” ស្ដ ជាការេិតវាក្តូវ “20002-09-12”។

៧.២ Access date components

• getFullYear() return year with 4 digits
const date = new Date(2002, 08, 12);
console.log(date.getFullYear()); // 2002
• getMonth() return month េី 0 រហូតដ ់ 11

console.log(date.getMonth()); // 8
• getDate() return ដងៃទ្ី១ រហូតដ ់ ៣១

console.log(date.getDate()); // 12
• getDay() return ដងៃរនុ្ម្ួយ បា្្ហ៍ 0 (Sunday), 1 (Monday), … 6

(Saturday)
console.log(date.getDay()); // 6
• getTime() return timestamp

console.log(date.getTime()); // 1034355600000
• getHours, getMinutes, getSeconds, getMillisconds

const date = new Date(2002, 09, 12, 07, 32, 20);
console.log(date.getHours()); // 7
console.log(date.getMinutes()); // 32
console.log(date.getSeconds()); // 20
console.log(date.getMilliseconds()); // 0
៧.៣ Setting date components

សយើ្សក្បើ set components សដើម្្បីរំណត់ដងៃ ស្ខ ឆន្ំ ។ ។ សហើយវា return timestamp ស្ដ
តំណ្្ឱ្យសេ សវលាសនាេះគិតចាប់េី 01-01-1970។
• setFullYear(year, [month], [date])
const event = new Date(0);
console.log(event); // 1970-01-01T00:00:00.000Z
console.log(event.setFullYear(1969)); // -31536000000

• setMonth(month, [date])
console.log(event.setMonth(2)); // 5097600000
• setDate(date)
console.log(event.setDate(15)); // 1209600000
• setHours(hour, [min], [sec], [ms])

console.log(event.setHours(6)); // -3600000
• setMinutes(min, [sec], [ms])

console.log(event.setMinutes(30)); // 1800000
• setSeconds(sec, [ms])
console.log(event.setSeconds(50)); // 50000 1s = 1000ms =>

// 50 * 1000 = 50000
• setMilliseconds(ms)
console.log(event.setMilliseconds(500)); // 500
• setTime(milliseconds)


console.log(event.setMilliseconds(500)); // 500
៧.៤ បណម្ាង Date មៅជាមលខ

សយើ្អាចបស្ម្ល្ Date សៅជាស ខ ឬសៅថា timestamp បានាម្េីររសបៀប៖
• getTime()
const now = new Date();
console.log(now.getTime()); // 1635416813610
• unary operator +
console.log(+now); // 1635416813610
• រសបៀបដឹ្ថា Loop ម្ួយក្តូវចំណ្យសេ បុនា្នវិនាទ្ី

let start = new Date();
for (let i = 0; i < 1_000_000; i++) {

let total = 0;
total += i;
}
let end = new Date();
console.log(`The loop took ${end - start} ms.`);//The loop took 2 ms.
៧.៥ Date.now()
Date.now() គឺដូចសៅនឹ្ new Date().getTime() ស្ដរបុស្នតវាខលីជា្។ ម្ិនស្តបុសណ្្្េះ
ដំសណើរការដ្ទខា្រនុ្រប ់វារ៏ស ឿនជា្ស្ដរ, េីសក្ េះវាម្ិនចាំបាច់បស្កើត Date object សទ្។
សហើយជាទ្ូសៅសបើសគ រស រសហគម្ ឬបស្កើតរម្មវិធីអែីម្ួយ សហើយសគសផ្្្តស ើ performance,
Date.now() គឺក្តូវបានសក្បើសក្ចើនបំ្ុត។
console.log(now.getTime()); // 1635417456100
console.log(Date.now()); // 1635417456100

៨.JSON methods
JSON ( JavaScript Object Notation ) គឺជាទ្ក្ម្្់ម្ួយស្ដ តំណ្្ឱ្យតដម្ល (ទ្ិននន័យ)។
សយើ្សក្បើ JSON សដើម្្បីផ្ល្ ់បតូរទ្ិននន័យាម្ទ្ក្ម្្់ម្ួយស្ដ ទំ្្ Client-side (JavaScript) និ្
Server-side ( C#, PHP, NODEJS, RUBY, JAVA … ) អាចយ ់បាន។
អនរ រស ររូដស្ត្ស្តឱ្យនិយម្ន័យខលីម្ួយ ក្មាប់ JSON គឺ data exchange format។
let product = {
name: "iphone13pro",
price: 1600,
color: "blue",
};
alert(product); // [object object]
ឧទហរណ៍ខា្ស ើសយើ្ច្់បស្ម្ល្ object “product” សៅជា string សហើយសយើ្សក្បើ alert

សដើម្្បីបងាហ្ញ ទ្ធ្ ។ បុស្នត ទ្ធ្ ស្ដ ទ្ទ្ួ បានគឺ [object object] សៅវិញ, េីសក្ េះ alert
returns string ស្ដ តំណ្្ឱ្យ object “product” គឺ [object object]។ សដើម្្បីបស្ម្ល្វាសៅជា
string បានក្តឹម្ក្តូវសយើ្ក្តូវសក្បើ build-in method រប ់ object គឺ toString ។
let product = {
price: 1600,
color: "blue",
toString() {
return `{name: "${this.name}", price: ${this.price}, color: ${this.color}}`;
}
};
alert(product); // {name: "iphone13pro", price: 1600, color: blue}
បនាទ្ប់េីសក្បើ method toString ម្រសយើ្ស ើញថា ទ្ធ្ គឺបានដូចស្ដ សយើ្រំេឹ្ទ្ុរ។

បុស្នតការសក្បើក្បា ់ method toString ស្បបសនេះម្ិនស្ម្នជាគំនិតក្តឹម្ក្តូវឥតសខារ្េះសទ្សដ្យស្រស្តសយើ្
ក្តូវសៅ properties សៅរនុ្ object ម្រទំ្្អ ់ សបើខែេះ property ណ្ម្ួយសយើ្នឹ្ម្ិនទ្ទ្ួ បាន
ទ្ធ្ ដូចស្ដ រំេឹ្ទ្ុរសទ្។
toString() {
return `{name: "${this.name}", price: ${this.price}}`;
} // {name: "iphone13pro", price: 1600 }

សដើម្្បីទ្ទ្ួ បាន ទ្ធ្ ដូចស្ដ សយើ្រំេឹ្ទ្ុរ សហើយការ រស រខលីងាយក្ ួ និ្ម្ិនងាយ

ក្ច ំសយើ្គួរស្តសក្បើ method រប ់ JSON។
៨.១ JSON.stringify
Method រប ់ JSON មានេីរគឺ៖
• JSON.stringify ក្មាប់បស្ម្ល្ object សៅជាទ្ក្ម្្់ JSON
• JSON.parse ក្មាប់បស្ម្ល្ JSON ម្រ object វិញ។
ចំណ្ំ្៖
• ទ្ក្ម្្់ object
{
}
• ទ្ក្ម្្់ JSON៖ key/value ក្តូវស្តមាន double quotes សកា្្ប ្ខា្ដូចគាន្

{
"name": "iphone13pro",
}
ឧទហរណ៍ stringify៖
let product = {
price: 1600,
color: "blue",
};
alert(product); // [object Object]

// {"name":"iphone13pro","price":1600,"color":"blue"}
alert(JSON.stringify(product));
Method JSON.stringify យរ object “product” ជា parameter រប ់វា សហើយសធែើការ

បស្ម្ល្ product សៅជា string។ ទ្ធ្ ស្ដ បានម្រេី json string ក្តូវបានសគឱ្យសឈា្្េះថា៖
JSON-encoded, serialized, stringified, ឬរ៏ marshalled។
សៅរនុ្វ្់ក្រចររប ់ stringify ម្ិនស្ម្នក្តឹម្ស្តជាក្បសភទ្ object សទ្ វាអាចជា៖
• Arrays
• Primitives ៖
o strings
o numbers
o booleans
o null.

alert(JSON.stringify(false)); // false
alert(JSON.stringify("flower")); // "flower"
alert(JSON.stringify(10 + 20)); // 30
alert(JSON.stringify(["apple", "mango"])); // ["apple","mango"]
Method stringify នឹ្រំ ្ ( ignored ) properties រប ់ object ក្ប ន

ិ សបើ properties
សនាេះជាក្បសភទ្៖
• property ជាក្បសភទ្ function
• property ជាក្បសភទ្ Symbol
• property ជាក្បសភទ្ undefined
const id = Symbol("id");
const product = {
[id]: "T001",
name: "T-Shirt",
color: undefined,
price: 20,
qty: 2,
total() {
return this.price * this.qty;
}
};
alert(JSON.stringify(product)); // {"name":"T-Shirt","price":20,"qty":2}
សទេះបីជា stringify យ
អ ្្ណ្រ៏វាមានស្ដនរំណត់ស្ដរ, ក្តូវក្បារដថា object ម្ិនមាន
circular references សៅសេ សក្បើជាម្ួយ stringify, សបើម្ិនដូសចនេះសទ្នឹ្បស្កើតជា error។
const clothes = {
id: "0001",
createdAt: "Jul 10, 2021"
};
const shirt = {
color: "white"
};
shirt.category = clothes; // shirt reference to clothes

clothes.product = shirt; // clothes reference to shirt
alert(JSON.stringify(clothes));//TypeError: Converting circular structure to JSON

៨.២ JSON.parse
សដើម្្បប
ី តូរទ្ិននន័យេី JSON ម្រ object វិញសយើ្សក្បើក្បា ់ JSON.parse។
ទ្ក្ម្្់រប ់ JSON.parse ៖
JSON.parse(str, [, reviver])
• str គឺជា json string ស្ដ ក្តូវបស្ម្ល្
• reviver គឺជា function ស្ដ ក្តូវបានសៅរា ់ key/value pair សហើយសយើ្អាច
សធែើការបស្ម្ល្ value ទំ្្សនាេះបាន
ឧទហរណ៍ជាម្ួយ param ទ្ី១៖

const json = '{"one": 1, "two": 2, "three": 3}';
const afterParse = JSON.parse(json);
alert(afterParse.one); // 1
alert(afterParse.two); // 2
alert(afterParse.three); // 3
ឧទហរណ៍ជាម្ួយ param ទំ្្េីរ៖
const json = '{"one": 1, "two": 2, "three": 3}';
const doubleAfterParse = JSON.parse(json, function (key, value) {

return typeof value === 'number' ? value * 2 : value;
});
alert(doubleAfterParse.one); // 2
alert(doubleAfterParse.two); // 4
alert(doubleAfterParse.three); // 6
• JSON គឺជា data format exchange ស្ដ វាជា independent standard
language និ្អាចឱ្យភាស្ស្្ស្សទ្ៀតអាចសក្បើជាម្ួយវាបាន។
• JSON supports objects, arrays, strings, numbers, Booleans, និ្ null។
• JSON មានេីរ methods៖ JSON.stringify និ្ JSON.parse។

សម្សរៀនទ្ី៦ Advanced working with functions JavaScript
មម្មរៀនទី៦ Advanced working with functions
១. Recursion
Recursion គឺជា programming pattern ស្ដ ក្តូវបានសក្បើសៅសេ ស្ដ ការងារម្ួយគួរ
ស្តបំស្បរជាស្្នរតូចៗដូចគាន្សដើម្្បីងាយក្ ួ រនុ្ការសដ្េះក្ស្យបញ្ហ្។ សយើ្អាចសក្បើ recursive
function សដើម្្បីសដ្េះក្ស្យការងារជារ់លារ់ណ្ម្ួយសៅរនុ្ data structures បាន្្ស្ដរ។
សៅសេ ស្ដ function សដ្េះក្ស្យបញ្ហ្ម្ួយ សហើយសៅរនុ្ដំសណើរការរប ់វាអាច call
សៅខលួនវាបានសក្ចើនដ្, function សនាេះក្តូវបានសគសៅថា recursion។
១.១ Two ways thinking

ឥ ូវសយើ្ស ើរយរឧទហរណ៍ function power ម្រនិយយ, សដើម្្បីររ ទ្ធ្ ដន function
pow សយើ្អាចសធែើបានាម្េីររសបៀប៖
o សក្បើក្បា ់ for loop
const pow = (x, n) => {
let result = 1;
for (let i = 0; i < n; i++) {

result *= x;
}
return result;
};
console.log(pow(2, 3)); // 8
o សក្បើក្បា ់ recursion
const pow = (x, n) => {
if (n == 0) {
return 1;
}
return x * pow(x, n-1);

};

JavaScript សម្សរៀនទ្ី៦ Advanced working with functions
ដំសណើរការម្ុនដំបូ្ប្អ ់សៅរនុ្ function pow គឺេិនិត្យសម្ើ រខខណឌ n = = 0 (សៅថា

base recursion េីសក្ េះវា returns តដម្ល 1 ក្ប ិនសបើ រខខណឌេិត), បុស្នតសបើម្ិនេិតសទ្
គឺវាដំសណើរការ return x * pow(x, n – 1) ដស្ដ ៗរហូតដ ់ជួប រខខណឌេិត។
ដូចជាសយើ្ស ើញសៅរនុ្រូបភាេ សហើយ៖
x * pow(x, n – 1) = 2 * pow(2, 3-1) និ្ n = 2
x * pow(x, n – 1) = 2 * pow(2, 2-1) និ្ n = 1
x * pow(x, n – 1) = 2 * pow(2, 1-1) និ្ n = 0 => ជួប រខខណឌេិត returns 1
បនាទ្ប់ម្រសយើ្យរតដម្ល 1 គុណនឹ្ 2 * 2 * 2, សហតុ្ ស្ដ គុណនឹ្ 2 បីដ្េីសក្ េះសយើ្
រាប់ាម្ចំនួនស ខ 2 ស្ដ សយើ្បានរាយដូចខា្ស ើ។

១.២ Recursive traversals

ឥ ូវសយើ្ស្រក្ ដម្សម្ើ ក្ប ិនសបើសយើ្ច្់ររក្បារ់ស្ខ រុបរប ់បុគគ ិរទំ្្អ ់សៅរនុ្
ក្រុម្ហុនម្ួយ សដ្យសយ្សៅាម្ឧទហរណ៍ខា្សក្កាម្ សតើសយើ្គួរយរអែីម្រសក្បើ?
let company = {
sales: [{
name: 'John',
salary: 1000
}, {
name: 'Alice',
salary: 1600
}],
development: {
sites: [{
name: 'Peter',
salary: 2000
}, {
name: 'Alex',
salary: 1800
}],
internals: [{
name: 'Jack',
salary: 1300
}]
}
};
ក្ប ិនសបើសយើ្សក្បើ for loop សដើម្្បី loop ស ើ properties រប ់ company ដូចជា sales និ្
development ។ បុស្នតសៅរនុ្ development មាន properties ស្្ស្សទ្ៀតស្ដ តដម្លរប ់េួរវាជា
array ដូចសនេះសយើ្ក្តូវសក្បើក្បា ់ for loop ម្ួយរក្ម្ិត (ឬ រ្យម្ិន្លូវការបុស្នតក្ ួ ស្្្ប់គឺម្ួយត្់)
សទ្ៀត, ដូចសនេះសយើ្ក្តូវសក្បើ loop េីរត្់ ក្ប ិនសបើដងៃម្ុខមាន sub loop ម្ួយត្់ឬេីរត្់សទ្ៀតសៅរនុ្
properties ទំ្្សនាេះអ៊ីចឹ្សយើ្ក្តូវសក្បើក្បា ់ loop បីឬបួនត្់សដើម្្បីររក្បារ់ស្ខ រុបរប ់បុគគ ិរ
ទំ្្អ ់។ កា ណ្សយើ្សក្បើក្បា ់ loop ចាប់េី 3ត្់ស ើ្សៅវានឹ្បស្កើតជាភាេ មុគស្្្ញស្ដ
អនរ រស ររូដស្ត្ស្តសជៀ វា្ ដូចសនេះបានជាសគបស្កើត recursive traversals ម្រសដើម្្បី ក្ម្ួ េី
ការងារ មុគស្្្ញឱ្យមានភាេងាយក្ ួ ។

ឥ ូវសយើ្ម្រសម្ើ េីការសក្បើក្បា ់ recursive traversals៖

const totalSalaries = (company) => {
if (Array.isArray(company)) { // case (1)
return company.reduce((previous, current) => previous + current.salary, 0);
} else { // case (2)

let sum = 0;
for (let department of Object.values(company) ) {
sum += totalSalaries(department); // *
}
return sum;
}
};
console.log(totalSalaries(company)); // 2500
សៅរនុ្ function totalSalaries សយើ្េិនិត្យ properties នីម្ួយៗរប ់ company

សដ្យសក្បើក្បា ់ Array.isArray, ក្ប ិនសបើវាជា array សយើ្សក្បើក្បា ់ method reduce
សដើម្្បីគណនា្ បូរសហើយ returns ្ បូរសនាេះ បុស្នតក្ប ិនសបើវាម្ិនស្ម្នជា array សទ្គឹ
សយើ្បស្ម្ល្វាឱ្យសៅជា array សដ្យសក្បើក្បា ់ Object.values សហើយសយើ្ loop
ធាតុនីម្ួយៗសចញម្រសដ្យយរធាតុទំ្្សនាេះសបាេះសៅឱ្យ nested function call ក្ត្់ជួរ // *
សដើម្្បីឱ្យវាសធែើការដូចស្ដ បានសរៀបរាប់ខា្ស ើ // case (1) និ្ // case (2)
ម្ត្សហើយម្ត្សទ្ៀតរហូត ដ ់អ ់ធាតុ បនាទ្ប់ម្រ return ទ្ធ្ ស្ដ បាន្ទុរសៅរនុ្អញ្ញតតិ sum។
លំហាត់
ចូរបស្កើត JavaScript function ម្ួយសដើម្្បីគណនា factorial number ។ សៅរនុ្គណិតវិទ្្ា

factorial number គឺជាស ខវិជជមានស្ដ មាននិម្ិតត ញ្ញ្ ( ! ) សៅបញ្េប់េីសក្កាយវា ( Ex៖ 5! )
។
factorial (5); // 5*4*3*2*1 = 120
factorial (3); // 3*2*1 = 6

២. Rest parameters និង spread syntax

▪ Rest parameter ...
និម្ិតត ញ្ញ្រប ់ rest parameters គឺ dot បីដ្ ... ស្ដ សយើ្សក្បើវាសៅេីម្ុខ parameter,
បនាទ្ប់ម្រ parameter សនាេះនឹ្កាល្យជា array។
const displayFruits = (...fruits) => {
for (let fruit of fruits) {
console.log(fruit); // Mango, Durian, Blueberry
}
};
displayFruits("Mango", "Durian", "Blueberry");
const displayFruits = (mango, ...fruits) => {
console.log(mango); // Mango

console.log(fruit); // Durian, Blueberry
}
};

ឧទហរណ៍ខា្ស ើសយើ្សក្បើ parameter “mango” សដើម្្បីទ្ទ្ួ argument ទ្ី១ “Mango”,
បនាទ្ប់ម្រ ់បុនា្នសយើ្ទ្ុរសៅរនុ្ ...fruits “rest parameters” ។
ចំណ្ំ៖ rest parameter ក្តូវស្តសៅខា្ចុ្សគ

const displayFruits = (mango, ...fruits, grape) => {
console.log(mango);
console.log(grape);

console.log(fruit);
}
};
// SyntaxError: Rest parameter must be last formal parameter

displayFruits("Mango", "Durian", "Blueberry", "Strawberry", "Grape");

ការសក្បើក្បា ់ស្ដ ក្តឹម្ក្តូវ៖

const displayFruits = (mango, durian, ...fruits) => {
console.log(mango); // Mango
console.log(durian); // Durian

console.log(fruit); // Blueberry, Strawberry, Grape
}
};
displayFruits("Mango", "Durian", "Blueberry", "Strawberry", "Grape");
▪ The “argument” variable

សៅរនុ្ function មាន special array-like object ស្ដ មានសឈា្្េះថា arguments ស្ដ
្ទុរ arguments ទំ្្អ ់ ស្ដ បានសបាេះឱ្យ function ាម្រយៈ function call ។
function displayFruits() {
console.log(arguments); // { 0: "Mango",
// 1: "Durian"
// 2: "Blueberry"
// }
console.log(arguments.length); // 3
for (let fruit of arguments) {

console.log(fruit); // Mango, Durian, Blueberry
}
};
ចំណ្ំ៖ សយើ្សក្បើ special array-like object arguments បានស្តសៅរនុ្ regular functions សទ្,
ម្ិនអាចសក្បើវាសៅរនុ្ arrow functions បានសទ្េីសក្ េះ arrow functions អត់មាន arguments
និ្ this សទ្។
const displayFruits = () => {

console.log(arguments.length);
for (let fruit of arguments) {

console.log(fruit);
}
};
// ReferenceError: arguments is not defined

▪ Spread syntax
Spread syntax គឺសយើ្សក្បើវាដូចសៅនឹ្ការ loop ធាតុរប ់ array សចញម្រទំ្្អ ់អ៊ីចឹ្។

const num1 = [-9, 8, 4];
console.log(Math.max(num1)); // NaN
console.log(Math.max(num1[0], num1[1], num1[2])); // 8
ឧទហរណ៍ខា្ស ើសយើ្សក្បើ built-in Math.max សដើម្្បីស្ ែ្ររស ខស្ដ ធំជា្សគប្អ ់,

console.log ទ្ី១បងាហ្ញ ទ្ធ្ NaN េីសក្ េះស្តសៅរនុ្វ្់ក្រចររប ់ Math.max វាក្តូវការ list of
arguments ម្ិនស្ម្នជា array សទ្។ ចំស្នរឯ console.log ទ្ី២បងាហ្ញ ទ្ធ្ ក្តឹម្ក្តូវគឺ 8, រ៏បុស្នត
សេ ខលេះសយើ្អត់អាចដឹ្ម្ុនថា array ម្ួយហន្
ឹ មានបុនា្នធាតុសទ្ដូសចនេះការសក្បើក្បា ់ num1[0]
num1[1] ។ ។ រ៏ម្ិនស្ម្នជាដំសណ្េះក្ស្យ អស្ដរ។ ដំសណ្េះក្ស្យដ៏ អគឺសយើ្ក្តូវសក្បើ spread
syntax ។
const num1 = [-9, 8, 4];
console.log(Math.max(...num1)); // 8
console.log(Math.min(...num1)); // -9
ក្មាប់និម្ិតតិ ញ្ញ្ spread syntax ដូចសៅនឹ្ rest parameter ស្ដរ, បុស្នតម្ុខងាររប ់េួរវា
គឺបញ្ចញ្រ្ គាន្។ spread syntax សយើ្សក្បើ ក្មាប់បស្ម្ល្ array សៅជា list of arguments ចំស្នរឯ
rest parameter សយើ្សក្បើ ក្មាប់ទ្ទ្ួ យរ list of arguments សៅជា array វិញ។
• ( ... ) ក្ប ិនសបើវាសៅរនុ្ parameter រប ់ function វាជា rest parameter
• ( ... ) ក្ប ិនសបើវាសៅរនុ្ function call វាជា spread syntax

ឧទហរណ៍ទ្ី៣សដ្យសក្បើក្បា ់ spread syntax និ្ rest parameters ៖

const users = [
{
name: "Tida",
gender: "female"
},
{
name: "Sokha",
gender: "male"
},
{
name: "Kanha",
gender: "female"
}
];
const logUserInfo = (user, ...otherUsers) => {

console.log(user); // { name: 'Tida', gender: 'female' }
for (let user of otherUsers) {

//{ name: 'Sokha', gender: 'male' }
//{ name: 'Kanha', gender: 'female' }
console.log(user);
}
};
logUserInfo(...users);
លំហាត់
ចូរបស្កើត function ម្ួយស្ដ មានសឈា្្េះថា filterOutOdds ស្ដ function សនេះមានម្ុខងារ
ក្មាប់សក្ចាេះយរស្តស ខគូបុសណ្្្េះសដ្យសក្បើក្បា ់ array ដូចខា្សក្កាម្។ ម្ុននឹ្សបាេះ array
សនេះសៅឱ្យ filterOutOdds ក្តូវស្តបស្ម្ល្វាសៅជា spread syntax ិន។ ចំស្នរឯ parameter
ស្ដ ចាំទ្ទ្ួ តដម្លក្តូវស្តជា rest parameters។ បនាទ្ប់ម្រសៅរនុ្ filterOutOdds សធែើការបងាហញ
្
ស ខគូទំ្្សនាេះសៅស ើផ្្
ទ្ំ console បនាទ្ប់េីសក្ចាេះរួច។
const arrayOfNums = [1, 2, 22, 31, 3, 5, 8, 7, 90, 82];

៣. Variable scope
JavaScript គឺជា function-oriented language, មានន័យថា function អាចបស្កើតសេ
ណ្រ៏បាន, អាចសធែើជា argument ក្មាប់សបាេះឱ្យ functions ស្្ស្សទ្ៀតរ៏បាន, និ្អាចសៅសក្បើ
សៅសេ សក្កាយេីរស្នល្ស្្ស្បាន្្ស្ដរ។ សយើ្រ៏បានសរៀនរួចសហើយស្ដរ, function អាច access
អញ្ញតតិស្ដ សៅខា្សក្ៅ scope រប ់វាសហើយស្ងម្ទំ្្អាចស្រស្ក្បអញ្ញតតិទំ្្សនាេះបានសទ្ៀត្្។
ម្្ា្្វិញសទ្ៀតសៅរនុ្ function រ៏មាន scope រប វា
់ ស្ដរ។
៣.១ Block code

ក្ប ិនសបើអញ្ញតតិក្តូវបានក្បកា សៅរនុ្ block code { … } ម្ួយ, អញ្ញតតិសនាេះអាចសក្បើបាន
ស្តរនុ្ block code សនាេះបសុ ណ្្្េះ។
const a = 20;
console.log(a); // 20
{
const b = 10; // អាចសក្បើបានស្តរន្
ុ block code { ... } សនេះសទ្
console.log(b); // 20
}
const c = a + b; // ReferenceError: b is not defined
ក្ប ិនសបើសឈា្្េះអញ្ញតតិសៅខា្រនុ្ block code { … } ដូចសឈា្្េះអញ្ញតតិខា្សក្ៅគឺគា្នបញ្ហ្៖

const a = 20;
{
const a = 10; // អញ្ញតតិ a រនុ្សនេះ និ្ អញ្ញតតិ a សៅខា្សក្ៅគឺម្ិន រ់េន
័ ធគាន្សទ្
}
អញ្ញតតិស្ដ សៅរនុ្ block រប ់ if, else if, loop ។ ។ ដូចសៅនឹ្ block code ស្ដ គឺម្ិន
អាចសៅសក្បើសៅខា្សក្ៅ block រប ់វាបានសទ្។
for (let i = 0; i < 5; i++) {
let sum = 0;
sum += i;
}
console.log(sum); // ReferenceError: sum is not defined

៣.២ Nested functions

Nested functions គឺ functions រា ់ទំ្្ឡាយណ្ស្ដ ក្តូវបានបស្កើតសៅរនុ្ functions
function displayResult() {
const a = 10;
const b = 20;
function sum() { // nested function

return a + b;
}
console.log(sum()); // 30
}
displayResult();
function incrementByOne() {
let count = 1;
return function () { // function ស្ដ គា្្នសឈា្្េះក្តូវបានសគសៅថា anonymous function

return count++;
}
}
const counter = incrementByOne();
console.log(counter()); // 1

៤. The old “var”

Var គឺជា reserved word ម្ួយស្ដ សយើ្សក្បើដូចសៅនឹ្ let និ្ const ស្ដរ។ កា េី
version ES6 (2015) ម្ិនទន់សចញគឺមានស្ត var សទ្, បនាទ្ប់េីសចញ version ES6 ម្រសទ្ើបមាន
let និ្ const, ម្្ា្្សទ្ៀតការសក្បើក្បា ់ var
មាន រខណៈចំស្ របនតិចស្ដ ប្កឱ្យមាន ទ្ធ្ ស្ដ េិបារនឹ្ស្្្នទ្ុរជាម្ុន ដូចសនេះបានជា
var ម្ិន ូវមានអនរណ្យរម្រសក្បើរហូតដ ់សគដ្រ់ សឈា្្េះឱ្យវា The old var។
សៅរនុ្ចំនុចសនេះសយើ្នឹ្ ិរ្ាអំេី រខណៈចំស្ ររប ់ var។
៤.១ “var” has no block scope

ការក្បកា អញ្ញតតិសដ្យសក្បើក្បា ់ var គឺគា្ន block scope សទ្។
{
var cat = "Micky";
console.log(cat); // Micky
}
console.log(cat); //Micky
ឧទហរណ៍ដស្ដ សដ្យបតូរ var សៅ let ឬ const៖

{
let cat = "Micky";
console.log(cat); // Micky
}
console.log(cat); // ReferenceError: cat is not defined
ក្មាប់ loop វិញរ៏ដូចគាន្ var គា្្ន block scope សទ្៖

for (var i = 0; i < 5; i++) {
var j = 1;
}
console.log(j); // 1
console.log(i); // 5

សៅសេ ស្ដ សយើ្ក្បកា អញ្ញតតិសៅរនុ្វ្់ក្រចររប ់ for loop (var i = 0; i < 5; i++)

សដ្យសក្បើក្បា ់ var សនាេះអញ្ញតតិសនាេះគឺដូចសៅនឹ្ global variable ស្ដរ។
Global variable គឺជាអញ្ញតតិទំ្ឡាយណ្ស្ដ ម្ិន ែិតសៅរនុ្ block code { … }។
let i; // global variable
let j; // global variable
for (i = 0; i < 5; i++) {

j = 1;
}
console.log(j); // 1
console.log(i); // 5
ក្ប ិនសបើម្ិនក្បកា i ជា global variable សហើយសក្បើក្បា ់វាដូចសៅនឹ្ var

សៅរនុ្វ្់ក្រចរ for loop, សនាេះ i គឺជា local variable រប ់ for សហើយម្ិនអាចសៅសក្បើសៅខា្សក្ៅ
block រប ់ for loop បានសទ្៖
for (let i = 0; i < 5; i++) {
let j = 1;
}
console.log(i); // ReferenceError: i is not defined
ក្ប ិនសបើមាន block code សៅរនុ្ function សហើយ var ែិតសៅរនុ្ block សនាេះ, អ៊ីចឹ្ var
គឺជា function-level រប ់ function សនាេះ, មានន័យថាអាចសក្បើក្បា វា
់ បានស្តរនុ្ function
សនាេះបុសណ្្្េះ៖
function sum() {
{
var b = 4;
}
console.log(b); // 4
}
sum();
console.log(b); // ReferenceError: b is not defined
ដូចជាសយើ្បានស ើញសៅរនុ្ឧទហរណ៍ខា្ស ើសហើយគឺ var អាចទ្ម្លុេះ block level បានស្ត

ម្ួយត្់បុសណ្្្េះ។

៤.២ “var” អាចគបកាស្ម្តងមេើយម្តងមទៀតមដ្ឋយមគបើម្មឹះដណដល

ខា្សក្កាម្សយើ្សក្បើក្បា ់ឧទហរណ៍េីរសដើម្្បីសក្បៀបសធៀបការក្បកា អញ្ញតតិសដ្យសក្បើក្បា ់
សឈា្្េះដូចគាន្។
var season = "dry";
var season = "rainy";
console.log(season); // rainy
let season = "dry";
let season = "rainy";
// SyntaxError: Identifier 'season' has already been declared

console.log(season);
៤.៣ “var” អ្ញ្ញ តតិអាចមៅមគបើម្ុននរងគបកាស្

សៅសេ ស្ដ script ក្តូវបានដំសណើរការ អញ្ញតតិស្ដ ក្បកា សដ្យសក្បើក្បា ់ var នឹ្ក្តូវបាន
រំរិ សៅទ្ីាំ្ដំបូ្ប្អ ់រប ់ script, ដំសណើរស្បបសនេះក្តូវបានសគឱ្យសឈា្្េះថា “hoisting” ឬ
“raising” ។ វាម្ិនក្តឹម្ស្តសរើតស ើ្ស្បបសនេះសៅរនុ្ script សទ្, សៅរនុ្ block scope ស្្ស្សទ្ៀត
រ៏ដូចគាន្ស្ដរ។
console.log(season); // undefined
សៅសេ script ដំសណើរការវារំរិ អញ្ញតតិ “season” ម្រទ្ីាំ្្ដំបូ្ប្អ ់សៅរនុ្ script

ស្បបសនេះ៖
var season;
console.log(season); // undefined
ស្ខបស ចរតីរួម្៖
• var គា្្ន block scope សទ្
• ការក្បកា អញ្ញតតិសដ្យសក្បើក្បា ់ var, អញ្ញតតិសនាេះគឺ hoisted ( ក្តូវបានរំរិ សៅ
ខា្សដើម្ប្អ ់រប ់ script ឬ function )
• const និ្ let ខុ េី var ក្ត្់េីរចំនុចធំៗខា្ស ើសនេះ

ឧទហរណ៍សៅរនុ្ function block៖

function sum() {
var a = 10;
}
sum();
សៅសេ function ដំសណើរការវារំរិ អញ្ញតតិ “a” ម្រទ្ីាំ្្ដំបូ្ប្អ ់សៅរនុ្ function

block ស្បបសនេះ៖
function sum() {
var a;
var a = 10;
}
sum();
ម្្ា្្សទ្ៀតក្ប ិនសបើសយើ្ក្បកា អញ្ញតតិសដ្យម្ិនបានសក្បើក្បា ់ reversed word សៅេីម្ុខ

សនាេះវានឹ្គិតថាអញ្ញតតិសនាេះបានក្បកា សដ្យសក្បើក្បា ់ var ដូចសនេះបានជាគា្្ន error ៖
a = 10;
ដូចសៅនឹ្៖
var a;
a = 10;
បុស្នតក្ប ិនសបើសយើ្សក្បើ directive “use strict”, សនាេះ script ទំ្្ម្ូ នឹ្ដំសណើរាម្ស្បប

modern script សហើយការសក្បើក្បា ់ខា្ស ើនឹ្បស្កើតជា error ៖
"use strict";
a = 10;
console.log(a); // ReferenceError: a is not defined

៥. Global object
Global object ្ត ់ឱ្យសយើ្នូវអញ្ញតតិ និ្ functions ជាសក្ចើនស្ដ អាចសក្បើសៅក្គប់រស្នល្
សដ្យអាក្ យ
័ សៅស ើ environment ( environment មានដូចជា browser, Nodejs … )។
សៅស ើ browser, global object មានសឈា្្េះថា window និ្សៅស ើ Nodejs វាមានសឈា្្េះ
ថា global, វាអាចនឹ្មានសឈា្្េះស្្ស្សទ្ៀតសៅាម្ environment នីម្ួយៗ។
ងមីៗសនេះ, globalThis ក្តូវបានបញ្េូ សៅរនុ្ភាស្ JavaScript សហើយសយើ្អាចសក្បើ global
object ត្់ដ្រម្ួយសនេះសៅក្គប់ environments ទំ្អ ់ ជាេិស វា support browser
ំខាន់ៗទំ្្អ ់ដូចជា Chrome, Firefox, Safari ។ ។ បុស្នតសៅរនុ្ចំនុចសនេះសយើ្នឹ្ស ើរយរ
ស្ត window ម្រនិយយស្តបុសណ្្្េះ។ សយើ្បានសក្បើសក្ចើនម្រសហើយដូចជា console.log, alert
។ ។ ទំ្អ ់សនេះ ុទ្ធជា method រប ់ window។
// ដូចគាន្
window.console.log("Hello JavaScript!");
console.log("Hello JavaScript!")
window.alert("Hello JavaScript");
alert("Hello JavaScript");
window.prompt("Enter something");
prompt("Enter something");
អញ្ញតតិស្ដ ក្បកា សដ្យសក្បើក្បា ់ var នឹ្កាលយ

្ ជា property រប ់ window បុស្នតម្ិនស្ម្ន
let និ្ const សទ្។
var num = 5;
let str = "any string";
const id = 101;
console.log(window.num); // 5
console.log(window.str); // undefined
console.log(window.id); // undefined

ក្មាប់ function declaration នឹ្កាលយ

្ សៅជា properties រប ់ window បុស្នតម្ិនស្ម្ន
function expressions សទ្។
return a + b;
}
console.log(sum(2, 3)); // 5
console.log(window.sum(2, 3)); // 5
const multiple = (c, d) => c * d;
console.log(multiple(3, 4)); // 12
// TypeError: window.multiple is not a function

console.log(window.multiple(3, 4));
ឧទហរណ៍ថា project សយើ្មានសក្ចើន scripts ( អនរ រស ររូដខលេះសៅ files )

សហើយសយើ្ច្់ក្បកា object “product” ម្ួយសដ្យអាចសក្បើបានក្គប់ script ទំ្្អ ,់ ក្ប ិនមាន
ររណីស្បបសនេះស្ម្នសយើ្អាចក្បកា object “product” ដូចខា្សក្កាម្៖
window.product = {
name: "iphone",
price: 1000,
colors: ["gold", "gray", "blue"]
};
console.log(window.product.price); // 1000
ស្ខបស ចរតីរួម្៖
• Global object មាន properties ជាសក្ចើនស្ដ សយើ្អាច access ម្រសក្បើសៅរស្នល្ណ្
រ៏បានដូចជា window.innerWidth ( ក្មាប់សម្ើ េីទ្ំហំទ្ទ្ឹ្សៅស ើ browser )
• Global object មានសឈា្្េះសៅាម្ environment នីម្ួយៗដូចជា browser (
window), Nodejs (global) និ្សឈា្្េះរួម្ (globalThis)
• ក្ប ិនជាសយើ្ច្់បស្កើតអញ្ញតតិម្ួយស្ដ អាចសក្បើបានក្គប់រស្នល្ សៅរនុ្ project
ទំ្្ម្ូ , សយើ្គួរបស្កើតវាសដ្យសក្បើក្បា ់ global object
• អញ្ញតតិស្ដ បស្កើតសដ្យសក្បើក្បា ់ let, const, រួម្ទំ្្ function expressions ម្ិនស្ម្ន
ជា properties រប ់ global object សទ្។

៦. Scheduling៖ setTimeout និង setInterval

សេ ខលេះសយើ្ច្់ឱ្យ function ម្ួយដំសណើរការាម្សេ សវលាជារ់លារ់ម្ួយស្ដ សយើ្រំណត់,
ដំសណើរការសធែើស្បបសនេះសយើ្សៅថា “scheduling a call”។
សយើ្មានេីរ methods សដើម្្បី scheduling function៖
1. setTimeout អាចឱ្យសយើ្ដំសណើរការ function ម្ត្បនាទ្ប់េីចសនាល្េះសេ ម្ួយ
ស្ដ សយើ្បានរំណត់។
2. setInterval អាចឱ្យសយើ្ដំសណើរការ function ដស្ដ បនាទ្ប់េីចសនាល្េះសេ
ម្ួយស្ដ សយើ្បានរំណត់ សហើយវាបនតដំសណើរការស្បបសនេះរហូតក្ត្់ចសនាល្េះ
សេ ស្ដ បានរំណត់សនាេះ។
៦.១ setTimeout
Syntax ៖
const timerId = setTimeout(func, [delay], [arg1], [arg2], ...);
▪ func គឺជា function ស្ដ នឹ្ក្តូវដំសណើរការបនាទ្ប់េីសេ រំណត់បានម្រដ ់

▪ delay គឺជាសេ ស្ដ ក្តូវរំណត់ឱ្យ function ដំសណើរការ បនាទ្ប់េី engine បាន
execute វា ( តដម្លស្ដ រំណត់គឺគិតជា ម្ិ លីវិនាទ្ី 1000ms = 1 second )
ក្ប ិនសបើអត់មានតដម្ល, default រប ់វាគឺ 0 = 0ms
▪ arg1, 2, 3 … គឺជា arguments ក្មាប់ func
ឧទហរណ៍សដ្យមាន arguments ៖
setTimeout((a, b) => {
console.log(a + b); // 20 after 1s
}, 1000, 10, 10);
ឧទហរណ៍សដ្យម្ិនមាន arguments ៖
setTimeout(() => {
console.log("Hello, I'm setTimeout."); // Hello, I'm setTimeout.
}, 1000);
ឧទហរណ៍សដ្យសក្បើក្បា ់ helper function ៖

setTimeout(greetings, 1000);
function greetings() { // helper function

// Hello, I'm setTimeout.
console.log("Hello, I'm setTimeout.");
}

៦.២ Canceling with clearTimeout

សៅសេ ស្ដ សយើ្ call សៅ setTimeout, វានឹ្ returns “timer identifier” ម្ួយស្ដ
សយើ្អាចយរម្រ cancel ដំសណើរការរប ់វាបាន។
Syntax ៖
let timerId = setTimeout(...);
clearTimeout(timerId);
const timerId = setTimeout(greetings, 1000);
console.log("Hello, I'm setTimeout.");

}
console.log(timerId); // 1
clearTimeout(timerId);
ឧទហរណ៍ខា្ស ើសយើ្បាន schedule សហើយបនាទ្ប់ម្រសយើ្បាន cancel វិញសដ្យ

សក្បើក្បា ់ timerId។
៦.៣ setInterval
Syntax ៖
const timerId = setInterval(func, [delay], [arg1], [arg2], ...);
setInterval(greetings, 1000);

// this function with run every 1s
// Hello, I'm setInterval.
console.log("Hello, I'm setInterval.");
}

សដើម្្បីបញ្្ឈប់ setInterval គឺសយើ្សក្បើ timerId ដូចគាន្បុស្នត function ស្ដ cancel មាន

សឈា្្េះខុ គាន្។
const timerId = setInterval(greetings, 1000);

}
console.log(timerId); // 1
clearInterval(timerId);
ស ើ េីសនេះសយើ្អាចសក្បើ setTimeout និ្ setInterval ជាម្ួយគាន្៖

const timerId = setInterval(greetings, 1000);

// this function will stop after 8s
// Hello, I'm setInterval.
}
setTimeout(() => {
clearInterval(timerId);
}, 8000);
ឧទហរណ៍ខា្ស ើ setInterval នឹ្ក្តូវបានបញ្្ឈប់បនាទ្ប់េី function សៅរនុ្ setTimeout

ដំសណើរការ។
៦.៤ Zero delay setTimeout

សៅសេ សយើ្សៅ setTimeout ម្រសក្បើសហើយម្ិនបានសបាេះ argument “delay” សៅឱ្យវាសនាេះ
វានឹ្ចាប់យរតដម្ល 0 គឺ 0ms ដូចសនេះ setTimeout(func, 0) ដូចគាន្សៅនឹ្ setTimeout(func)។
បុស្នតម្ិនមានន័យថា 0ms វានឹ្ដំសណើរការភាល្ម្ៗបនាទ្ប់េី engine ដំសណើរការម្រដ ់ជួរស្ដ វារំេុ្
ឈរសនាេះសទ្ គឺវាក្តូវចាំ្រហូតដ ់ engine ដំសណើរការ script ទំ្្ម្ូ ចប់ ិនបានវាអាចដំសណើរការ។
// ទ្ធ្ សៅស ផ្
ើ ទ្ំ្ console
// I'm going to run before setTimeout.
// I will run after current script finished.
setTimeout(function () { // *
console.log("I will run after current script finished.")
});
console.log("I'm going to run before setTimeout."); // **

សៅសេ ស្ដ engine ដំសណើរការម្រដ ់ជួរ // * វាបានដ្រ់ function call ស្ដ សៅរនុ្
setTimeout សៅរនុ្ calender បនាទ្ប់ម្រវាដំសណើរការជួរបនាទ្ប់ // ** សហើយបងាហ្ញ ទ្ធ្ “I'm
going to run before setTimeout.” សៅស ើផ្ទ្ំ្ console បនាទ្ប់ម្រសទ្ៀត engine
ដឹ្ថាគា្្នអែីក្តូវដំសណើរការសទ្ៀត (សដ្យស្រជួរ // ** គឺជាជួរចុ្សក្កាយប្អ ់សៅរនុ្ script)
វារ៏ទញ function call េីរនុ្ calender (សក្កាយ ០ms) ម្រវិញសហើយដំសណើរការ function
សនាេះ។ ដូចសនេះសហើយបានជាសយើ្ស ើញថា “I'm going to run before setTimeout.” បងាហ្ញម្ុន
“I will run after current script finished.”។
• setTimeout អាចឱ្យសយើ្ដំសណើរការ function ម្ត្បនាទ្ប់េីចសនាល្េះសេ ម្ួយ
• setInterval អាចឱ្យសយើ្ដំសណើរការ function ម្ត្បនាទ្ប់េីចសនាល្េះសេ ម្ួយ
សហើយបនតដំសណើរការស្បបសនេះរហូតសរៀ្រា ់ delay ម្ត្
• សដើម្្បីបញ្្ឈប់ដំសណើរការេួរវា, សយើ្សក្បើ clearTimeout និ្ clearInterval សដ្យ
សបាេះ timerId រប ់េួរវាសៅឱ្យ methods ទំ្្េីរសនេះ
• Zero (0) delay scheduling សក្បើជាម្ួយ setTimeout, គឺក្តូវបាន schedule call
បនាទ្ប់េី current script ក្តូវបានបញ្េប់
លំហាត់
ចូរបងាហ្ញដងៃស្ខ និ្ឆន្ំបចេុប្បននសរៀ្រា ់ម្ួយវិនាទ្ីម្ត្ និ្ក្តូវឈប់បងាហ្ញបនាទ្ប់េី ដប់វិនាទ្ីក្តូវ
បានរនល្ហួ សៅ។ គនលឹេះ៖ សក្បើក្បា ់ setTimeout, setInterval និ្ Date object។

៧. call(), apply(), និង bind()

សយើ្បានដឹ្ខលេះៗសហើយថាអែីៗទំ្អ ់គឺ based on object, សដ្យស្រស្តសៅរនុ្ភាស្
JavaScript អែីៗទំ្្អ ់សនាេះគឺមាន properties និ្ methods រប វា
់ , ដូចជា str.length,
toString() ។ ។ ស ើ េីសនេះសយើ្រ៏បានសរៀនរួចសហើយថាក្គប់ functions ទំ្្អ ់ស ើរស្ ្ស្ត
arrow function គឺមាន “this” keyword។ តដម្លរប ់ this ម្ិនបានភាជ្ប់ (bound)
សៅនឹ្អែីម្ួយឱ្យ ជារ់លារ់សទ្។ តដម្លរប ់ this ក្តូវបានវាយតដម្លសដ្យ JavaScript engine
អំ ុ្សេ call-time សហើយវាម្ិនអាក្ ័យថាសតើ method/function ហនឹ្ក្បកា សៅរស្នល្ណ្សទ្,
បុស្នតវាអាក្ ័យស ើ object សៅេីម្ុខនិម្ិតត ញ្ញ្ dot ( . ) ស្ដ access method/function
ស្ដ វា ែិតសៅ។ ឧទហរណ៍សបើរនុ្កា ៈសទ្ ៈខលេះសយើ្សធែើឱ្យបាត់ reference រប ់ this,
សតើវានឹ្មានអែីសរើតស ើ្? ឥ ូវសយើ្ម្រសម្ើ ឧទហរណ៍ខា្សក្កាម្ទំ្្អ ់គាន្៖
const item = {
getOriginalPrice() {
return 10;
},
totalPrice(qty) {
console.log(this); // (!important)
return this.getOriginalPrice() * qty; // *
}
}
function calcOutcome(func) {
const result = func(5); // **
return result;
}
console.log(item.totalPrice(2)); // 20
//TypeError: this.getOriginalPrice is not a function

console.log(calcOutcome(item.totalPrice));
សៅក្ត្់ជួរ console.log(item.totalPrice(2)) សយើ្ទ្ទ្ួ បាន ទ្ធ្ 20 សៅស ើផ្ទ្ំ្

console, បុស្នតសៅក្ត្់ជួរ console.log(calcOutcome(item.totalPrice)) ស្បរជាសយើ្ទ្ទ្ួ បាន
error សៅវិញ។ ម្ូ សហតុសដ្យស្រស្តសៅសេ សយើ្ call សៅ calcOutcome(item.totalPrice)
សយើ្បានសបាេះ method រប ់ item ( totalPrice ) ចូ សៅ។ បនាទប
្ ់ម្រសៅរនុ្ function
calcOutcome ចាប់ស្តើម្ដំសណើរការ, ក្ត្់ជួរ // ** សយើ្បាន call សៅ method រប ់ item (
totalPrice ) សដ្យសបាេះ argument ( 5 ) សៅឱ្យវា្្ស្ដរ។ សៅសេ ស្ដ method
សនេះដំសណើរការ វាបាន return this.getOriginalPrice() * qty; ក្ត្់ជួរ // * ,
ខណៈសេ វាសធែើការ return វាបានយរ qty ( 5 ) គុណនឹ្ this.getOriginalPrice(),

សៅក្ត្់ចំនុចសនេះសហើយស្ដ return error សដ្យស្រស្ត “this” keyword ស្ ្ច្អុ សៅកាន់

object “item” សទ្ៀតសហើយ េីសក្ េះសៅសេ ស្ដ សយើ្សបាេះ method រប ់ object “item”
សៅរនុ្វ្់ក្រចររប ់ calcOutcome គឺសយើ្ម្ិនបានភាជ្ប់ method សនាេះជាម្ួយនឹ្ “()”
សទ្ដូចសនេះសហើយបានជាសយើ្ បាត់ប្់ (lost) “this”។ សហតុសនេះបានជា “this.getOriginalPrice”
ស មើនឹ្ undefined, ដូចសនេះបានជា return error “this.getOriginalPrice ម្ិនស្ម្នជា
function” ។ សយើ្អាចបញ្ជ្រ់ បានថា “this” keyword ស្ ្ច្អុ សៅកាន់ item ក្ត្់ជួរ //
(!important)។
៧.១ bind()
សយើ្បានដឹ្ឧទហរណ៍អំេីការបាត់ប្់ “this” keyword សហើយ, ឥ ូវសយើ្ម្រសម្ើ េីរសបៀប
ដនការសដ្េះក្ស្យបញ្ហ្សនេះសដ្យសក្បើក្បា ់ bind។
ឧទហរណ៍ខា្ស ើដស្ដ ៖
const item = {
getOriginalPrice() {
return 10;
},
totalPrice(qty) {
return this.getOriginalPrice() * qty; // *
}
}
function calcOutcome(func) {
const result = func(5); // **
return result;
}
console.log(item.totalPrice(2)); // 20
console.log(calcOutcome(item.totalPrice.bind(item))); // 50
សៅក្ត្់ជួរ console.log(calcOutcome(item.totalPrice.bind(item))) សយើ្បានភាជ្ប់

( bind ) item.totalPrice សៅនឹ្ object “item” ( item.totalPrice.bind(item) )
ដូចសនេះសៅសេ ស្ដ ជួរ // ** ដំសណើរការគឺ “this” ស្ដ សៅរនុ្ method totalPrice បានភាជ្ប់
សៅនឹ្ object “item” រហូត( ម្ិនបាត់ប្់ដូចម្ុន ), ដូចសនេះបានជាក្ត្់ជួរ // * return 10 * 5 (
ស្ដ តដម្ល 10 បានម្រេី this.getOriginalPrice() )សហើយសបាេះ ទ្ធ្ 50 ម្រកាន់ result
វិញក្ត្់ជួរ // **។

const user = {
name: "Tida"
};
const otherUser = {
name: "Seyha"
};
function greetings() {
console.log(`Hello sir, I'm ${this.name}`)
}
const funcGreetings = greetings.bind(user);

funcGreetings(); // Hello sir, I'm Tida
const otherFuncGreetings = greetings.bind(otherUser);

otherFuncGreetings(); // Hello sir, I'm Seyha
ឧទហរណ៍ខា្ស ើសនេះតដម្លរប ់ “this” អាក្ ័យស ើ function ស្ដ វា ែិតសៅ, ស្ដ bind
ជាម្ួយ object ណ្ម្ួយ។
const sum = (a , b) => a + b;
const sumWithFive = sum.bind(null, 5);
console.log(sumWithFive(1)); // 6
ឧទហរណ៍ខា្ស ើសយើ្បាន bind function “sum” ជាម្ួយតដម្លស ខ (5) បនាទ្ប់ម្រសយើ្

assign សៅឱ្យ “sumWithFive” ដូចសនេះរា ់ការ call សៅ “sumWidthFive” ម្ត្ៗគឺវាមានតដម្ល
(5) ក្ស្ប់ជាប់សៅរនុ្ហន្
ឹ ។ ដំសណើរការ bind function ស្បបសនេះក្តូវបានសគឱ្យសឈា្្េះថា “partial
functions”។

៧.២ call() និង apply()

Methods call() និ្ apply() អាចឱ្យ method ស្ដ ជារម្ម ិទ្ធរប ់ object
ម្ួយអាចយរសៅ assign និ្ call សៅ ក្មាប់ object/function ម្ួយស្្ស្សទ្ៀតបាន។ call និ្
apply អាច្ត ់តដម្លងមីរប ់ “this” សៅកាន់ method និ្អាចឱ្យសយើ្បស្កើត method ម្ត្
សហើយបនាទ្ប់ម្រយរ method សនាេះសៅសក្បើរនុ្ object/function ស្្ស្សទ្ៀតសដ្យេុំចាំ្បាច់បស្កើត
method សនាេះម្ត្សទ្ៀតសទ្។
ម្ុននឹ្ចូ សៅកាន់ការសក្បើក្បា ់សយើ្គួរដឹ្េីចំនុចខលេះៗដូចជា៖
• call ទ្ទ្ួ ស្ត list of argument បុសណ្្្េះសៅរនុ្វ្់ក្រចររប ់វា
Syntax៖ call(context, arg1, arg2…)
• apply ទ្ទ្ួ ស្ត single array of argument បុសណ្្្េះសៅរនុ្វ្់ក្រចររប ់វា

Syntax៖ apply(context, args)
const item = {
total(qty, price) {
return qty * price;
}
};
const MacBookPro = function calcTotal(price, qty, name) {

console.log(`Total price: ${this.total(price, qty)} for ${name}.`);
}
MacBookPro.call(item, 1800, 3, "MacBookPro");

MacBookPro.apply(item, [1800, 3, "MacBookPro"]);
សៅរនុ្ MacBookPro.call និ្ MacBookPro.apply សយើ្បានសបាេះ object “item” សៅឱ្យវា,

បនាទ្ប់ម្រសៅសេ ស្ដ function “calcTotal” ដំសណើរការ “this” ស្ដ សៅរនុ្ block រប ់វាគឺ
reference សៅកាន់ object “item”។

const numbers = [5, 6, 2, 3, 7];
const maxApply = Math.max.apply(null, numbers);

const maxCall = Math.max.call(null, ...numbers);
console.log(maxApply); // 7
console.log(maxCall); // 7
const minApply = Math.min.apply(null, numbers);

const minCall = Math.min.call(null, ...numbers);
console.log(minApply); // 2
console.log(minCall); // 2
សៅសេ ស្ដ សយើ្ម្ិនបាន reference សៅកាន់ object ណ្ម្ួយសៅសេ សក្បើក្បា ់ call និ្
apply, context ស្ដ ជា parameter ដំបូ្រប ់វាគួរស្តសក្បើតដម្លជា null ។
const user1 = {
name: "Nita",
age: 20,
gender: "female",
displayInfo() {
console.log(`
Name: ${this.name}
Age: ${this.age}
gender: ${this.gender}
`)
}
};
const user2 = {
name: "Tola",
age: 18,
gender: "male",
};
const user3 = {
name: "Mina",
age: 21,
gender: "female",
};

user1.displayInfo.apply(user2, Object.values(user2));
/*
Name: Tola
Age: 18
gender: male
*/
user1.displayInfo.call(user3, user3);
/*
Name: Mina
Age: 21
gender: female
*
ភាេខុ គាន្រវា្ bind និ្ call/apply គឺ bind return function ងមីម្ួយស្ដ នឹ្ក្តូវ call
សៅសក្បើសៅសេ សក្កាយ ចំស្នរឯ call/apply ដំសណើរការ function ភាល្ម្ៗ។

លំហាត់
សតើ function “checkFun” ខា្សក្កាម្បងាហ្ញ ទ្ធ្ អែីខលេះសៅស ើផ្ទ្ំ្ console?

function checkFun(a, b, c){
console.log(this);
console.log(a);
console.log(b);
console.log(c);
}
checkFun.apply("1",[2,3,4]);

៨. Arrow functions revisited

សៅរនុ្ចំនុចសនេះសយើ្នឹ្ ិរ្ាអំេី arrow function ម្ត្សទ្ៀត។ arrow function
ម្ិនក្តឹម្ស្តខលីងាយក្ ួ រស រសទ្ បុស្នតវាមានចំនុចេិស រប ់វា។ សគា ការណ៍សៅរនុ្ភាស្
JavaScript គឺបស្កើត function តូចៗស្ដ អាចយរសៅដំសណើរការរស្នល្ស្្ស្សទ្ៀតបាន។
រនុ្ររណីស្បបសនេះគឺសយើ្ម្ិនក្តូវការ current context “this” សទ្ដូចសនេះបានជា arrow function
មានស្រៈ ខា
ំ ន់ណ្ ់ក្ត្់ចំនុចសនេះ។
[1, 2, 3, 4].forEach((ele) => {
console.log(ele); // 1, 2, 3, 4
});
[5, 6, 7, 8].forEach((ele) => {

console.log(ele); // 5, 6, 7, 8
});
ជំនួ សដ្យ៖
const displayElement = (ele) => {// we called it “helper function”
console.log(ele);
}
[1, 2, 3, 4].forEach(displayElement); // 1, 2, 3, 4
[5, 6, 7, 8].forEach(displayElement); // 5, 6, 7, 8
៨.១ Arrow functions have no “this”

សៅរនុ្ arrow functions ម្ិនមាន “this” សទ្, ក្ប ិនសបើសយើ្ access “this” សៅរនុ្ arrow
function សនាេះវានឹ្សៅយរេី outer scope រប ់វា បុស្នតសបើ outer scope អត់មានសទ្ គឺ “this”
សនាេះស មើនឹ្ undefined ។
const displayName = () => {
console.log(this); //undefined
};
displayName();

const user = {
firstname: "Jack",
lastname: "Ma",
age: 53,
displayInfo() {
const fullname = () => {
// this was taken from its outer scope(displayInfo)
};
console.log(`Fullname: ${fullname()} is ${this.age} year-old.`);

}
}
user.displayInfo();
ឧទហរណ៍ដស្ដ សដ្យសក្បើក្បា ់ regular function៖

const user = {
firstname: "Jack",
lastname: "Ma",
age: 53,
displayInfo() {
function fullname() {
// "this" here becomes undefined in strict mode,
// otherwise window
};
console.log(`Fullname: ${fullname()} is ${this.age} year-old.`);

}
}
// error: Uncaught TypeError: Cannot read properties of undefined

// (reading 'firstname')
user.displayInfo();
ឧទហរណ៍ខា្ស ើសៅរន្
ុ regular function “fullname”, “this” ស មើនឹ្ undefined
សៅរនុ្ “strict mode” សបើម្ន
ិ ែិតសៅរនុ្ strict mode សទ្គឺ “this” ស មើន្
ឹ window ។
ចំណ្ំ៖ arrow function ម្ិនអាចសក្បើជាម្ួយ constructor “new” ដូច regular function
បានសទ្។ ម្្ា្្សទ្ៀតការសក្បើក្បា ់ bind ជាម្ួយ arrow function រ៏ម្ិនខុ េីសក្បើក្បា ់ “this”
សៅរនុ្ arrow function ស្ដរគឺវាសៅស្ ែ្ររ “this” សៅ outer scope រប ់វា។

៨.២ Arrow functions have no “arguments”

ខុ េី regular functions, arrow functions ម្ិនមាន “arguments” សទ្។
ឧទហរណ៍ regular function៖
function func() {
//{ 0: 1, 1: '1', 2: false, 3: {} }
console.log(arguments);
}
func(1, "1", false, {});
ស្ខបស ចរតីរួម្ arrow function៖

• ម្ិនមាន “this”
• ម្ិនមាន “arguments”
• ម្ិនអាចបស្កើតសដ្យសក្បើ constructor “new”
• ម្ិនមាន “super” ស្ដ “super” ែិតរនុ្សម្សរៀនបនាទ្ប់ Classes

សម្សរៀនទ្ី៧ Classes JavaScript
មម្មរៀនទី៧ Classes
១. Class basic syntax

សៅរនុ្ object-oriented programming ( OOP ), class គឺជាេុម្ពគំរូ ក្មាប់យរម្របស្កើត
object។ វា្ត ់ឱ្យនូវ initial values ក្មាប់ state ( member variables ) និ្
implementations behavior ( member functions/methods )។
សៅរនុ្សម្សរៀនទ្ី៤ ចំនុច Constructor operator “new”, សយើ្បានដឹ្សហើយថាសដើម្្បីបស្កើត
object បានសក្ចើនស្ដ object សនាេះមាន properties ដូចគាន្គឺសយើ្សក្បើ constructor “new”។
Class គឺក្ សដៀ្សៅនឹ្ constructor “new” ស្ដរ បុស្នតវាមាន features ងមីនិ្មានអតែក្បសយជន៍
ជាសក្ចើន ស ើ េីសនេះ class គឺ syntactic sugar ( មានន័យថាងាយក្ ួ រស រ ខលី
និ្ងាយក្ ួ យ ់(អាន) )។
១.១ Class syntax

Syntax៖
class MyClass {
// class methods
constructor() { ... }
method1() { ... }
method2() { ... }
method3() { ... }
...
}
// obj ជាសក្ចើនបស្កើតសដ្យយរេុម្ពេី class

const obj1 = new MyClass();
constructor() ក្តូវបានសៅសដ្យ យ
ែ័ ក្បវតតិសដ្យ operator “new”, ដូចសនេះសយើ្អាច
ក្បកា state ( member variables ) សៅទ្ីសនេះ។
class Cat {
constructor() {
this.purr = "meow meow";
}
getPurr() {
console.log(this.purr);
}
}
const micky = new Cat();

micky.getPurr(); // meow meow

JavaScript សម្សរៀនទ្ី៧ Classes
សៅសេ ស្ដ new Cat() ក្តូវបានសៅ៖
1. object ងមីម្ួយក្តូវបានបស្កើត
2. constructor ចាប់ស្តើម្ដំសណើរការ បនាទ្ប់ម្រអញ្ញតតិ “purr” ក្តូវបានបស្កើត និ្ក្តូវបាន
្ត ់តដម្ល “meow meow”
3. បនាទ្ប់ម្រសយើ្ assign object ងមីសនាេះសៅឱ្យអញ្ញតតិ “micky” និ្ call សៅ method
“getPurr”។
ចំណ្ំ៖ method នីម្ួយៗសៅរនុ្ class ម្ិនក្តូវបានខណឌស្ចរសដ្យ comma “ , ” ដូចសៅរនុ្
object សទ្។
១.២ Not just a syntactic sugar

Class ម្ិនក្តឹម្ស្ត syntactic sugar បុស្នតវាមានស្រៈស្្ស្សទ្ៀតដូចជា៖
1. class ក្តូវបាន labelled សដ្យ special internal property ម្ួយមានសឈា្្េះថា
[[IsClassConstructor]] និ្តដម្លរប ់វាស មើេិត ( [[IsClassConstructor]]:true
), JavaScript នឹ្េិនត
ិ ្យររសម្ើ property ម្ួយសនេះសៅរស្នល្ស្្ស្ៗ
ដូចសនេះក្ប ិនសបើ class ក្តូវបានសៅសដ្យម្ិនមាន “new” សទ្សនាេះវានឹ្ប្កឱ្យមាន
error ស្ដ ខុ េី regular function ស្ដ សក្បើជាម្ួយ “new” រ៏បានអត់រ៏បាន។
class Cat {
constructor() {
this.purr = "meow meow";
}
getPurr() {
console.log(this.purr);
}
}
// TypeError: Class constructor Cat cannot be invoked without 'new'

const micky = Cat();
2. methods រប ់ class គឺ non-enumerable

enumerable ដូចសៅនឹ្ array ស្ដ សយើ្អាច loop ធាតុទំ្្សនាេះបាន ចំស្នរឯ
non-enumerable គឺ្ទុយសៅនឹ្អតែន័យខា្ស ើ។
for (let key in Cat) {
console.log(key); // method ”getPurr” ម្ិនក្តូវបានបងាហ្ញ
}
3. រូដស្ដ សៅរនុ្ Class គឺ ែិតសៅរនុ្ “strict mode” សដ្យ យ

១.៣ Getters និង Setters

សៅរនុ្ class សយើ្អាចទញតដម្លរប ់ variables បានាម្រយៈ method “get” និ្្ត ់
តដម្លងមីសៅឱ្យ variables ាម្រយៈ method “set”។
class Cat {
constructor(purr, name) {
this.purr = purr;
this.name = name;
}
get name() {
return this._name;
}
set name(newName) {
this._name = newName;
}
}
const cat = new Cat("meow meow", "Oggy");

console.log(cat.name); // Oggy
cat.name = "Tommy";
console.log(cat.name); // Tommy
១.៤ Computed names

Computed names តំណ្្សដ្យនិម្ិតត ញ្ញ្ square bracket “ [ ] ”។
class User {
constructor(firstname, lastname) {
}
["get" + "fullname"]() {
}
}
const user = new User("Dy", "Channa");

console.log(user.getfullname());

១.៥ Making bound methods with class fields

សយើ្បាន ិរ្ាសក្ចើនម្រសហើយអំេីការបាត់ប្់ “ this ”, ម្ូ សហតុស្ដ បាត់ប្់វាេីសក្ េះ
methods ក្តូវបានសៅសៅសក្បើសៅរនុ្ context ស្្ស្សទ្ៀត, ស្ដ “ this ” ម្ិនអាច reference សៅ
object សដើម្រប ់វាបានសទ្ៀត។ រនុ្ររណីសនេះ “ this ” នឹ្ស មើ undefined ឬរ៏ window។
class User {
constructor(firstname, lastname) {
}
displayFullname() {
console.log(this.firstname + " " + this.lastname);
}
}
const user = new User("Dy", "Channa");

user.displayFullname(); // Dy Channa
setTimeout(user.displayFullname, 500); // undefined undefined

សៅរនុ្ setTimeout សយើ្បានសបាេះ method “displayFullname” សដ្យម្ិនបានភាជ្ប់
ជាម្ួយនឹ្ “ () ” ដូចសនេះសៅសេ ស្ដ method ដំសណើរការ “this” ស្ដ សៅរនុ្ method សនាេះនឹ្
ម្ិនអាច reference សៅកាន់ object ( user ) សដើម្រប ់វាសទ្។
សដើម្្បីសដ្េះក្ស្យបញ្ហ្សនេះសយើ្មានេីររសបៀប៖
1. សក្បើក្បា ់ function ជំនយ
ួ
setTimeout(() => {
user.displayFullname();
}, 500); // Dy Channa
2. សក្បើក្បា ់ bind
setTimeout(user.displayFullname.bind(user), 500); // Dy Channa

លំហាត់
ចូរ រស ររូដខា្សក្កាម្ម្ត្សទ្ៀតសដ្យបតូរេី function constructor “new” សៅជា class។
function Book (title, author, publishedAt) {
this.title = title;
this.author = author;
this.publishedAt = publishedAt;
}
const book = new Book("Sunshine", "Vita", "12/08/1995");

// Book { title: 'Sunshine', author: 'Vita', publishedAt: '12/08/1995' }
console.log(book);

២. Class inheritance
Class inheritance គឺជារសបៀបស្ដ class ម្ួយទ្ទ្ួ ម្រតរេីខលេះម្ួយស្្ស្សទ្ៀត។
ម្រតរសៅក្ត្់ចំនុចសនេះគឺនិយយអំេី ( variables និ្ methods ស្ដ parent class មាន )។
២.១ “extends” keyword

សដើម្្បីអាចឱ្យ class ម្ួយទ្ទ្ួ ម្រតរេី class ម្ួយស្្ស្សទ្ៀតបានគឺសយើ្សក្បើក្បា ់ keyword
“extends”។
class Product {
constructor(name, price, discount,qty, status) {
this.name = name;
this.price = price;
this.discount = discount;
this.qty = qty;
this.status = status;
}
isInStock() {
if (this.status == "in stock") {
console.log(`${this.name} is ${this.status}`);
} else {
console.log(`${this.name} is ${this.status}`);
}
}
}
const product = new Product("sneakers", 59, 2, 2, "in stock");

រូបភាេខា្ស ើបងាហ្ញអំេី object “product” និ្ class “Product”។ បនាទ្បម្

់ ររូបខា្សក្កាម្
សនេះបងាហ្ញេីរសបៀបដ្ទខា្រនុ្ស្ដ class “Shoes” ទ្ទ្ួ ម្រតរេី class “Product”។
class Shoes extends Product {
total() {
}
}
const shoes = new Shoes("sneakers", 59, 2, 2, "in stock");

console.log(shoes.total());
shoes.isInStock();

Object “shoes” អាច access បានទំ្្ methods រប ់ class Shoes “total” និ្ method
រប ់ class Product “isInStock” ។ ចំស្នរឯដំសណើរការដ្ទខា្រនុ្, “extends” keyword សធែើការ
សដ្យសក្បើវិធីស្ញ្ច ត “prototype mechanism”។ វាសធែើការ set “Shoes.prototype.[[Prototype]]
សៅឱ្យ Product.prototype, ដូចសនេះក្ប ិនសបើ method ម្ិនក្តូវបានររស ើញសៅរនុ្
Shoes.prototype សទ្, សនាេះវានឹ្សៅយរេី Product.prototype។ ដូចជាសយើ្បានស ើញសហើយ
method “isInStock” គឺក្តូវបានយរម្រេី Product.prototype។
សដើម្្បីស្ ែ្ររ method “ isInStock ”, JavaScript engine ក្តូវសធែើការេីសក្កាម្ស ើ្ស ើ
( ក្មាប់រូបភាេខា្ស ើ)៖
• Object “shoes” អត់មាន method “isInStock” សទ្
• វាសៅររសៅរនុ្ prototype រប ់វា (Shoes.prototype), prototype រប ់វារ៏អត់មានស្ដរ
• Prototype រប ់វាបាន “extends” េី Product.prototype, ដូចសនេះវាអាចសៅររេី
Product.prototype ស្ដ ជារស្នល្ស្ដ វាររស ើញនូវ method សនាេះ។
២.២ Overriding a method

សយើ្បានដឹ្សហើយក្ប ិនសបើ methods ណ្ស្ដ អត់មានសៅរនុ្ class “Shoes”, methods
សនាេះនឹ្ក្តូវបានយរម្រេី class “Product” ស្ដ ជា parent រប ់វា។ បុស្នតក្ប ិនសបើសយើ្ច្់
បស្កើត method ម្ួយស្ដ មានសឈា្្េះដូចគាន្សៅនឹ្ method ស្ដ វាបានទ្ទ្ួ ម្រតរម្រេី, សនាេះ
method ស្ដ សយើ្ បស្កើតងមីនឹ្ក្តូវបានសក្បើជំនួ method សៅរនុ្ class ស្ដ វាទ្ទ្ួ
ម្រតរម្រេី។ ដំសណើរការស្បបសនេះក្តូវបានសគឱ្យសឈា្្េះថា overriding method។ ជាទ្ូសៅគឺសគ
ម្ិនបស្កើត method ងមីសដើម្្បីសធែើការអែីម្ួយជំនួ method រប ់ parent class សនាេះសទ្,
គឺសគក្គាន់ស្តសៅ method េី parent class ម្រសក្បើម្ុន ឬបនាទ្ប់ ឬរ៏សៅរនុ្ដំសណើរការរប ់ child
class បុសណ្្្េះ។
Classes បាន្ត ់ឱ្យសយើ្នូវ “super” keyword ស្ដ ក្មាប់ access method រប ់
parent class សៅរនុ្ child class។
• super.method( … ) call សៅ parent method
• super( … ) call សៅ parent constructor សៅរនុ្ child constructor

សយើ្នឹ្ស ើរឧទហរណ៍ខា្សដើម្ម្រសក្បើម្ត្សទ្ៀត បុស្នតសយើ្បតូរេី console ម្រ return true

ឬ false ( អាក្ ័យស ើ status ) សៅរនុ្ method “ isInStock ”៖
class Product {
this.name = name;
this.price = price;
this.qty = qty;
}
isInStock() {
if (this.status == "in stock") {
return true;
} else {
return false;
}
}
}

total() {
const checking = super.isInStock(); // *
if (checking) {
} else {
return `There is no items left.`;
}
}
}
const shoes = new Shoes("sneakers", 59, 2, 2, "in stock");

console.log(shoes.total()); // 118
const boots = new Shoes("boots", 199, 0, 0, "out of stock");

console.log(boots.total()); // There is no items left.
សៅក្ត្់ជួរ // * សយើ្បានសៅ parent method “ isInStock ” សដ្យសក្បើក្បា ់ “ super ”

keyword, បនាទ្ប់ម្រសយើ្សធែើការ assign ទ្ធ្ សៅរនុ្អញ្ញតតិ “ checking ”។

ចំណ្ំ្៖ Arrow functions អត់មាន “ super ” សទ្, សៅសេ ស្ដ សយើ្សក្បើ “ super ” វានឹ្
សៅររេី outer scope។ ឧទហរណ៍ថាសយើ្សក្បើ setTimout សៅរនុ្ method “ total ” ដូចខា្
សក្កាម្សនាេះ ទ្ធ្ នឹ្ទ្ទ្ួ បានដូចស្ដ បានរំេឹ្ទ្ុរេីសក្ េះ “ super ” ក្តូវបានយរម្រេី outer
scope រប ់វាក្ត្់ចំនុចសនេះគឺ total ៖
setTimeout(() => {
console.log(super.isInStock());
}, 500);
បុស្នតសបើសយើ្សក្បើក្បា ់ regular function វិញសនាេះនឹ្ error៖
setTimeout(function() {
//SyntaxError: 'super' keyword unexpected here

console.log(super.isInStock());
}, 500);
២.៣ Overriding constructor

សយ្សៅាម្ specification ក្ប ិនសបើ class ម្ួយក្តូវបាន extends េី class ស្្ស្សទ្ៀត
និ្គា្្ន constructor សទ្, សនាេះ constructor ដូចខា្សក្កាម្នឹ្ក្តូវបានបស្កើតសដ្យ ែ័យក្បវតតិ។
// constructor ក្តូវបានបស្កើតសដ្យ ែ័យក្បវតតិក្ប ិនសបើគា្ន constructor
constructor(...args) {
super(...args);
}
}
សយើ្បានស ើញសហើយក្ប ិនសបើ “Shoes” ម្ិនមាន constructor សទ្, សនាេះវានឹ្បស្កើត
constructor ម្ួយសដ្យ ែ័យក្បវតតិស្ដ constructor សនាេះបានម្រេី parent class “Product”។
ឥ ូវសយើ្ម្រសម្ើ េីការបស្កើត constructor សដ្យខលួនឯ្សៅរនុ្ class “Shoes” វិញម្ត្៖
this.name = name;
this.price = price;
this.qty = qty;
}
// ...
}
const boots = new Shoes("boots", 199, 1, 0, "out of stock");
console.log(boots); // SyntaxError: 'super' keyword unexpected here

ទ្ធ្ ខា្ស ើគឺ error, សតើសហតុអែីសៅ?

✓ ចសម្លើយគឺ សៅសេ ស្ដ class ម្ួយទ្ទ្ួ ម្រតរេី class ស្្ស្ម្ួយសទ្ៀត, constructor
ស្ដ សៅរនុ្ child class សនាេះក្តូវស្ត call សៅ “super” ម្ុននឹ្បស្កើត variables ងមី
សដ្យសក្បើក្បា ់ keyword “this”។
សដើម្្បីឱ្យកាន់ស្តច្ា ់សយើ្ម្រសម្ើ េីការបរក្ស្យរប ់សគទំ្្អ ់គាន្៖

• សៅរនុ្ភាស្ JavaScript, សគស្ប្ស្ចរភាេខុ គាន្រវា្ constructor ស្ដ ទ្ទ្ួ
ម្រតរេី class ស្្ស្ (ក្តូវបានសគសៅថា derived constructor) និ្ regular
functions។ derived constructor មាន special internal property (
[[ConstructorKind]]: “derived” )។ ស្ដ constructor សនេះមាន រម្មភាេ
សរើតស ើ្សៅសេ ស្ដ សក្បើជាម្ួយ keyword “ new ”៖
o សៅសេ regular function ក្តូវបានដំសណើរការជាម្ួយ “new”, វាបានបស្កើត
object ទ្សទ្ម្ួយ និ្ assign object សនាេះសៅឱ្យ “this”
o បុស្នតសៅសេ ស្ដ derived constructor ដំសណើរការ, វាម្ិនបានសធែើដូច
regular function សទ្ គឺវារំេឹ្សៅស ើ parent constructor សដើម្្បីសធែើការងារ
ទំ្្អ ់សនេះ។ ដូចសនេះបានជាសៅរនុ្ derived constructor ក្តូវស្ត call
សៅ “super” សដើម្្បីដំសណើរការ parent constructor រប ់វា, សបើម្ិនដូសចាន្េះ
សទ្ “this” នឹ្ម្ិនអាចសក្បើក្បា ់បានសទ្។

constructor(name, price, discount,qty, status, color) {
super(name, price, discount, qty, status);
this.color = color;
}
}
const boots = new Shoes("boots", 199, 1, 0, "out of stock", "gray");
// Shoes {name: 'boots',price: 199,discount: 1,qty: 0,

// status: 'out of stock', color: 'gray' }
console.log(boots);

រុបស ចរតីរួម្៖
• សដើម្្បី extend class សយើ្សក្បើក្បា ់ keyword “extends”
o ឧ.ទ្៖ class Child extends Parent
o ស្ដ Child.prototype.__proto__ គឺជា Parent.prototype
• សៅសេ ស្ដ សយើ្ override constructor៖
o សយើ្ក្តូវស្ត call សៅ parent constructor សដ្យសក្បើក្បា ់ super()
សៅរនុ្ child constructor ម្ុននឹ្សយើ្សក្បើក្បា ់ keyword “this”
• សៅសេ ស្ដ សយើ្ override method ស្្ស្សទ្ៀតរប ់ parent៖
o សយើ្អាចសក្បើក្បា ់ super.method() សៅរនុ្ child method សដើម្្បី call
សៅ method រប ់ parent class
• Arrow functions អត់មាន “this” និ្ “super” សទ្, ដូចសនេះេួរវាក្តូវបានយរេី
outer scope
៣. Static properties និង methods

សៅសេ ស្ដ សយើ្ assign method សៅកាន់ class ស្តម្ិនស្ម្នសៅកាន់ “prototype” រប ់វា,
ដំសណើរការស្បបសនេះសគឱ្យសឈា្្េះថា static method។ សដើម្្បីសក្បើក្បា ់ static method គឺសយើ្ក្តូវ សក្បើ
keyword “static” សៅម្ុខ methods ស្ដ សយើ្ច្់បាន។
class Product {
static displayName() {
console.log("Product Class!");
}
}
Product.displayName(); // Product Class!
class Product {}
Product.displayName = function () {
console.log(this === Product); // true
}
Product.displayName(); // true
តដម្លរប ់ keyword “this” សៅរនុ្ Product.displayName() គឺជា class constructor

“Product” ខលួនវាផ្ទ្ ,់ ដូចសនេះបានជាជួរ // * បងាហ្ញ ទ្ធ្ េិត។
ជាទ្ូសៅសយើ្សក្បើក្បា ់ static methods គឺ ក្មាប់ស្ត class ខលួនវាផ្ទ្ ់សទ្, ម្ិនស្ម្ន ក្មាប់
object ស្ដ inherite េីវាសនាេះសទ្។

class Product {
constructor(name, price, color) {
this.name = name;
this.price = price;
this.color = color;
}
static comparePrice(addidas, nike) {

return addidas.price === nike.price;
}
}
const addidas = new Product("Addidas", 249, "light blue");

const nike = new Product("Nike", 199, "white");
const result = Product.comparePrice(addidas, nike);

console.log(result); // false
៣.១ Static properties

សដើម្្បីសក្បើក្បា ់ static properties, សយើ្ក្គាន់ស្តសក្បើ keyword “static” សៅខា្ម្ុខ fields
ទំ្្សនាេះ។
class Product {
static name = "Addidas";
static price = 249;
}
console.log(Product.name); // Addidas
console.log(Product.price); // 249
Product.color = "light blue";

console.log(Product.color); // light blue
៣.២ Inheritance of static properties និង methods

ក្មាប់ static ម្ិនថាស្ត methods ឬ properties សទ្គឺអាចទ្ទ្ួ ម្រតរបនតបានទំ្្អ ់។
class Product {
constructor(name, price, color) {
this.name = name;
this.price = price;
this.color = color;
}
static comparePrice(addidas, nike) { // *

return addidas.price === nike.price;

}
}
class Shoes extends Product {}
const addidas = new Shoes("Addidas", 249, "light blue");

const nike = new Shoes("Nike", 199, "white");
const result = Shoes.comparePrice(addidas, nike); // **

console.log(`Do they have the same price? ${ result ? "Yes" : "No"}`);
សៅសេ ស្ដ ជួរ // ** ដំសណើរការវានឹ្សៅ call សៅ static method េី parent “Product”

រប ់វាក្ត្់ជួរ // *។

ដូចសនេះសៅសេ ស្ដ class Shoes extends Product ដំសណើរការវាបានបស្កើត

[[Prototype]] references េីរគឺ៖
1. Shoes (static method) “comparePrice” ស្ដ ទ្ទ្ួ ម្រតរេី class Product (static
method)
2. Shoes.prototype ទ្ទ្ួ ម្រតរេី Product.prototype
សដើម្្បីឱ្យកាន់ស្តច្ា ់សយើ្ម្រសម្ើ រូបភាេខា្សក្កាម្ទំ្្អ ់គាន្៖

៤. Private, protected, និង read-only properties

សៅរនុ្ OOP, Object fields (properties និ្ methods) ក្តូវបានស្ប្ស្ចរជាេីរក្រុម្៖
1. Public - អាច access េីក្គប់រស្នល្ទំ្្អ ់ម្ិនថាសៅរនុ្ class ឬ េីខា្សក្ៅ class សទ្
2. Private - អាច access បានស្តសៅរនុ្ class
ម្្ា្្វិញសទ្ៀតសៅរនុ្ភាស្ស្្ស្ ម្ិនក្តឹម្ស្តមាន private និ្ public សទ្ ស្ងម្ទំ្មាន

protected field, ស្ដ field សនេះអាច access សៅខា្រនុ្ class និ្ាម្រយៈ child class។
Protected fields ម្ិនក្តូវបាន implement សៅរនុ្ JavaScript សទ្បុស្នតសយើ្អាចសធែើឱ្យដូចបាន
(emulate) សដើម្្បីឱ្យមានភាេងាយក្ ួ រនុ្ការសក្បើក្បា ់។
៤.១ Protecting
Protecting field ក្តូវបាន ំគា ់សដ្យ ញ្ញ្ underscore សៅខា្ម្ុខ field និ្ម្ិន ែិត
សៅរនុ្ constructor, បុស្នតវាម្ិនស្ម្នជាអែីស្ដ ភាស្ JavaScript តក្ម្ូវឱ្យសធែើស្បបសនេះសទ្ វាគឺជា
ភាេងាយក្ ួ រនុ្ការចំណ្ំស្ដ អនរ រស ររូដយ ់ក្ បគានថា
្ field ហនឹ្ម្ិនគួរ access
េីខា្សក្ៅ class បុស្នតអាច access េី child class ស្ដ បានទ្ទ្ួ ម្រតរេីវា។
class Product {
_originalPrice = 20;
get originalPrice() {
return this._originalPrice;
}
set originalPrice(value) {
this._originalPrice = value;
}
}
const item = new Product();

console.log(item.originalPrice); // 20
item.originalPrice = 50;
console.log(item.originalPrice); // 50

៤.២ Read-only
Read only field គឺជា field ស្ដ ក្តូវបាន្ត ់តដម្លឱ្យសៅសេ ស្ដ សយើ្បស្កើត object
ស្តបុសណ្្្េះ និ្ម្ិនអាចផ្ល្ ់បតូរតដម្លរប ់វាបានសទ្ក្ប ិនសបើគា្ន method ជំនួយ។
ឧទហរណ៍ទ្ី១ សដ្យគា្ន
្ setter method៖
class Product {
constructor(value) {
// read-only field
this._readOnly = value;
}
get readOnly() {
return this._readOnly;
}
}
const item = new Product(199);

console.log(item.readOnly); // 199
// error: Cannot set property readOnly of #<Product> which has only a getter
item.readOnly = 299;
ឧទហរណ៍ទ្ី២ ជាម្ួយនឹ្ getter/setter method៖

class Product {
constructor(value) {
// read-only field
}
get readOnly() {
return this._readOnly;
}
set readOnly(value) {
if (value < 0) {
value = 0;
}
}
}
const item = new Product(199);

item.readOnly = -299;

item.readOnly = 359;
៤.៣ Private
Private field ចាប់ស្តើម្សដ្យនិម្ិតត ញ្ញ្ hash (#) ស្ដ # តំណ្្ឱ្យ private field,
សហើយ field ម្ួយសនេះអាច access បាន ស្តសៅរន្
ុ class ស្តបុសណ្្្េះ។ ក្មាប់ការក្បកា រប ់វា
រ៏ដូចសៅនឹ្ protected field ស្ដរគឺសយើ្ក្បកា សៅខា្សក្ៅ constructor។
class Product {
// private field
#qty = 5;
get getQty() {
return this.#qty;
}
set getQty(value) {
this.#qty = value;
}
}
const item = new Product();

console.log(item.getQty); // 5
item.getQty = 200;
console.log(item.getQty); // 200
// SyntaxError: Private field '#qty' must be declared in an enclosing class

item.#qty;
• Object fields ស្ប្ស្ចរជាេីរ៖ private និ្ public, ចំស្នរ protected ក្គាន់ស្តជា
ការ ំគា ់រប ់អនរ រស ររូដស្តបុសណ្្្េះ
• Protected និ្ read-only ស្តើម្សដ្យនិម្ិតត ញ្ញ្ underscore ( _ ) ដូចគាន,្ បុស្នត
protected ក្បកា សៅខា្សក្ៅ constructor, read-only ក្បកា សៅរនុ្
constructor
• Private ស្តើម្សដ្យនិម្ត
ិ ត ញ្ញ្ hash ( # ) ស្ដ field សនេះម្ិនអាច access
សៅខា្សក្ៅ class រប វា
់ បានសទ្
• សក្ៅេីអែីស្ដ បានសរៀបរាប់ខា្ស ើគឺជា public field

៥. Class checking៖ “instanceof”

instanceof operator អាចឱ្យសយើ្េិនិត្យសម្ើ ថាសតើ object ម្ួយហនឹ្ជាគំរូស្ដ សចញេី
class ម្ួយហនឹ្ស្ម្ន ឬរ៏ម្ិនស្ម្ន។ ការេិនិត្យសម្ើ ស្បបសនេះមានស្រៈ ំខាន់ណ្ ់ ឧទហរណ៍ថា
សយើ្រំេុ្ build polymorphic function ស្ដ function សនេះសធែើការសៅស ើ arguments
ស្្ស្ៗគាន្សៅាម្ក្បសភទ្រប ់វា។
៥.១ instanceof
Syntax រប ់ instanceof៖ object_name instanceof class_name
class Apple {}
class Android {}
const iphone8 = new Apple();
console.log(iphone8 instanceof Apple); // true

console.log(iphone8 instanceof Android); // false
ស ើ េីសនេះសយើ្អាចសក្បើវាសដើម្្បីេិនិត្យសម្ើ built-in រប ់ object បានដូចគាន្៖

const arr = [1, 2, 3, 4, 5];
const func = function() {};
const obj = {};
console.log(arr instanceof Array); // true

console.log(arr instanceof Object); // true // *
console.log(arr instanceof Function); // false
console.log(func instanceof Array); // false

console.log(func instanceof Object); // true // **
console.log(func instanceof Function); // true
console.log(obj instanceof Array); // false

console.log(obj instanceof Object); // true
console.log(obj instanceof Function); // false
សយើ្ក្តូវចាំថាអែីៗទំ្អ ់គឺ based on object ដូចសនេះសហើយបានជាក្ត្់ចំនុច // * និ្ //

** បងាហ្ញ ទ្ធ្ េិត។

៥.២ Object.prototype.toString for the type

សយើ្បានដឹ្សហើយថាសៅសេ ស្ដ object បស្ម្ល្សៅជា string វាមានទ្ក្ម្្់ស្បបសនេះ៖
[ object Object ]។
alert({}); // [object Object]
alert({}.toString()); // [object Object]
ទ្ធ្ ខា្ស ើដូចគាន្សដ្យស្រស្តការ implementation រប ់ toString, បុស្នតអែីស្ដ សយើ្

ម្ិនដឹ្គឺវាមាន hidden feature ស្ដ សធែើឱ្យ toString មាន រខណៈេិស ជា្សនេះ។
alert(Object.prototype.toString.call({})); // [object Object]
alert(Object.prototype.toString.call([])); // [object Array]
alert(Object.prototype.toString.call(290)); // [object Number]
alert(Object.prototype.toString.call("Sunday")); // [object String]
alert(Object.prototype.toString.call(2 > 3)); // [object Boolean]
• ក្មាប់ Object វានឹ្បងាហ្ញ [object Object]

• ក្មាប់ Array វានឹ្បងាហ្ញ [object Array]
• ក្មាប់ Number វានឹ្បងាហ្ញ [object Number]
• ក្មាប់ String វានឹ្បងាហ្ញ [object String]
• ក្មាប់ Boolean វានឹ្បងាហ្ញ [object Boolean]
លំហាត់
ចូរបស្កើត class Car ម្ួយស្ដ មាន properties េីរគឺ (brand និ្ speed) និ្ methods
បី៖
1. accelerate ក្មាប់បស្កើន speed អាក្ យ
័ ស ើតដម្លរប ់ param ស្ដ សយើ្សបាេះាម្
method សនេះ
2. brake ក្មាប់បនែយ speed ស្ដ វាអាក្ ័យស ើតដម្លរប ់ param ដូចគាន្
a. និ្ចុ្សក្កាយគឺ method status ក្មាប់បងាហញ
្ េី brand និ្ speed (ឧ.ទ្
Prius is running at 80 kilometers per hour.)

JavaScript សម្សរៀនទ្ី៨ Promises, async/await
ជំពូកទី៣ Advanced
មម្មរៀនទី៨ Promises, async/await
១. Error handling, "try...catch"

សេ ខលេះសទេះបីជាសយើ្ក្បារដថាការ រស ររូដរប ់សយើ្បានក្តឹម្ក្តូវរ៏សដ្យ រ៏សេ ខលេះសៅ
ស្តមានរំហុ ្គ្ ស្ដ វាអាចប្កម្រេីការបញ្េូ ទ្ិននន័យរប ់អនរសក្បើក្បា ់ស្ដ សយើ្ម្ិនអាចស្្្ន
ដ ់ ឬរ៏ម្រេីបញ្ហ្សៅសេ ស្ដ សយើ្ទញទ្ិននន័យេី server ស្ដ រំហុ ្គ្ (error) ទំ្្អ ់
សនេះអាចឱ្យរម្មវិធីរប ់សយើ្ទំ្្ម្ូ ស្ ្ដំសណើរការ។ សដើម្្បីការ ររុំឱ្យមានបញ្ហ្ទំ្អ ់សនេះ សរើត
ស ើ្សយើ្គួរស្តសក្បើក្បា ់ try…catch block, ក្ប ិនសបើមានរំហុ ្គ្សរើតស ើ្ សនាេះ catch
block នឹ្ដំសណើរការ សហើយវាបងាហ្ញ error សនាេះឱ្យសយើ្បានដឹ្ និ្បនតដំសណើរការរម្មវិធី។
១.១ try…catch syntax

Syntax រប ់ try…catch៖
try {
...block code
} catch(err) {
...show err
}

សម្សរៀនទ្ី៨ Promises, async/await JavaScript
ដំសណើរការរប ់វា៖
1. ដំបូ្ try { … } block ដំសណើរការ
2. ក្ប ិនសបើគា្ន error, catch block នឹ្ម្ិនក្តូវបានដំសណើរការសហើយវាបញ្េប់ដំសណើរការ
រប ់ try…catch block
3. បុស្នតខណៈសេ រំេុ្ដំសណើរការ try { … } block សហើយមាន error សនាេះវានឹ្បញ្េប់ try
block ភាល្ម្ៗក្ត្់ចំនុច error សហើយបនតសៅកាន់ catch block, បនាទ្ប់ម្រ catch block
ចាប់ស្តើម្ដំសណើរការរូដស្ដ មានសៅរនុ្ block រប ់វា សក្កាយម្របញ្េប់ try…catch។
try {
const a = 5;
const b = 8;
console.log(a + b); // 13
} catch(err) {
console.log("Catch block won't execute.");
}
សៅរនុ្ឧទហរណ៍ទ្ី១សនេះ ម្ិនមានរំហុ ្គ្អែីសទ្ដូចសនេះ catch block នឹ្ម្ិនក្តូវបាន
ដំសណើរការសទ្។
try {
const a = 5;
const b = 8;
b = 10; // *
console.log(a + b);
} catch(err) {
console.log("At this time, catch block executed");
}
សៅរនុ្ឧទហរណ៍ទ្ី២សនេះ catch block ក្តូវបានដំសណើរការ, េីសក្ េះសៅរនុ្ try block ក្ត្់ជួរ

// * សយើ្បានផ្ល្ ់បតូរតដម្លរប ់ b ស្ដ បានក្បកា ជាម្ួយ reversed word “const”
ស្ដ តដម្លរប ់អញ្ញតតិក្បសភទ្សនេះម្ិនអាចស្រស្ក្បបានសទ្ ដូសចនេះវារ៏ប្កជា error សហើយបញ្េប់ try block
ក្ត្់ជួរ // * និ្បនតម្រ catch block វិញម្ត្។

១.២ Error object

សៅសេ ស្ដ មាន error សរើតស ើ្, JavaScript engine នឹ្បស្កើត object ម្ួយស្ដ ្ទុរ
េ័ត៌មាន ំអិតអំេី error សនាេះ។ បនាទ្ប់ម្រ object សនេះក្តូវបានបញ្ជូនសៅកាន់ parameter រប ់
catch “ (err) ”។
try {
...block code
} catch(err) { // <= error object here

...show err
}
ក្មាប់សឈា្្េះរប ់ object ម្ួយសនេះសយើ្អាចបតូរវាសៅាម្ការច្់បានរប ់សយើ្ សដើម្្បីភាេ
ងាយក្ ួ រនុ្ការចំណ្ំ (ឧ.ទ្៖ ex, er, err, error ។ ។)។ ស ើ េីសនេះវាមាន properties
ដូចជា៖
• name - ក្មាប់បងាហ្ញសឈា្្េះរប ់ error (ឧ.ទ្៖ SyntaxError)
• message - ក្មាប់បងាហ្ញេ័ត៌មាន ំអិតអំេី error
• stack - ក្មាប់បងាហ្ញេ័ត៌មានអំេី ំដ្ប់ដន nested calls ស្ដ ប្កជា error
try {
const a = 5;
const b = 8;
b = 10; // *
console.log(a + b);
} catch(err) {
console.log(err.name); // TypeError
console.log(err.message); // Assignment to constant variable.
// TypeError: Assignment to constant variable.

// at https://58791b87-2089-415d-8601-b9d6af67955b.id.repl.co/script.js:5:5
console.log(err.stack);
}

១.៣ “Throw” operator

សយើ្សក្បើ throw operator ក្មាប់បស្កើត error ។
Syntax ៖ throw < error object >
ជាការេិតណ្ ់សៅរនុ្ភាស្ JavaScript, សយើ្អាចបស្កើត object error បានសដ្យខលួនឯ្
សដ្យសក្បើក្បា ់ built-in constructor errors ដូចជា SyntaxError, ReferenceError,
TypeError ។ ។ បនាទប
្ ់ម្រសៅរនុ្វ្់ក្រចររប ់ constructor errors ទំ្្សនេះសយើ្អាចបស្នែម្
រ្យស្ដ សយើ្ច្់ឱ្យបងាហ្ញសៅសេ ស្ដ មាន error សរើតស ើ្។
try {
let naturalNumber = prompt("Please enter a naturalNumber!");
if (naturalNumber < 0 ) {
throw new Error("Number must be greater than zero."); // *
}
} catch(err) { // **
console.log(err.message); // ***
}
ឧទហរណ៍ខា្ស ើក្ប ន
ិ សបើសយើ្បញ្េូ ស ខស្ដ តូចជា្ 0 សនាេះក្ត្់ជួរ // * នឹ្ដំសណើរ
ការ សហើយបញ្ជូន constructor error ម្រកាន់ parameter “err” ក្ត្់ជួរ // ** និ្សធែើការបងាហ្ញ
រ្យ "Number must be greater than zero." ក្ត្់ជួរ // *** ។
try {
let price = prompt("Enter price: ");
let discount = .8;
if (price == "" || price == undefined) {

throw new TypeError("Price must be the value!");
}
let total = price - (price * discount) / 100;
console.log(total);
} catch(err) {
console.log(err.name);
console.log(err.message);
}

១.៤ try…catch…finally
try…catch…finally មាន រខណៈខុ េី try…catch ក្ត្់ finally block ដំសណើរការរហូត
សទេះបីជាមាន error ឬម្ិនមាន error។
▪ try ដំសណើរការសៅសេ គា្ន
្ error
▪ catch ដំសណើរការសៅសេ ស្ដ មាន error
▪ finally ដំសណើរការរហូត
Syntax៖
try {
// ដំសណើរការសៅសេ គា្ន
្ error ...
} catch (err) {
// ដំសណើរការសៅសេ មាន error ...
} finally {
// ដំសណើរការរហូត ...
}
try {
console.log("try block executed."); // try block executed.
} catch(err) {
console.log("catch block executed.");
} finally {
console.log("finally block executed."); // finally block executed.
}
try {
throw new Error("pretend an error in try block!");
console.log("try block executed.");
} catch(err) {
console.log("catch block executed."); // catch block executed.
} finally {
console.log("finally block executed."); // finally block executed.
}

let num1 = +prompt("Enter some numbers: ");
let result;
try {
result = isNatural(num1);
} catch(err) {
console.log(err.message)
} finally {
console.log(`${num1} is ${ result ? "a natural number." : "not a natural
number."}`)
}
function isNatural(num) {
if (!num) {
throw new Error('Not a number');
}
return (num >= 0.0) && (Math.floor(num) === num) && num !== Infinity;
}
ឧទហរណ៍ខា្ស ើសយើ្េិនិត្យការបញ្េូ រប ់ user ថាជា natural number ឬ រ៏ម្ិនស្ម្ន។
បុស្នតសទេះជា ទ្ធ្ យ្្ណ្រ៏សដ្យ សយើ្ស ញ
ើ ថា console.log សៅរនុ្ finally block ដំសណើរ
ការជានិចេ។ ដូចសនេះសៅសេ ស្ដ សយើ្ច្់បាន ទ្ធ្ ម្ួយសទេះបីជារូដរប ់សយើ្ដំសណើរការសជាគ
ជ័យ ឬអត់រ៏សដ្យសយើ្គួរស្តសក្បើ finally។
ក្មាប់ការសក្បើក្បា ់ Error handling, សយើ្អាចសក្បើ try…catch, try…finally, ឬ
try…catch…finally។
សៅរនុ្ Error objects មាន properties ដូចជា៖
• name - ក្មាប់បងាហ្ញសឈា្្េះរប ់ error
• message - ក្មាប់បងាហ្ញេ័ត៌មាន ំអិតអំេី error
• stack - ក្មាប់បងាហ្ញេ័ត៌មានអំេី ំដ្ប់ដន nested calls ស្ដ ប្កជា error

២. Introduction to callbacks
Functions ជាសក្ចើនស្ដ ្ត ់សដ្យភាស្ JavaScript អនុញ្ញ្តឱ្យសយើ្រំណត់ រម្មភាេ
asynchronously, មានន័យថា រម្មភាេស្ដ សយើ្ក្បកា ឥ ូវសនេះនឹ្ក្តូវបញ្េប់សេ សក្កាយ។
Function setTimeout គឺជាឧទហរណ៍ម្ួយរនុ្ចំសណ្ម្ functions ទំ្្សនាេះ។
// script.js
function loadScript(src) {
let script = document.createElement('script'); // *
script.src = src; // **
document.body.append(script); // ***
}
សៅរនុ្ loadScript សយើ្បស្កើត <script> tag ក្ត្់ចំនុច // * បនាទ្ប់ម្រសយើ្ assign src

សៅកាន់ script ក្ត្់ចំនុច // ** និ្ចុ្សក្កាយសយើ្ insert វាសៅរនុ្ <body> tag។
សៅសេ ស្ដ loadScript ដំសណើរការ, <script> tag ចាប់ស្តើម្ loading បនាទ្ប់ម្រវានឹ្
ដំសណើរការសៅសេ ស្ដ វា complete។
// script.js
loadScript("index.js");
console.log("This console won't wait until loadScript finish.");
// index.js
console.log("index.js will execute after console.log in script.js");
Asynchronous action ដំសណើរការដូចខា្សក្កាម្៖

សៅសេ ស្ដ សយើ្ call សៅ loadScript("index.js") ម្រសក្បើ, រូដស្ដ សៅបនាទ្ប់
េីវាម្ិនបានចាំ្ loadScript ដំសណើរការចប់ ិនសទ្ គឺរូដទំ្្សនាេះនឹ្ដំសណើរការ, បនាទ្ប់ម្រសៅសេ
ស្ដ loadScript ដំសណើរការចប់ សយើ្នឹ្ទ្ទ្ួ បាន <script> tag ងមីម្ួយសទ្ៀតសៅរនុ្ <body>
tag, ដូចសនេះសយើ្នឹ្ស ើញរូដស្ដ រនុ្ index.js ដំសណើរការចុ្សក្កាយប្អ ់។

២.១ Callback កនង

ុ callback
រនុ្កា ៈសទ្ ៈខលេះសយើ្ក្តូវ load េីរ script បនតបនាទ្ប់គាន្ (ឧ.ទ្៖ script ទ្ី១ load សហើយ
បនាទ្ប់ម្រ script ទ្ី២)។ រនុ្កា ៈសទ្ ៈស្បបសនេះសយើ្អាចសក្បើ callback រន្
ុ callback។
// script.js
loadScript("index.js", () => {
loadScript("anotherScript.js", () => {
});
});
// anotherScript.js
console.log("At this time I'm from anotherScript.js");
ដំសណើរការរប ់វាគឺ សៅសេ ស្ដ outer loadScript ដំសណើរការចប់ inner loadScript

នឹ្ដំសណើរការបនត។ រម្មភាេស្បបសនេះសបើមានស្តេីរដូចខា្ស ើម្ិនជាបញ្ហ្សចាទ្សទ្ បុស្នតក្ប ិនសបើ
សក្ចើនវិញសយើ្នឹ្េិបារក្គប់ក្គ្។
ឧទរហរណ៍៖
loadScript("index.js", () => {
loadScript("anotherScript.js", () => {
loadScript("oneAnotherScript.js", () => {
});
});
});
ចំណ្ំ៖ callback functions គឺជា functions ទំ្្ឡាយណ្ស្ដ ជា parameter រប ់ function

២.២ Pyramid of Doom

សៅសេ ស្ដ សយើ្សក្បើក្បា ់សក្ចើន រម្មភាេ asynchronously ៖ ម្ួយចប់ សហើយម្ួយសទ្ៀត
បនាទ្ប់ម្រម្ួយសទ្ៀតស្បបសនេះ៖
loadScript("index.js", () => { // one level
loadScript("anotherScript.js", () => { // two level
loadScript("oneAnotherScript.js", () => { // three level

});
});
});
ឧទហរហ៍ខា្ស ើ៖
1. សយើ្ load index.js ក្ប ិនសបើគា្ន error
2. សយើ្ load anotherScript.js ក្ប ិនសបើគា្ន error
3. សយើ្ load oneAnotherScript.js ក្ប ិនសបើគា្ន error សយើ្ដំសណើរការរូដសៅរនុ្
oneAnotherScript.js
សៅសេ ស្ដ សយើ្ call សៅ functions សក្ចើនត្់សៅរនុ្គាន្ (nested) ស្បបសនេះ, រូដរប ់

សយើ្កាន់ស្តេិបារក្គប់ក្គ្ ជាេិស សៅសេ សយើ្អនុវតតស្ម្នស្ទ្ន រូដរប ់សយើ្ម្ិនស្ម្នសក្បើក្បា ់
console.log ម្ួយបនាទ្ប់ស្បបសនេះសទ្, គឺអាចមានដូចជា function, loop ឬ conditional statement
ជាសក្ចើនសទ្ៀត ស្ដ ទ្ក្ម្្់ដនការ រស ររូដស្បបសនេះក្តូវបានសគដ្រ់សឈា្្េះថា៖ Callback hell,
Christmas tree from hell, ឬ Pyramid of doom។
សដើម្្បី ក្ម្ួ បញ្ហ្ខា្ស ើឱ្យមានភាេងាយក្ ួ ជា្ម្ុនបនតិច សយើ្អាចេនាល្ត nested

function ម្រខា្សក្ៅទំ្
្ អ ់ាម្រសបៀបខា្សក្កាម្៖
loadScript("index.js", firstStep);
function firstStep(error, script) {

if (error) {
console.log(error.message);
} else {
loadScript("anotherScript.js", secondStep);
}
}
function secondStep(error, script) {

if (error) {
} else {
loadScript("oneAnotherScript.js", thirdStep);
}
}
function thirdStep(error, script) {

if (error) {
} else {
// ... do something
}
}

៣. Promise
សតើអែីសៅគឺជា Promise ? Promise (in real world) គឺជាការ ន្ាស្ដ នឹ្សរើតស ើ្
សៅសេ ណ្ម្ួយស្ដ បានរំណត់។ ឧទហរណ៍៖ សយើ្ ន្ានឹ្បអូនថាសៅសេ ស្ដ គាត់សរៀន
បានស ខម្ួយ សយើ្នឹ្មានកាដូរជូនគាត់ ដូចសនេះក្ប ិនគាត់ទ្ទ្ួ បានស ខ១េិតស្ម្នគាត់នឹ្
បានទ្ទ្ួ អែីស្ដ សយើ្បាន ន្ា សបើម្ិនដូសចាន្េះសទ្គាត់នឹ្ម្ិនទ្ទ្ួ បានអែីសទ្។ ក្មាប់ Promise
សៅរនុ្ភាស្ JavaScript រ៏ម្ិនខុ គាន្សទ្, Promise គឺជា special object ស្ដ ភាជ្ប់ client side
និ្ server side ជាម្ួយគាន្៖
1. សៅសេ ស្ដ សយើ្ រស ររូដសដើម្្បីដំសណើរការអែីម្ួយ ស្ដ ក្តូវការសេ សវលាសដើម្្បី សក្ម្ច
បាន។ ឧ.ទ្៖ ការទញទ្ិនន
ន ័យេី server ម្រសក្បើសៅស ើ client
2. សៅសេ ស្ដ ទ្ិននន័យម្រដ ់សយើ្អាចយរវាម្រសក្បើដូចជា៖ ការបងាហ្ញេ័ត៌មានរប ់អនរ
សក្បើក្បា ់ ឬការគណនាររចំនួនអនរសក្បើក្បា ់ រុប ។ ។
Syntax រប ់ Promise៖
let promise = new Promise(function(resolve, reject) {
// executor (do something)
});
Function ស្ដ បានសបាេះសៅឱ្យ new Promise ក្តូវបានសៅថា executor។ សៅសេ ស្ដ

new Promise ក្តូវបានបស្កើត executor នឹ្ដំសណើរការសដ្យ យ
ែ័ ក្បវតតិ, វា្ទុរនូវរូដស្ដ ដំសណើរការ
និ្ចុ្សក្កាយបស្កើតបានជា ទ្ធ្ ម្ួយ។ ចំស្នរឯ parameters resolve និ្ reject គឺជា
callbacks ស្ដ ្ត ់សដ្យ JavaScript ខលួនវាផ្ទ្ ,់ រូដស្ដ សយើ្ក្តូវ រស រគឺមានស្តសៅរនុ្
executor បុសណ្្្េះ។ សៅសេ ស្ដ executor ទ្ទ្ួ បាន ទ្ធ្ េី server
(យូរឬឆប់អាក្ ័យស ើ ស ្បឿន Internet និ្ចំនួនទ្ិននន័យ) វានឹ្ call
សៅម្ួយរនុ្ចំសណ្ម្េីរខា្សក្កាម្៖
1. resolve(value) - ក្ប ិនសបើដំសណើរការបាន សក្ម្ច សដ្យ return ទ្ធ្ ជាម្ួយ value
2. reject(error) - ក្ប ិនសបើមាន error សរើតស ើ្, វានឹ្ return error object
(្ទុរេ័ត៌មានរប ់ error)
ដូចសនេះ រុបម្រវិញ executor ដំសណើរការសដ្យ ែ័យក្បវតតិ សហើយវានឹ្ដំសណើរការ(ឧ.ទ្៖
ទញទ្ិននន័យេី server), សៅសេ ស្ដ វាដំសណើរការការងាររប ់វាចប់ វានឹ្ call សៅ resolve
ក្ប ិនសបើការងារសនាេះបានសជាគជ័យ ម្ិនអញ្េឹ្សទ្ reject នឹ្ក្តូវបាន call សៅ។

Promise object ក្តូវបាន return សដ្យ new Promise constructor ស្ដ constructor
សនេះមាន internal properties ដូចជា៖
• state - ការក្បកា ដំបូ្ស្ដ សធែើការរ្់ចាំ (pending), បនាទ្ប់ម្រវាផ្ល្ ប
់ តូរសៅជា
(fulfilled) សៅសេ ស្ដ resolve ក្តូវបាន call សៅ ឬរ៏ (rejected)
សៅសេ ស្ដ reject ក្តូវបាន call សៅ
• result - ការក្បកា ដំបូ្គឺ undefined, បនាទ្ប់ម្រវាផ្ល្ ់បតូរសៅជា value

សៅសេ ស្ដ resolve(value) ឬរ៏ error សៅសេ ស្ដ reject(error) ក្តូវបាន
call សៅ
ដូចសនេះចុ្សក្កាយ executor បតូរ Promise សៅជាម្ួយរនុ្ចំសណ្ម្ state ទំ្
្ េីរសនេះ៖
new Promise(function(resolve, reject) {
// the function is executed automatically when the promise is constructed
// after 1 second signal that the job is done with the result "done"
setTimeout(() => resolve("done"), 1000);
});
សៅសេ ស្ដ new Promise ដំសណើរការសយើ្ស ើញថា៖
• executor នឹ្ក្តូវបានសៅសដ្យ យ
ែ័ ក្បវតតិសដ្យ (new Promise)
• executor ទ្ទ្ួ បាន arguments េីរ៖ resolve និ្ reject ។ Functions ទំ្្សនេះ
គឺបានរំណត់សដ្យ JavaScript engine, ដូចសនេះសយើ្ម្ិនចាំបាច់បស្កើតវាសទ្,
អែីស្ដ សយើ្ក្តូវសធែើគឺសៅេួរវាម្រសក្បើ។
បនាទ្ប់េីម្ួយវិនាទ្ីសក្កាយេីដំសណើរការសនេះ, executor បាន call សៅ resolve(“done”) សដើម្្បី
បស្កើតជា ទ្ធ្ ស្ដ ជាដំណ្រ់កា ផ្ល្ ់បតូរ state រប ់ Promise។

// after 1 second signal that the job is finished with an error

setTimeout(() => reject(new Error("Error")), 1000);
});
សៅសេ ស្ដ សយើ្ call សៅ reject(new Error("Error")) សយើ្បានផ្ល្ ់បតូរ state រប ់
Promise សៅ “rejected”។
ចំណ្ំ្៖ executor ដំសណើរការ callback ស្តម្ួយសទ្រនុ្ចំសណ្ម្ resolve និ្ reject,

មានន័យថា ទ្ធ្ រប វា
់ មានស្តម្ួយសទ្ (result ឬ error)។

resolve("done");
reject(new Error("error")); // ក្តូវបាន ignored

setTimeout(() => resolve("any value")); // ក្តូវបាន ignored
});

៣.១ ការមគបើគបាស្់៖ then, catch និង finally

▪ then
Syntax ៖
promise.then(
function(result) { /* handle a successful result */ },
function(error) { /* handle an error */ }
);
Argument ទ្ី១ រប ់ .then គឺជា function ស្ដ ដំសណើរការសៅសេ ស្ដ Promise
ក្តូវបានដំសណើរការសជាគជ័យ, ស្ដ function សនេះភាជ្ប់ ទ្ធ្ សជាគជ័យម្រជាម្ួយ។
Argument ទ្ី២ រប ់ .then គឺជា function ស្ដ ដំសណើរការសៅសេ ស្ដ Promise
ក្តូវបានដំសណើរការបរាជ័យ, ស្ដ function សនេះភាជ្ប់ ទ្ធ្ error ម្រជាម្ួយ។
ឧទហរណ៍ promise is resolved៖
setTimeout(() => resolve("done!"), 1000);
});
// resolve runs the first function in .then

promise.then(
(result) => console.log(result), // បងាហ្ញ "done!" បនាទ្ប់េីម្ួយវិនាទ្ីរនល្សៅ
(error) => console.log(error) // ម្ិនបានដំសណើរការ
);
ឧទហរណ៍ promise is rejected៖

setTimeout(() => reject(new Error("error")), 1000);
});
// resolve runs the first function in .then

promise.then(
(result) => console.log(result), // ម្ិនបានដំសណើរការ
(error) => console.log(error) // បងាហ្ញ "error"
);

▪ catch
ក្ប ិនសបើសយើ្ច្់សក្បើស្ត error, ដូចសនេះសយើ្អាចសក្បើ .catch(err)។

});
promise.catch((err) => {
console.log(err);
});
ឬក្ប ិនសបើសយើ្ច្់សក្បើទំ្្ .then និ្ .catch

});
promise.then(
(result) => console.log(result)
).catch((err) => {
console.log(err);
});
▪ finally
finally handler អត់មាន arguments សទ្។ សៅរន្
ុ finally េួរសយើ្ម្ិនដឹ្ថា Promise
សជាគជ័យឬរ៏អត់សទ្។ បុស្នតវាម្ិនអីសទ្េីសក្ េះ finally perform ការងារទ្ូសៅ, ស្ដ វាសបាេះ
result ឬ error សៅកាន់ handler បនាទ្ប់។
ឧទហរណ៍ finally និ្ then៖
new Promise((resolve, reject) => {
setTimeout(() => resolve("result"), 2000)
})
.finally(() => console.log("Promise ready")) // Promise ready
.then(result => console.log(result)); // result
ឧទហរណ៍ finally និ្ catch៖

setTimeout(() => reject(new Error("error")), 2000)
})
.finally(() => console.log("Promise ready")) // Promise ready
.catch(err => console.log(err)); // error

៣.២ ការមគបៀបម ៀបរវាង promises និង callbacks
Promises Callbacks
Promises អាចឱ្យសយើ្សធែកា
ើ រាម្ ំដ្ប់ ំសដ្យ។ សយើ្ក្តូវមាន callback function ទ្ុរជាម្ុនសៅ
ម្ុនដំប្
ូ សយើ្ដំសណើរការ loadScript(script) សេ ស្ដ សយើ្ call សៅ loadScript(script,
បនាទ្ប់ ម្រ .then
callback)។
ស្ដ សយើ្ រស រនូវអែីស្ដ សយើ្ច្់សធែើ
សៅសេ ស្ដ ទ្ទ្ួ បាន ទ្ធ្ ។ ស ើ េីសនេះសយើ្
អាចសក្បើ .then សក្ចើនដ្ាម្ស្តសយើ្ច្់បាន។
លំហាត់
ចូរបស្កើត function ម្ួយស្ដ មានសឈា្្េះថា deplayedUpperCase, ស្ដ function សនេះមាន

parameter ម្ួយនិ្ return new Promise។ ម្្ា្្វិញសទ្ៀតសៅរនុ្ new Promise គឺសយើ្ក្តូវសក្បើ
ក្បា ់ setTimeout (សដើម្្បី dalay 500ms), promise នឹ្ resolve ឬ reject អាក្ យ
័ ស ើ
param។ ក្ប ិនសបើ param ជា string, promise នឹ្ resolve សហើយបស្ម្ល្ string សនាេះសៅជា
uppercase ម្ិនដូសចាន្េះសទ្ promise នឹ្ reject ជាម្ួយនិ្តដម្លស្ដ សយើ្្ត ់ឱ្យាម្រយៈ param។
delayedUpperCase("promise")
.then((result) => console.log(result)) // PROMISE
.catch((err) => console.log(err))

៤. Promise Chaining
ឥ ូវសយើ្រំ ឹរអំេីបញ្ហ្ស្ដ បានស ើរស ើ្សៅរនុ្ចំនុច Introduction to Callbacks
បនតិច, សយើ្បានដឹ្រួចសហើយអំេីដំសណើរការរប ់វាគឺ asynchronously ( ម្ួយចប់បានដំសណើរការ
ម្ួយសទ្ៀត ឬសយើ្និយយបានថាបនតបនាទ្ប់គាន្ ) ឧ.ទ្ loading scripts សដ្យសក្បើក្បា ់ callbacks។
សតើសយើ្មានវិធីស្្ស្សទ្សដើម្្បីសដ្េះក្ស្យរិចេការសនេះឱ្យកាន់ស្តក្បស ើរ? ចសម្លើយ គឺមាន, Promises
្ត ់ឱ្យសយើ្នូវេីររសបៀបសដើម្្បីសដ្េះក្ស្យរិចេការសនេះ។ សៅរនុ្ចំនុចសនេះសយើ្នឹ្និយយអំេី
Promise chaining។
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
return result * 2;
}).then(function(result) { // (***)
return result * 2;
}).then(function(result) {
return result * 2;
});
សគា បំណ្ដនការសក្បើក្បា ់គឺសយើ្សបាេះ ទ្ធ្ ាម្រយៈ chain ដន .then handlers។

1. Initial promise resolves បនាទ្ប់េីម្ួយវិនាទ្ីសក្កាយម្រ (*)
2. បនាទ្ប់ម្រ .then handler ក្តូវបាន call (**), ស្ដ បានបស្កើត promise ងមម្
ី ួយសទ្ៀត
ស្ដ មានតដម្ល result គុណនឹ្ ២
3. .then បនាទ្ប់ (***) ទ្ទ្ួ ទ្ធ្ េី .then ម្ុន,
រួចដំសណើរការសដ្យគុណតដម្លស្ងម្នឹ្ ២ សហើយសបាេះបនតសៅកាន់ handler បនាទ្ប់
4. សហើយវាដំសណើរការស្បបសនេះរហូតដ ់ចប់

ទ្ធ្ ស្ដ បានភាជ្ប់ម្រជាម្ួយ chain ដន handlers, គឺមាន ដ្

ំ ប់ ំសដ្យស្បបសនេះ៖
ការងារទំ្្អ ់គឺដំសណើរការស្បបសនេះេីសក្ េះរា ់ការ call សៅ .then return a new

promise, ដូចសនេះបានជាសយើ្អាច call សៅ .then បនតបនាទ្ប់បាន។ សៅសេ hanlder ម្ួយ
return តដម្លម្រវិញ, តដម្លសនាេះគឺជា ទ្ធ្ ដន promise ស្ដ .then បនាទ្ប់ក្តូវបាន call
សៅសដ្យភាជ្ប់ជាម្ួយតដម្លសនាេះ។

ចំណ្ំ្៖ សៅសេ ស្ដ សយើ្ call សៅ .then ដូចខា្សក្កាម្សនាេះវាម្ិនស្ម្នជា promise

chaining សទ្។
setTimeout(() => resolve(1), 1000);
});
promise.then(function(result) {
return result * 2;
});
return result * 2;
});
return result * 2;
});
ឧទហរណ៍ខា្ស ើសយើ្សក្បើក្បា ់ 3 handlers សៅកាន់ promise ស្តម្ួយ។ េួរវាម្ិនបាន
សបាេះតដម្លឱ្យគាន្សៅវិញសៅម្រសទ្ គឺេួរវាដំសណើរការដ្ច់សដ្យស្ រេីគាន្។ ដូចសនេះបានជាសយើ្
ទ្ទ្ួ បាន ទ្ធ្ (តដម្ល 1 ទំ្្អ ់)។

៤.១ Returning promises

Handler, ក្តូវបានសក្បើសៅរនុ្ .then(handler) ស្ដ បស្កើតសហើយ return ជា promise។
រនុ្ររណីសនេះ handlers ស្្ស្សទ្ៀតក្តូវរ្់ចាំ្រហូតដ ់វាដំសណើរការចប់រួចរា ់, សទ្ើបទ្ទ្ួ បាន
ទ្ធ្ រប ់វា។
setTimeout(() => resolve(1), 1000);
return new Promise((resolve, reject) => { // (*)

setTimeout(() => resolve(result * 2), 1000);
});
}).then(function(result) { // (**)
return new Promise((resolve, reject) => {

setTimeout(() => resolve(result * 2), 1000);
});
});
ឧទហរណ៍ខា្ស ើ .then ទ្ីម្ួយបងាហ្ញ ទ្ធ្ 1 និ្ returns new Promise(…) ក្ត្់ជួរ
(*)។ បនាទ្ប់េីម្ួយវិនាទ្ីរនល្សៅវា resolve(result * 2) សហើយក្តូវបានសបាេះបនតសៅកាន់ handler
ដន .then ទ្ី២ ស្ដ handler សនេះ ែិតសៅក្ត្់ជួរ (**), បនាទ្ប់ម្រវាបងាហ្ញ ទ្ធ្ 2
និ្ដំសណើរការដូច handler សៅរនុ្ .then ទ្ី១ ដូចគាន្។ ដូចសនេះ ទ្ធ្ ស្ដ ក្តូវបានបងាហ្ញសចញ
ម្រគឺ 1 > 2 > 4, បុស្នតរា ់ការបងាហ្ញ ទ្ធ្ នីម្ួយៗគឺសយើ្បានេន្ារសេ វាម្ួយវិនាទ្ី។

៤.២ Bigger example៖ fetch

ជាទ្ូសៅសៅខា្ស្្នរ Frontend programming, promises គឺស្ត្ស្តសក្បើ ក្មាប់ network
requests។ សៅរនុ្ចំនុចសនេះសយើ្នឹ្សក្បើ fetch ស្ដ ជា method សដើម្្បី load េ័ត៌មានរប ់
អនរសក្បើក្បា ់េី server។
let promise = fetch(url);

សនេះជារសបៀបបស្កើត network request ាម្រយៈ url និ្ return promise។ សេ ស្ដ
promise resolves សដ្យភាជ្ប់ម្រជាម្ួយនឹ្ response object សៅសេ ស្ដ server ស្លើយតប
ម្រវិញ និ្ភាជ្ប់ម្រជាម្ួយនឹ្ headers, បុស្នតការស្លើយតបសនេះសរើតស ើ្ម្ុននឹ្ full response
ក្តូវបាន download។ សដើម្្បីទញ full response បាន, សយើ្គួរស្ត call សៅ method ម្ួយគឺ
response.text()៖ method សនេះ return promise ស្ដ resolve សៅសេ ស្ដ full text
ក្តូវបាន download េី server, សហើយ text សនាេះគឺជា ទ្ធ្ ។
fetch('./user.json')
.then(function(response) {
// response.text() returns a new promise that resolves
// with the full response text when it loads
return response.text();
})
.then(function(text) {
// ...and here's the content of the remote file
console.log(text); // { "name": "Dyna", "isTeacher": true }
});
Response object ស្ដ return េី fetch មាន method ស្្ស្សទ្ៀតគឺ response.json(),

ស្ដ ទញ data និ្បស្ម្ល្វាសៅជា JSON។ រនុ្ររណីសនេះសយើ្គួរស្តសក្បើវាជំនួ
response.text() េីសក្ េះវាមានភាេងាយក្ ួ ជា្។
.then((response) => response.json())
.then((user) => console.log(user.name)); // Dyna that is teacher's name

ក្ប ិនសបើ .then(handler) return promise, chain (handlers) ស្ដ សៅបនាទ្ប់ក្តូវរ្់ចាំ
ដ ់វាដំសណើរការចប់រួចរា ់សហើយ ិន។ សៅសេ ស្ដ វាដំសណើរការចប់រួចរា ់សហើយ, ទ្ធ្
រប ់វាសទេះជា error ឬ value ក្តូវបានសបាេះបនតសៅកាន់ handler បនាទ្ប់។

0៥. Error handling with promises

Promise chains គឺងាយក្ ួ រនុ្ការក្គប់ក្គ្ error។ សៅសេ ស្ដ promise rejects,
វានឹ្សលាតសៅកាន់ rejection handler ស្ដ សៅជិតបំ្ុត។
fetch('https://idontknow.sit') // rejects
.then(response => response.json())
.catch(err => console.log(err)) // TypeError: failed to fetch
ដូចស្ដ សយើ្បានស ើញសហើយ .catch ម្ិនចាំ្បាច់សៅបនាទ្ប់េី fetch សទ្, វាអាចសៅបនាទ្ប់េី

.then ឬ .then 3 - 4 សហើយបាន .catch រ៏បាន។
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log(text);
})
.catch((err) => console.log(err.message));
ជាទ្ូសៅ .catch ម្ិនបានដំសណើរការសទ្ បុស្នតក្ប ិនសបើមាន promises ណ្ម្ួយ rejects

(សដ្យ បញ្ហ្ណ្ម្ួយ), អ៊ីចឹ្ .catch នឹ្ដំសណើរការ។
៥.១ Implicit try…catch

រូដរប ់ promise executor និ្ promise handlers មាន hidden try .. catch សៅសកា្ប
្
ជុំវិញវា។ ក្ប ិនសបើមានបញ្ហ្ (error) សរើតស ើ្ វានឹ្ក្តូវបានចាប់ និ្ចាត់ទ្ុរ error សនាេះដូចសៅ
នឹ្ rejection ស្ដរ។

throw new Error("Pretend as an Error!");
}).catch(console.log); // Error: Pretend as an Error!!
reject(new Error("Pretend as an Error!"));
}).catch(console.log); // Error: Pretend as an Error!!
The hidden try … catch ស្ដ សកា្្បជុំវិញ executor ដំសណើរការសដ្យ យ

ែ័ ក្បវតតិ,
សដ្យចាប់ error និ្បតូរ error សនាេះសៅជា rejected promise។ ស្ដ ការសរើតស ើ្សនេះម្ិនស្ម្នមាន
ស្តសៅរនុ្ executor សទ្ ូម្្បីសៅរនុ្ handlers រ៏មានស្ដរ។ ក្ប ិនសបើសយើ្ throw error សៅរនុ្
.then handler, វាមានន័យស មើនឹ្ rejected promise ស្ដរដូចសនេះវា (control/engine) នឹ្សលាត
សៅកាន់ error handler (catch) ស្ដ សៅជិតបំ្ុត។
resolve("I'm okey.");
}).then((result) => {
throw new Error("Oh, I'm not okey!"); // rejects the promise
}).catch(console.log); // Error: Oh, I'm not okey!
អែីស្ដ សយើ្ក្តូវដឹ្ម្ួយសទ្ៀតសនាេះគឺ the hidden try … catch ម្ិនស្ម្នចាប់ស្ត throw error

សទ្, ឱ្យស្តមាន errors គឺវាចាប់ទំ្្អ ់។
resolve("I'm okey.");
sum(10, 20); // there's no function sum
}).catch(console.log); // ReferenceError: sum is not defined

៥.២ Rethrowing
ដូចស្ដ សយើ្បានដឹ្សហើយ .catch សៅចុ្បញ្េប់ដន chain គឺក្ សដៀ្សៅនឹ្ try … catch
ស្ដរ។ សយើ្អាចមាន .then សក្ចើនាម្ស្តសយើ្ច្់បាន និ្ .catch ម្ួយចុ្សក្កាយ ក្មាប់ក្គប់ក្គ្
error ទំ្្អ ់ស្ដ សរើតមានសៅរនុ្ executor និ្ handlers។
សៅរនុ្ try … catch សយើ្អាចវិភាគសៅស ើ error និ្ក្បស្ហ ជាអាច rethrow វា
ក្ប ិនសបើវាម្ិនអាចក្គប់ក្គ្បាន។ សៅរនុ្ promise សយើ្រ៏អាចសធែើអ៊ីចឹ្បានដូចគាន្។ ក្ប ិនសបើ
សយើ្ throw new Error, បនាទ្ប់ម្រ control នឹ្សលាតសៅកាន់ error handler
ស្ដ សៅជិតបំ្ុត។ ក្ប ិនសបើសយើ្ក្គប់ក្គ្ error និ្បញ្េប់វាសដ្យធម្មា បនាទ្ប់ម្រវានឹ្បនតសៅ
កាន់ .then handler ស្ដ សៅបនាទ្ប់។
// the execution: catch -> then
throw new Error("Something went wrong!");
}).catch(function(error) {
console.log("The error is handled and continue normally");
}).then(() => console.log("Next successful handler runs"));
ឧទហរណ៍ខា្ស ើ .catch block បានបញ្េប់សដ្យធម្មា។ ដូសចនេះ .then handler សៅបនាទប

្ ់
នឹ្ក្តូវបាន call សៅ។ សៅរនុ្ឧទហរណ៍ខា្សក្កាម្សយើ្ស ើញស្ថ្នភាេស្្ស្សេ សក្បើជាម្ួយ
.catch។ Handler (*) ចាប់ error បនាទ្ប់ម្រម្ិនអាចក្គប់ក្គ្វាបាន (ឧ.ទ្៖ វាអាចក្គប់ក្គ្បានស្ត
ក្បសភទ្ URIError), ដូសចនេះរ៏ throw error សនាេះម្ត្សទ្ៀត។
// the execution: catch -> catch
throw new Error("Something went wrong!");
}).catch(function(error) { // (*)
if (error instanceof URIError) {

// handle it
} else {
console.log("Can't handle such error");
throw error; // throwing this error jumps to the next catch

}

}).then(function() {
/* doesn't run here */
}).catch(error => { // (**)

console.log(`The unknown error has occurred: ${error}`);
});
The execution សលាតេី .catch ទ្ី១ (*) សៅកាន់ .catch ម្ួយសទ្ៀត (**)
ស្ដ សៅចុ្បញ្េប់ ដន chain។
៥.៣ Unhandled rejections

សតើនឹ្មានអែីសរើតស ើ្សៅសេ មាន error ស្ដ ម្ិនអាចក្គប់ក្គ្បាន? ឧទហរណ៍៖ សយើ្អត់
បានសក្បើក្បា ់ .catch handler។
new Promise(function() {
let result = sum(); // There's no function sum.
resolve(result);
// successful promise handlers
console.log(result);
});
រនុ្ររណីសនេះ promise នឹ្ rejected, បនាទ្ប់ម្រ execution នឹ្សលាតសៅកាន់ rejection

handler ស្ដ សៅជិតបំ្ុត។ បុស្នតម្ិនមាន error handler សទ្, ដូចសនេះ error នឹ្ជាប់គាំ្្េីសក្ េះ
គា្្ន block code ណ្ស្ដ ក្គប់ក្គ្វាសទ្។ ដូចសៅនឹ្រនុ្ការអនុវតតរូដទ្ូសៅស្ដរ unhandled
errors គឺនឹ្ប្កឱ្យមានបញ្ហ្ស្ដ ស្្្នម្ិនដ ់។ សៅសេ ស្ដ មាន error សរើតស ើ្សហើយម្ិនមាន
try … catch សដើម្្បីក្គប់ក្គ្ error សនាេះសទ្រម្មវិធីរប ់សយើ្នឹ្បញ្េប់ (die) សដ្យភាជ្ប់ជាម្ួយនឹ្
error message សៅរនុ្ផ្ទ្ំ្ console។ វាក្ សដៀ្សៅនឹ្ unhandled promise rejections
ស្ដរ។ JavaScript engine ាម្ដ្ន rejections សនាេះសហើយបស្កើត global error ម្ួយរនុ្ររណី
unhandled។ សយើ្អាចស្ ែ្ររវាបានសៅរនុ្ផ្ទ្ំ្ console ( ក្មាប់ឧទហរណ៍ខា្ស ើ)។
សៅស ើ browser សយើ្អាចចាប់ error ដូសចាន្េះបានសដ្យសក្បើក្បា ់ event ម្ួយគឺ
unhandledrejection។

window.addEventListener('unhandledrejection', function(event) {
// the event object has two special properties:
console.log(event.promise); // Promise {}
console.log(event.reason); // Error: Whoops! there's no catch handler.
});
new Promise(function() {
throw new Error("Whoops! there's no catch handler.");
}); // no catch to handle the error
Event ខា្ស ើគឺជាស្្នរដន HTML។ ក្ប ិនសបើមាន error សរើតស ើ្ សហើយម្ិនមាន .catch,
សនាេះ unhandlerejection handler នឹ្ដំសណើរការ (triggers) បនាទប
្ ់ម្រសយើ្នឹ្ទ្ទ្ួ បាន
event object ម្ួយស្ដ មានេ័ត៌មានអំេី error ដូចសនេះសយើ្អាចសធែើការងារសៅស ើ event
សនាេះបាន។ ម្្ា្្វិញសទ្ៀតសយើ្ក្តូវដឹ្ថាសក្ៅេី browser environments ដូចជា Node.js គឺគា្ន
ម្សធ្ាបាយនឹ្ាម្ដ្ន error ស្បបសនេះបានសទ្។
• .catch ក្គប់ក្គ្ errors ក្គប់ក្បសភទ្ទំ្អ ់សៅរនុ្ promises
• សយើ្គួរស្តដ្រ់ .catch សៅរស្នល្ជារ់លារ់ម្ួយស្ដ សយើ្ច្់ក្គប់ក្គ្ errors និ្គួរ
ដឹ្េីរសបៀបក្គប់ក្គ្វា។
• សយើ្ក្តូវស្តសក្បើ .catch ជាដ្ច់ខាត, ក្ប ិនសបើសយើ្ដឹ្ថាគា្្ន្លូវស្្ស្ណ្អាចក្គប់
ក្គ្ error
• រនុ្ររណីខលេះសយើ្គួរស្តមាន unhandledrejection event handler (សៅស ើ
browswer environments) សដើម្្បីាម្ដ្ន unhandled errors និ្ជូនជាដំណឹ្
សៅកាន់អនរសក្បើក្បា ់អំេី error សនាេះ, ដូចសនេះរម្មវិធីសយើ្នឹ្ម្ិនក្តូវបានបញ្េប់ (die)
សទ្
លំហាត់
សតើរូដខា្សក្កាម្ចាប់ error បានសទ្? សបើបានសហតុអែី សបើម្ិនបានសហតុអែី?
setTimeout(() => {
throw new Error("Whoops!");
}, 1000);
}).catch(console.log);

៦. Promise API
សៅរនុ្ Promise class មានទំ្្អ ់ក្បាំម្ួយ static methods៖ Promise.all,
Promise.allSettled, Promise.race, Promise.any, Promise.resolve, និ្ Promise.reject។
៦.១ Promise.all
នមត់ថាសយើ្ច្់ឱ្យ promises សក្ចើនដំសណើរការរនុ្សេ ស្តម្ួយ និ្ចាំរហូតដ ់ សក្ម្ច
ទំ្្អ ់។ ឧទហរណ៍៖ download បី ឬបួន URLs រនុ្សេ ស្តម្ួយនិ្ដំសណើរការ content ស្តម្ត្
សៅសេ ស្ដ េួរវា សក្ម្ចទំ្្អ ់។ សដើម្្បីសធែើដូចសនេះបានគឺសយើ្ក្តូវសក្បើក្បា ់ Promise.all។
Syntax៖
let promise = Promise.all([...promises...]);
Promise.all ទ្ទ្ួ array ដន promises ជា parameters រប ់វាសហើយ return new

promise។ ឧទហរណ៍៖ Promise.all ខា្សក្កាម្នឹ្ដំសណើរការ បនាទ្ប់េីបីវិនាទ្ី បនាទ្ប់ម្រវា
បងាហ្ញ ទ្ធ្ array[1, 2, 3]៖
Promise.all([
new Promise((resolve) => setTimeout(() => resolve(1), 3000)), // 1
new Promise((resolve) => setTimeout(() => resolve(2), 2000)), // 2
new Promise((resolve) => setTimeout(() => resolve(3), 1000)) // 3
]).then(console.log);
ចំណ្ំ៖ ំដ្ប់ ំសដ្យរប ់ដន ទ្ធ្ រប ់ធាតុសៅរនុ្ array គឺដូចសៅនឹ្ធាតុស្ដ សៅ

រនុ្ Promise.all ស្ដរ, សទេះបីជា promise ទ្ី១ ចំណ្យសេ យូរជា្សគសដើម្្បី resolve រ៏សដ្យ រ៏វា
សៅស្ត ែិតរនុ្ ំដ្ប់ធាតុទ្ី១ដន array ដស្ដ ។
វិធីស្ញ្ច តម្ួយស្្ស្សទ្ៀតគឺសយើ្សក្បើ array method (map) សដើម្្បីសរៀបចំទ្ិននន័យ (map
data) សៅរនុ្ array ដន promises បនាទ្ប់សយើ្សកា្្បវាដ្រ់រនុ្ Promise.all។
let urls = [
'https://api.github.com/users/thearith09',
'https://api.github.com/users/Kanha08',
'https://api.github.com/users/bofa'
];
// map every url to the promise of the fetch

let requests = urls.map(url => fetch(url));
// Promise.all waits until all jobs are resolved

Promise.all(requests)
.then((responses) => responses.forEach(
response => console.log(`${response.url}: ${response.status}`)
));

ក្ប ិនសបើមាន promise ណ្ម្ួយក្តូវ reject, promises ស្ដ return សដ្យ Promise.all
នឹ្ reject ភាល្ម្ៗ។
Promise.all([
new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
new Promise((resolve, reject) => setTimeout(() => reject(new Error("Pretent to
be an error!")), 2000)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).catch(console.log); // Error: Pretent to be an error!
ចំណ្ំ៖ រនុ្ររណីស្ដ មាន promise rejects, Promise.all នឹ្ rejects ភាល្ម្ៗដូចសនេះ

promise ស្្ស្សទ្ៀតនឹ្ម្ិនក្តូវបានដំសណើរការ (ignored) សទ្ដូចសៅនឹ្ឧទហរណ៍ខា្ស ើ
promise ស្ដ ជាធាតុទ្ី៣ម្ិនក្តូវបានដំសណើរការសទ្។
៦.២ Promise.allSettled
Promise.allSettled ក្គាន់ស្តចាំ្ promises ទំ្
្ អ ់ដំសណើរការរួចរា ់ទំ្្អ ់ និ្ return
ទ្ធ្ អាក្ ័យស ើខលួនវានីម្ួយៗ។ ទ្ធ្ រប ់វាមានទ្ក្ម្្់ដូចខា្សក្កាម្៖
• {status:"fulfilled", value:result} for successful responses,
• {status:"rejected", reason:error} for errors.
ឧទហរណ៍សយើ្ច្់ទញេ័ត៌មានរប ់អនរសក្បើក្បា ់សក្ចើន សទេះបីជាមាន request ខលេះបរាជ័យ

រ៏សយើ្សៅស្តច្់បាន request ស្្ស្សទ្ៀតស្ដរ។
let urls = [
'https://api.github.com/users/thearith09',
'https://github.api.com/users/Kanha08',
'https://api.github.com/users/bofa'
];
Promise.allSettled(urls.map((url) => fetch(url)))

.then((results) => { // (*)
results.forEach((result, index) => {
if (result.status == "fulfilled") {
console.log(`${urls[index]}: ${result.value.status}`);
}
if (result.status == "rejected") {
console.log(`${urls[index]}: ${result.reason}`);
}
});
});

ទ្ធ្ ដនជួរ (*) ខា្ស ើគឺ៖

[
{ status: 'fulfilled', value: Response {} },
{ status: 'rejected',
reason:
TypeError: Failed to fetch
at https://58791b87-2089-415d-8601-b9d6af67955b.id.repl.co/script.js:8:38
at Array.map (<anonymous>)
at https://58791b87-2089-415d-8601-b9d6af67955b.id.repl.co/script.js:8:25
},
{ status: 'fulfilled', value: Response {} }
]
៦.៣ Promise.race
ក្ សដៀ្សៅនឹ្ Promise.all, Promise.race ក្គាន់ស្តចាំ promise ណ្ម្ួយស្ដ ដំសណើរការ
សហើយម្ុនសគ និ្យរតដម្លរប ់ promise សនាេះជា ទ្ធ្ រប ់វាសទេះបីជា (resolve/reject)
រ៏សដ្យ។
Syntax៖
let promise = Promise.race(iterable);
Promise.race([
new Promise((resolve, reject) => setTimeout(() => reject(new Error("Pretend to
be an error!")), 500)),
])
.then(console.log)
.catch(console.log) // Error: Pretend to be an error!
Promise ទ្ី២ គឺស ឿនជា្សគរនុ្ការក្បណ្ំ្្សនេះ (race) ដូចសនេះវានឹ្កាល្យជា ទ្ធ្ រប ់

Promise.race។ បនាទ្ប់េី promise ទ្ី២ ដំសណើរការសហើយ, promise ស្្ស្សទ្ៀត (ទ្ី១និ្ទ្ី៣)
នឹ្ម្ិនក្តូវបានដំសណើរការសទ្។
៦.៤ Promise.any
ក្ សដៀ្សៅនឹ្ Promise.race, Promise.any យរស្ត promise ណ្ស្ដ fulfill បុសណ្្្េះ,
ក្ប ិនសបើ promises ទំ្្អ ់ reject សនាេះ ទ្ធ្ រប ់វាគឺ promises ស្ដ ក្តូវបាន reject
ទំ្្អ ់សនាេះសដ្យភាជ្បជា
់ ម្ួយនឹ្ special error object (AggregateError) ស្ដ ្ទុរនូវ
promise errors ទំ្្អ ់សៅរនុ្ errors property រប ់វា។

Promise.any([
new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error!")),
500)),
])
.then(console.log) // 1
.catch(console.log)
ឧទហរណ៍ខា្ស ើ promise ទ្ី១ដំសណើរការស ឿនជា្សគបុស្នត state រប ់វា rejected,

ដូចសនេះ promise ទ្ី២ កាលយ
្ ជា ទ្ធ្ រប ់ Promise.any ។ សៅសេ ស្ដ promise ទ្ី២ឈនេះ
រនុ្ការក្បណ្ំ្្ (win the race), promise ទ្ី៣គឺម្ិនក្តូវបានដំសណើរការសទ្។
Promise.any([
new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error1!")),
500)),
1000)),
1500))
])
.then(console.log)
.catch((err) => {
console.log(err.constructor.name); // AggregateError
console.log(err.errors[0]); // Error: Error1!
})
៦.៥ Promise.resolve/reject
Methods Promise.resolve និ្ Promise.reject គឺរក្ម្សក្បើខលំំា្ណ្ ់ េីសក្ េះសគនិយម្សក្បើ
async/await ស្ដ សយើ្នឹ្ស ើរម្រនិយយសៅចំនុចបនាទ្ប់។ បុស្នតសដើម្្បីជាការបញ្ច្គប់សម្សរៀនសយើ្
ក្តូវស្តដឹ្ទំ្្អ ់គាន្។
▪ Promise.resolve
Promise.resolve(value) បស្កើត promise resolved ម្ួយសដ្យភាជ្ប់ជាម្ួយ ទ្ធ្
value ។ ដូចគាន្សៅនឹ្ let promise = new Promise(resolve => resolve(value));
Promise.resolve('success')
.then((value) => console.log(value));

▪ Promise.reject
Promise.reject(error) គឺដូចសៅនឹ្ let promise = new Promise((resolve,

reject) => reject(error));
Promise.reject('error')
.catch((err) => console.log(err));
សៅរនុ្ Promise class មាន static methods ក្បាំម្ួយ៖
1. Promise.all(promises) - វាសធែើការរ្់ចាំរហូតដ ់ promises ទំ្្អ ់ resolve
បនាទ្ប់ម្របាន return ទ្ធ្ សនាេះជា array។ ក្ប ិនសបើមាន promise ណ្ម្ួយ
ក្តូវបាន reject សនាេះ ទ្ធ្ រប ់វាគឺជា Promise ស្ដ ក្តូវបាន reject ម្ុនសគ
ប្អ ់។
2. Promise.allSettled(promises) - វាសធែើការរ្់ចាំរហូតដ ់ promises ទំ្្អ ់

ដំសណើរការសហើយ បនាទ្ប់ម្រ return ទ្ធ្ ជា array ដន object សដ្យភាជ្បជា
់ ម្ួយ៖
o status ៖ “fulfilled” or “rejected”
o value (if fulfilled) or reason (if rejected)
3. Promise.race(promises) - វាសធែើការរ្់ចាំ promise ស្ដ ស ឿនជា្សគដំសណើរការ

ចប់ បនាទ្ប់ម្រ ទ្ធ្ រប ់ promise សនាេះសទេះបីជា resolve/reject នឹ្កាល្យជា
ទ្ធ្ រប ់ Promise.race។
4. Promise.any(promises) - វាសធែើការរ្់ចាំ promise ដំបូ្ស្ដ fulfilled

បនាទ្ប់ម្រ ទ្ធ្ រប ់ promise សនាេះនឹ្កាល្យជា ទ្ធ្ រប ់ Promise.any។
សបើម្ិនអញ្េឹ្សទ្ (ម្ិនមាន promise ណ្ស្ដ fulfill) សនាេះ AggregateError
នឹ្កាល្យជា ទ្ធ្ error ដន Promise.any។
5. Promise.resolve(value) - បស្កើត resolved promise ម្ួយសដ្យភាជ្ប់នឹ្ ទ្ធ្

ស្ដ បាន្ត ់ឱ្យ
6. Promise.reject(value) - បស្កើត rejected promise ម្ួយសដ្យភាជ្បន

់ ឹ្ error
ស្ដ បាន្ត ់ឱ្យ

៧. Microtasks
Promise handlers .then / .catch / .finally គឺសធែើការ asynchronously (បនតបនាទ្ប់គាន្)។
សទេះបីជា Promise resolved ភាល្ម្ៗរ៏សដ្យ រ៏រូដខា្សក្កាម្េួរវា (.then / .catch / .finally)
នឹ្ក្តូវបានដំសណើរការម្ុន។
let promise = Promise.resolve();
promise.then(() => console.log("promise done!"));
console.log("code finished"); // This console.log shows first
សៅសេ សយើ្ដំសណើរការរូដខា្ស ើ សយើ្ស ើញថា console.log("code finished");
ដំសណើរការម្ុន promise.then(() => console.log("promise done!"));។ វាចស្ម្លរបនតិចសតើ

ស្ម្នសទ្? េីសក្ េះសយើ្ដឹ្សហើយថា Promise.resolve() ដំសណើរការរួចរា ់ាំ្េីដំបូ្។
សតើសហតុអែីបានជា .then ដំសណើរការបនាទ្ប់សៅវិញ? សតើមានអែីសរើតស ើ្សៅេីសក្កាយសរឿ្សនេះ?
៧.១ Microtasks queue

ដំសណើរការរប ់ Asynchronous គឺក្តូវការការក្គប់ក្គ្ក្តឹម្ក្តូវម្ួយ។ ដូចសនេះ ECMA
standard បានរំណត់ internal queue (PromiseJobs) ស្ដ ភាគសក្ចើនក្តូវបានស្គ្ ់ថាជា
(microtasks queue)។
• The queue គឺ FIFO (first in first out) ធាតុស្ដ ចូ ម្ុនក្តូវដំសណើរការម្ុន
• ដំសណើរការដនរិចេការសនេះគឺក្តូវបានសរើតស ើ្សៅសេ ស្ដ គា្្នអែីស្្ស្រំេុ្ដំសណើរការ
ស្តបុសណ្្្េះ
សដើម្្បីឱ្យកាន់ស្តងាយយ ជា
់ ្សនេះសយើ្គិតស្បបសនេះវិញគឺ សៅសេ ស្ដ promise សក្តៀម្រួច
រា ់សហើយ .then / .cach / .finally handlers រប ់វានឹ្ក្តូវបានដ្រ់បញ្េូ សៅរនុ្ queue
បុស្នតេួរវាម្ិនទន់ដំសណើរការសៅស ើយសទ្។ សៅសេ ស្ដ JavaScript engine ម្ិនមានអែីក្តូវ
execute សទ្ៀតសទ្, វានឹ្សៅយររិចេការ ( handlers ) សនាេះេីរនុ្ queue ម្រវិញ និ្ដំសណើរការ
handlers ទំ្្សនេះាម្ ំដ្ប់ ( FIFO )។ ទំ្្សនេះគឺជាសហតុ្ ស្ដ សៅេីសក្កាយ
console.log("code finished"); ដំសណើរការម្ុនរនុ្ឧទហរណ៍ខា្ស ើ។

Promise.resolve()
.then(() => console.log("promise done!")) // first
.then(() => console.log("code finished")); // secode
៧.២ Unhandled rejection

សតើសយើ្មានចាំ event (unhandledrejection) សៅរនុ្ចំនុចម្ុនសទ្? Unhandled
rejection សរើតស ើ្សៅសេ promise error និ្ម្ិនមាន handler សដើម្្បីក្គប់ក្គ្ error សនាេះ។
ឥ ូវសយើ្នឹ្សៅស្ ែ្យ ់េីរសបៀបស្ដ JavaScript ដឹ្ថាមាន unhandled rejection។
ជាធម្មាក្ប ិនសបើសយើ្ដឹ្ថាមាន error សយើ្ក្បារដជាសក្បើ .catch handler សៅស ើ promise
chain។
let promise = Promise.reject(new Error("Promise Failed!"));
promise.catch((err) => console.log('caught'));
// The code below doesn't run: error handled

window.addEventListener('unhandledrejection', (event) =>
console.log(event.reason));
បុស្នតសៅសេ ស្ដ សយើ្ម្ិនសក្បើក្បា ់ .catch អ៊ីច្

ឹ សៅរនុ្ microtasks queue គឺទ្សទ្រ
(ម្ិនមាន .catch handler) ដូចសនេះ JavaScript engine នឹ្ដំសណើរការ event។
// Error: Promise Failed


សតើនឹ្មានអែីសរើតស ើ្ក្ប ិនសបើសយើ្ក្គប់ក្គ្ error សដ្យេន្ាសេ វាដូចខា្សក្កាម្៖

setTimeout(() => promise.catch((err) => console.log('caught')), 1000);
// Error: Promise Failed!

ក្ប ិនសបើសយើ្ដំសណើរការរូដខា្ស ើ សយើ្នឹ្ទ្ទ្ួ បាន ទ្ធ្ Error: Promise Failed!
បនាទ្ប់ម្រ caught។ ម្ុនសេ ស្ដ សយើ្ម្ិនទន់ស្គ្ ់ microtasks queue សយើ្ក្បារដជា

្ៃ ់ថាសហតុអែីបានជា unhandledrejection ដំសណើរការ។ បុស្នតឥ ូវសយើ្បានដឹ្សហើយថា
unhandledrejction គឺក្តូវបានបស្កើតស ើ្សៅសេ ស្ដ microtasks queue ដំសណើរការចប់
(ជាសេ ស្ដ engine េិនិត្យសៅស ើ promises និ្ក្ប ិនសបើមាន promise ណ្ ែិតសៅរនុ្
rejected state និ្ម្ិនមាន .catch handler សនាេះ event “unhandledrejection”
នឹ្ដំសណើរការ)។ ឧទហរណ៍ខា្ស ើសយើ្បានេន្ាសេ .catch
ម្ួយវិនាទ្ីដូចសនេះបនាទ្ប់េីម្ួយវិនាទ្ី សក្កាយបាន engine បញ្េូ វាសៅរនុ្ microtasks queue
ដូចសនេះសហើយបានជា event (unhandledrejection) ដំសណើរការ។
Promise handling គឺស្ត្ស្តដំសណើរការបនតបនាទ្ប់គាន្ asynchronously, ដូចសៅនឹ្ promises
ទំ្្អ ់ក្តូវបានបញ្េូ សៅរនុ្ microtasks queue។ ដូចសនេះ .then / .catch / .finally handlers
គឺស្ត្ស្តក្តូវបានដំសណើរការបនាទ្ប់េី current code ( ំសៅសៅស ើ script ទំ្្ម្ូ )
ដំសណើរការចប់។

៨. Async / await
សៅរនុ្ភាស្ JavaScript មាន special syntax ម្ួយស្ដ ដំសណើរការាម្រសបៀប promises
ស្ដ មានភាេងាយក្ ួ យ ់ និ្ងាយក្ ួ រនុ្ការសក្បើក្បា ់គឺក្តូវបានសៅថា async/await។
៨.១ Async functions

Syntax៖
async function func() {
return 1;
}
រ្យ “async” សៅេីម្ុខ function មានន័យថា function គឺក្តូវស្ត return ជា promise,
ស្ដ values ក្តូវបានសកា្្បសៅរនុ្ resolved promise សដ្យ យ
ឧទហរណ៍៖ function ខា្ស ើសនេះ return resolved promise សដ្យភាជ្ប់ជាម្ួយនឹ្ ទ្ធ
្ 1។
return 1;
}
func().then(console.log); // 1
ដូចសៅនឹ្៖
return Promise.resolve(1);
}
func().then(console.log); // 1
ដូចសនេះ async ក្តូវក្បារដថា function return ជា promise សដ្យ យ

ែ័ ក្បវតតិ និ្សកា្្ប
ទ្ធ្ ស្ដ ម្ិនស្ម្នជា promise សៅរនុ្វាសដ្យ ែ័យក្បវតតិ។ បុស្នតម្ិនស្ម្នមានស្តបុននឹ្សទ្ គឺសៅ
មាន keyword ម្ួយស្្ស្សទ្ៀតគឺ await ស្ដ ដំសណើរការបានស្តសៅរនុ្ function ស្ដ មាន រ្យ
async សៅេីម្ុខបុសណ្្្េះ។
៨.២ Await
Syntax៖
// await ដំសណើរការសៅបានស្តសៅរនុ្ function
// ស្ដ មាន async សៅេីម្ុខស្តបុសណ្្េះ្
let value = await promise;
រ្យថា await គឺមានន័យថាឱ្យ JavaScript ចាំរហូតទ្ ់ស្ត promise settle
(ដំសណើរការចប់) និ្ return ទ្ធ្ រប ់វា។

let promise = new Promise((resolve, reject) => {

setTimeout(() => resolve("I'm done!"), 1000)
});
let result = await promise; // wait until the promise resolves (*)
console.log(result); // "I'm done!"

}
func();
Function execution ផ្អ្រ (pauses) ក្ត្់ជួរ (*) និ្បនតស ើ្វិញសៅសេ ស្ដ promise
settle សដ្យភាជ្ប់ជាម្ួយនឹ្ result ស្ដ វានឹ្កាល្យជា ទ្ធ្ ។ ដូចសនេះរូដខា្ស ើបងាហ្ញ "I'm
done!" បនាទ្ប់េីម្ួយវិនាទ្ី។
Async/await គឺជាទ្ក្ម្្់ឆល្តដវស្ដ មានភាេងាយក្ ួ រស រនិ្អានជា្ promise ។
* await ម្ិនអាចសក្បើសដ្យគា្្ន asyn function សទ្៖

function func() {
let promise = Promise.resolve(1);
let result = await promise; // Syntax error
}
func();
ឧទហរណ៍សក្បើសៅរនុ្ IIFE៖
( async () => {
let response = await fetch('./user.json');
let user = await response.json();
console.log(user); // { name: 'Dyna', isTeacher: true }

})();

៨.៣ Error handling

ក្ប ិនសបើ promise solve ដំសណើរការាម្ក្បក្រតី អ៊ីចឹ្ await promise return ទ្ធ្ ។
បុស្នតរនុ្ររណី rejection វានឹ្បស្កើត error ដូចគាន្សៅនឹ្ throw statement ស្ដរ។
await Promise.reject(new Error("error!"));
}

throw new Error("error!");
}
Promise ក្តូវសក្បើសេ ខលេះម្ុននឹ្ reject, រនុ្ររណីសនេះវាក្តូវបានេន្ាសេ ម្ុននឹ្ await

throws an error។ ដូចសនេះសយើ្អាចសក្បើ try … catch សដើម្្បីចាប់ error ។
try {
let response = await fetch('http://abc.eu');
} catch(err) {
console.log(err); // TypeError: failed to fetch
}
}
func();
ក្ប ិនសបើម្ិនមាន try … catch, promise នឹ្ក្តូវបានបស្កើតសៅសេ ស្ដ សយើ្ call សៅ

async function func() បនាទ្ប់ម្រវានឹ្កាល្យជា rejected ដូចសនេះសយើ្អាចសក្បើ .catch បនាទ្ប់េី
func()។
let response = await fetch('http://abc.eu');
}
// func() becomes a rejected promise

func().catch(console.log); // TypeError: failed to fetch // (*)
ក្ប ិនសបើសយើ្សភលចសក្បើ .catch ដូចសនេះសយើ្នឹ្ទ្ទ្ួ បាន unhandled promise error

(ស្ដ អាចររសម្ើ បានសៅស ើផ្ទ្ំ្ console សៅស ើ browser)។ សយើ្អាចសក្បើ event
unhandledrejection ដស្ដ សដើម្្បីចាប់ error។

➢ async/await និ្ promise.then/catch

សៅសេ សយើ្សក្បើ async/await, សយើ្រក្ម្សក្បើ .then ណ្ ់េីសក្ េះ await អាចក្គប់ក្គ្ការ
រ្់ចាំ។ សយើ្អាចសក្បើ try … catch ជំនួ .catch សៅសេ ស្ដ សយើ្សក្បើ async/await។
បុស្នតសេ ខលេះសយើ្រ៏គួរសក្បើ .then / .catch សដើម្្បីក្គប់ក្គ្ ទ្ធ្ ចុ្សក្កាយប្អ ់រនុ្ររណីដូច
ឧទហរណ៍ខា្ស ើក្ត្់ជួរ (*)។
The async keyword សៅេីម្ុខ function មានេីរររណីស្ដ ក្តូវដឹ្៖
1. វាស្ត្ស្ត return promise
2. អនុញ្ញ្តឱ្យ await អាចសក្បើសៅរនុ្វាបាន
The await keyword សៅេីម្ុខ promise ក្បាប់ JavaScript ឱ្យរ្់ចាំ្រហូតដ ់ promise

ដំសណើរ៖
1. ក្ប ិនសបើមាន error, an exception នឹ្ក្តូវបានបស្កើត - ក្ សដៀ្សៅនឹ្ throw
error
2. សបើម្ិនអ៊ីចឹ្សទ្ វា return ទ្ធ្
លំហាត់
ចូរ រស ររូដខា្សក្កាម្ស ើ្វិញជាទ្ក្ម្្់ async/await។
function loadJson(url) {
return fetch(url)
.then((response) => {
if (response.status == 200) {
return response.json();
} else {
throw new Error(response.status);
}
});
}
loadJson('./users/user.json')
.catch(console.log); // Error: 404

JavaScript សម្សរៀនទ្ី៩ Modules
មម្មរៀនទី៩ Modules
១. ការណែន ំអ្ំពី Modules

សៅសេ ស្ដ រម្មវិធីសយើ្កាន់ស្តធំសៅៗ, សយើ្ក្តូវស្តបំស្បរវាជា files សក្ចើនស្ដ files
ទំ្អ ់សនេះក្តូវបានសគសៅថា “Modules”។ Module ម្ួយអាចមាន class ម្ួយឬ library ម្ួយឬ
function ម្ួយឬសក្ចើនសដើម្្បីសដ្េះក្ស្យការងារជារ់លារ់ណ្ម្ួយ។ អ ់រយៈសេ ជាយូរសហើយ
JavaScript ម្ិនមាន language-level module syntax សទ្។ បុស្នតវារ៏ម្ិនស្ម្នជាបញ្ហ្ធំស្ដរ
េីសក្ េះស្តកា សនាេះ scripts (files) មានទ្ំហំតូចៗងាយក្ ួ ក្គប់ក្គ្សៅស ើយ។ បុស្នតចុ្សក្កាយ
scripts នីម្ួយៗកាន់ស្តមានទ្ំហំធំសៅៗ និ្កាន់ស្ត មុគស្្្ញសៅ ដូចសនេះបានជា ហគម្ន៍ (ក្រុម្
JavaScript developers) បានបស្កើតរសបៀបស្្ស្គាន្ជាសក្ចើនសដើម្្បីសរៀបចំរូដជា modules,
ស្ដ មាន special libraries សដើម្្បី load modules សៅាម្តក្ម្ូវការ។
• កា េីម្ុន Module ក្តូវស្ប្ស្ចរជា៖

o AMD - ម្ួយរនុ្ចំសណ្ម្ចា ់ជា្សគរនុ្ module systems, ដ្រ់ឱ្យសក្បើក្បា ់សដ្យ
require.js library (client-side)
o CommonJS - គឺជា module ស្ដ បស្កើតស ើ្សដ្យ Node.js server (server-side)
o UMD - ម្ួយរនុ្ចំសណ្ម្ module systems, ក្តូវបានស នើស ើ្ជា រ ស្ដ ម្
ក្ បទំ្្ AMD និ្ CommonJS (both for client និ្ server side)
ឥ ូវទំ្្អ ់សនេះកាល្យជាស្្នរដនក្បវតតិស្ញ្ច តបសណ្ើរៗ បុស្នតេួរសយើ្សៅស្តស ើញមានខលេះសៅ

រនុ្ script ចា ់ៗ។ The language-level module system បានស ចសចញជារូបរា្ស ើ្សៅ
ឆន្ំ២០១៥ និ្បានវិវតតន៍បនតិចម្ត្ៗរហូតម្រដ ់ឥ ូវ ងមីៗសនេះវាអាចសក្បើក្បា ់បានសៅស ើ browser
ំខាន់ៗ និ្ Node.js។ ដូចសនេះសយើ្នឹ្ ិរ្ាអំេី JavaScript modules ទ្ំសនើបសនេះេីសេ សនេះ
តសៅ។
១.១ What is a module?

Module គឺជា file ឬសៅម្្ា្្សទ្ៀតបានថា script ម្ួយគឺ module ម្ួយ។ Module អាច្ទុរ
Module ស្្ស្សទ្ៀត និ្អាចសក្បើ special directives export និ្ import សដើម្្បផ្
ី ល្ ់បតូរ
ម្ុខងារគាន្សៅវិញសៅម្រ (សៅ function េី module ស្្ស្សទ្ៀតម្រសក្បើសៅរនុ្ខលួនវា)។
• export keyword បញ្ជ្រ់ថា variables និ្ functions គឺអាច access េី module
ស្្ស្សទ្ៀតសក្ៅេី current module រប ់វា
• import keyword អនុញ្ញ្តឱ្យ import នូវម្ុខងារេី modules ដដទ្ស្្ស្សទ្ៀត
ឧទហរណ៍សយើ្មាន file ម្ួយសឈា្្េះថា sum.js ស្ដ exporting function sum៖

សម្សរៀនទ្ី៩ Modules JavaScript
// sum.js
export function sum (a, b) {
return a + b;
}
សយើ្រ៏មាន file ម្ួយសទ្ៀតស្ដ import file ខា្ស ើម្រសក្បើ៖
// main.js
import { sum } from "./sum.js" //*
const result = sum(2, 4);

The import directives ្ទុរនូវ module សដ្យសក្បើក្បា ់ path (./sum.js) ស្ដ ច្អុ
សៅកាន់ sum.js និ្ assign exported function ម្រកាន់អញ្ញតតិ sum ក្ត្់ជួរ //* ។ សដើម្្បីឱ្យ
module ទំ្្េីរស្គ្ គា
់ បា
ន្ នគឺសយើ្ក្តូវសក្បើ attribute type="module" សៅរនុ្ script ស្ដ សយើ្
សក្បើក្បា ់ ក្មាប់ import ដូចខា្សក្កាម្។
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
១.២ Core module features

ភាេខុ គាន្រវា្ regular script និ្ script type=”module” គឺ script type=”module”
គឺស្ត្ស្តដំសណើរការសៅរនុ្ strict mode។
<script type="module">
num = 10; // ReferenceError: num is not defined
</script>

➢ Module-level scope
Module នីម្ួយៗមាន top-level scope រប ់វា។ top-level variables និ្ functions

ស្ដ ម្ិនអាចសៅសក្បើសៅរនុ្ script ដដទ្ស្្ស្សទ្ៀត។
// maxNumber.js
const MAX_NUMBER = 100;
// displayMaxNumber.js
console.log(MAX_NUMBER); // ReferenceError: MAX_NUMBER is not defined
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="module" src="displayMaxNumber.js"></script>
<script type="module" src="maxNumber.js"></script>
</body>
</html>
Modules គួរស្ត export នូវអែីស្ដ េួរសគច្់បានសដើម្្បីអាច access េី module ស្្ស្សទ្ៀតបាន

និ្ import សៅអែីស្ដ សគក្តូវការ៖
• maxNumber.js គឺគួរស្ត export អញ្ញតតិ MAX_NUMBER
• displayMaxNumber.js គឺគួរស្ត import អញ្ញតតិសនាេះេី maxNumber.js
មានន័យថាសៅសេ ស្ដ សយើ្សក្បើ script ជាក្បសភទ្ module សយើ្គួរស្តសក្បើ import/export
ជំនួ សដ្យការេឹ្ស្្អរស ើ global variables។
➢ រូដរប ់ module គឺក្តូវបានវាយតដម្ល (evaluated) ស្តម្ត្បុសណ្្្េះសៅសេ ស្ដ ក្តូវបាន

import។
ក្ប ិនសបើ module ក្តូវបាន import សៅរនុ្ modules ដដទ្សក្ចើនសទ្ៀត, រូដរប ់វាគឺក្តូវបាន
ដំសណើរការស្តម្ត្បុសណ្្្េះ អាក្ ័យស ើការ import ដំបូ្ប្អ ់។ បនាទ្ប់ម្រ exports
(variables និ្ functions) រប ់វាក្តូវបាន្ត ់សៅឱ្យ importers (module ស្ដ
import េីវា) ទំ្្អ ់។ One-time evaluation
មាន្ អវិជជមាន ំខាន់ៗស្ដ សយើ្គួរយ ់ដឹ្។

// console.js
console.log("Module evaluated!");
// a.js
import "./console.js"; // Module evaluated!
// b.js
import "./console.js"; // Nothing shows
<html>
<head>
</head>
<body>
<script type="module" src="a.js"></script>
<script type="module" src="b.js"></script>
</body>
</html>
Import ទ្ីេីរ (b.js) ម្ិនបានបងាហ្ញអែីសទ្ េីសក្ េះ module ក្តូវបានវាយតដម្ល (evaluated)

ម្ត្រួចសហើយ។ ជាទ្ូសៅ top-level module រូដក្តូវបានសក្បើ ក្មាប់ស្តការក្បកា សដើម្្បីបស្កើត
internal data ក្មាប់ស្ត module ខលួនវាស្តបុសណ្្្េះ។ ក្ប ិនសបើសយើ្ច្់បស្កើតអែីស្ដ អាច
សៅសក្បើសក្ចើនដ្បាន សយើ្គួរស្ត export វាជា function ដូចសៅហនឹ្ sum.js រនុ្ឧទហរណ៍
ដំបូ្អ៊ីចឹ្។
ឥ ូវសយើ្េិនិត្យសម្ើ ឧទហរណ៍ខា្សក្កាម្៖
// user.js
export const user = {
name: "Dara",
age: 20
};
// a.js
import { user } from "./user.js";
user.age = 30;
console.log(user); // { name: 'Dara', age: 30 }

// b.js
import { user } from "./user.js";
console.log(user); // { name: 'Dara', age: 30 }
ដូចស្ដ សយើ្បានស ើញសហើយ សៅសេ a.js បានផ្ល្ ់បតូរតដម្ល property (age) រប ់

object user (សៅរនុ្ user.js) សនាេះ b.js នឹ្ទ្ទ្ួ តដម្លស្ដ បានផ្ល្ ់បតូរសនាេះដូចគាន្។ ស្ដ
សនេះបញ្ជ្រ់យ្្ច្ា ់ថា module ក្តូវបានដំសណើរការស្តម្ត្បុសណ្្្េះ។ បនាទ្ប់ម្រ exports
រប ់វាក្តូវបានបស្កើត និ្ក្តូវបានស្ចរចាយ (share) សៅកាន់ importers ដូសចនេះសហើយ
ក្ប ិនសបើមានការផ្ល្ ់បតូរតដម្លរប ់ object user សនាេះ module ស្្ស្សទ្ៀតនឹ្ទ្ទ្ួ បានតដម្ល
ងមីសនាេះដូចគាន្។
➢ សៅរនុ្ module, “this” គឺ undefined
សៅរនុ្ module, top-level “this” គឺស មើនឹ្ undefined។

<script>
console.log(this); // window
</script>
console.log(this); // undefined
</script>

១.៣ Browser-specific features

មាន browser-specific ខលេះមានភាេខុ គាន្រវា្ scripts ស្ដ មាន type=“module” និ្
regular scripts។
➢ Module scripts គឺ deferred

Module scripts គឺស្ត្ស្ត deferred, deferred មានន័យថា៖
o សៅសេ download external module scripts <script type="module"
src="..."> គឺម្ិនបានបឈ្ឈប់ដំសណើរការរប ់ HTML សទ្, េួរវាដំសណើរការក្ បគាន្

រនុ្សេ ស្តម្ួយជាម្ួយនឹ្ resources ស្្ស្សទ្ៀត។
o Module scripts សធែើការរ្់ចាំរហូតដ ់ HTML documents download រួចរា ់
ទំ្្ក្ ុ្ បានវាដំសណើរការបនត។
o ំដ្ប់ដន scripts គឺបានសរៀបចំាម្ ំដ្ប់ ំសដ្យ៖ scripts ស្ដ រស រម្ុន
គឺក្តូវបានដំសណើរការម្ុន
console.log(typeof button); // *
</script>
// Compare to regular script below:
<script>
console.log(typeof button); // **
</script>
<button id="button">Button</button>
សៅសេ ស្ដ សយើ្ដំសណើរការរូដខា្ស ើសយើ្ស ើញថាក្ត្់ជួរ // ** បងាហ្ញ ទ្ធ្

undefined េីសក្ េះស្តវាជាក្បសភទ្ regular script វាដំសណើរការភាល្ម្ៗម្ុននឹ្ HTML
download សហើយទំ្្ក្ ុ្ ដូចសនេះវាអត់ជួប <button id="button">Button</button>
ចំស្នរ script type=“module” ក្ត្់ជួរ // * បងាហ្ញ ទ្ធ្ object េីសក្ េះវាចាំ្រហូតដ ់
HMTL download completely បានវាដំសណើរការបនត។ ម្្ា្្វិញសទ្ៀតសយើ្ក្តូវដឹ្ថាសទេះបី
ជា script type=“module” រស រម្ុន regular script រ៏សដ្យរ៏វាបងាហ្ញ ទ្ធ្ សក្កាយ
ស្ដរេីសក្ េះវាជាក្បសភទ្ deferred។

➢ ម្ិនមាន “bare” modules ណ្ក្តូវបានអនុញ្ញ្តឱ្យសក្បើ

Bare modules គឺជា modules ទំ្្ឡាយណ្ស្ដ គា្្ន path។ Modules ក្បសភទ្សនេះ
ម្ិនក្តូវបានអនុញ្ញ្តឱ្យសក្បើក្បា ់សៅរនុ្ import សទ្។
import { sum } from "sum.js" ; // Error
Module គួរស្តមាន path ដូចជា ( ./sum.js )។
1. Modules គឺជា files។ សដើម្្បីដំសណើរការ import/export បាន browsers ក្តូវការ script
type="module"។ Modules មានភាេខុ េី regular scripts៖
o Derred by default
o ម្ិនមាន “bare” modules ណ្ក្តូវបានអនុញ្ញ្តឱ្យសក្បើក្បា ់សទ្
o External script ស្ដ មាន src ដូចគាន្ដំសណើរការស្តម្ត្បុសណ្្្េះ
2. Modules គួរមាន local top-level scope ស្ដ ជារប ់ខលួនវាផ្ទ្ ់សដើម្្បីសធែើការផ្ល្ ់បតូរ
ម្ុខងារគាន្ាម្រយៈ import/export
3. Modules ស្ត្ស្តសក្បើ strict mode (use strict) by default
សៅសេ សយើ្សក្បើក្បា ់ modules, module នីម្ួយៗ implement functionality និ្

exports functions ទំ្្សនាេះ។ បនាទ្ប់ម្រសយើ្អាចសក្បើ import directive សដើម្្បី import
functions ស្ដ សយើ្ក្តូវការ។
២. Export និង Import

Export និ្ import directives មានបួន ក្បាំទ្ក្ម្្់ដនការសក្បើក្បា ់។
២.១ Export before declarations

សយើ្អាចសក្បើ export directive សៅេីម្ុខ declarations (variable, function, class …)
សដើម្្បី export។
// export an array
export let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'];
// export a constant
export const YEAR = 2015;

// export a class
export class User {
constructor(name) {
this.name = name;
}
}
២.២ Export apart from declarations

return a + b;
}
function multiple(a, b) {
return a * b;
}
export { sum, multiple }; // a list of exported
២.៣ Import *
ក្ប ិនសបើសៅរនុ្ a list of exported មានសក្ចើនសយើ្អាចសក្បើ import * as <obj> សដើម្្បី
import ម្រទំ្្អ ់។
import * as op from "./operation.js";
op.sum(2, -8);
op.divide(4, 2);
២.៤ Import “as”

សយើ្អាចសក្បើ “as” សដើម្្បីសធែើការបតូរសឈា្្េះអញ្ញតតិ។
import { sum as plus, divide as div } from "./operation.js";
plus(2, -7);
div(3, 3);
២.៥ Export “as”

return a + b;
}

function multiple(a, b) {
return a * b;
}
export { sum as plus, multiple as mul };
២.៦ Export default

រនុ្ការអនុវតតមាន modules េីរក្បសភទ្ ំខាន់ៗ៖
1. Modules ស្ដ ្ទុរ library ( បនតុំដន functions )
2. Modules ស្ដ ក្បកា ជា single entity (ឧ.ទ្៖ exports ស្ត class បុសណ្្្េះ)
ភាគសក្ចើនជសក្ម្ើ ទ្ីេីរក្តូវបានសគនិយម្ជា្, េីសក្ េះអែីៗទំ្្អ ់គឺ ែិតសៅរនុ្ module ខលួនវា

ផ្ទ្ ់។ សៅរនុ្ module សយើ្ export ស្តម្ួយ entity ស្បបសនេះសយើ្គួរសក្បើ special syntax
export default ស្ដ សម្ើ សៅងាយក្ ួ សក្បើក្បា ់ជា្ និ្អាចឱ្យសគដឹ្ថា module ហនឹ្មាន
ស្តម្ួយ entity បុសណ្្្េះ។
//animal.js
export default class Animal {
constructor(name) {
this.name = name;
}
}
// main.js
import Animal from "./animal.js"; // *
const dog = new Animal("Tony");

console.log(dog.name); // Tony
ក្ត្់ជួរ // * សៅសេ ស្ដ សយើ្សក្បើក្បា ់ export default, សយើ្ import សដ្យម្ិនចាំ្បាច់
សក្បើក្បា ់ curly braces ( { } ) សទ្។ រំហុ ជាទ្ូសៅ ក្មាប់អនរចាប់ស្តើម្សក្បើ modules ដំបូ្
គឺេួរគាត់សភលចសក្បើ curly braces, ដូសចនេះសយើ្ក្តូវចំណ្ំ្ថា import ក្តូវការសក្បើ curly braces
ក្មាប់ស្ត named exports បុសណ្្្េះ ចំស្នរឯ export default ម្ិនក្តូវការសទ្។
ឧទហរណ៍ named exports៖
export class Aminal {
constructor(name) {
this.name = name;
}
}
ឧទហរណ៍ export default៖

export default class Animal {
constructor(name) {

this.name = name;
}
}
ម្្ា្្វិញសទ្ៀតសយើ្រ៏អាចសក្បើទំ្្េីរ (named export និ្ export default) សៅរនុ្

module ស្តម្ួយបានដូចគាន្។ បុស្នតសដើម្្បីភាេងាយក្ ួ គឺសយើ្ម្ិនសក្បើក្បា ់វាលាយ ំគាន្សទ្។
ស ើ េីសនេះ export default អាចមានសឈា្្េះ ឬអត់សឈា្្េះរ៏បាន។
export default class Animal { // មានឈ្ម ោះ (Animal)
constructor(name) {
this.name = name;
}
}
export default class { // មិនមានឈ្ម ោះ

constructor(name) {
this.name = name;
}
}
ក្មាប់ named export, ក្ប ិនសបើសយើ្ម្ិនដ្រ់សឈា្្េះឱ្យសទ្នឹ្មាន error៖

export class { // Error
constructor(name) {
this.name = name;
}
}
ចំណ្ំ៖ import/export statements នឹ្ម្ិនដំសណើរការក្ប ិនសបើវា ែិតសៅរនុ្ { … }៖

if (true) {
import Aminal from "./animal.js"; // doesn’t work
}
៣. Dynamic imports
Export និ្ import statements ស្ដ សយើ្បាន ិរ្ាសៅរនុ្ចំនុចម្ុនក្តូវបានសគសៅថា
“static”។ Static import គឺស្ម្ញ្ញនិ្មានច្ាប់តឹ្រឹ្៖
• ទ្ីម្ួយសយើ្ម្ិនអាចសក្បើ parameters ជាម្ួយ import។ Module path ក្តូវស្តជា string,
ម្ិនអាចជា function call។
import { something } from getModuleName(); // Error,
• ទ្ីេីរសយើ្ម្ិនអាចសក្បើសៅរនុ្ { … } ដូចជាសៅរនុ្ if else ជាសដើម្។

if (true) {

import Aminal from "./animal.js"; // doesn’t work

}
ចំនុចទំ្្អ ់សនេះ េីសក្ េះស្ត import/export មានសគា បំណ្្ត ន

់ ូវសក្គា្្អឹ្ ក្មាប់
រចនា ម្ព័នធរប ់រូដបុសណ្្្េះ។ វាជាសរឿ្ អសដ្យស្រស្តរចនា ម្ព័នធរប ់រូដអាចក្តូវបានវិភាគ,
modules អាចក្តូវបានក្បម្ូ ្តុំ និ្បញ្េូ សៅរនុ្ file ម្ួយសដ្យសក្បើក្បា ់ឧបររណ៍េិស ៗ,
ជាេិស exports ស្ដ ម្ិនបានសក្បើនឹ្ក្តូវបាន ុបសចញ (tree-shaken)។
ដំសណើរការសនេះអាចសធែើ សៅបាន ុេះក្ាស្តរចនា ម្ព័នធរប ់ import/export គឺស្ម្ញ្ញ
និ្ម្ិនស្ក្បក្បួ ។ បុស្នតសតើសយើ្អាច import module (សៅសេ ស្ដ សយើ្ក្តូវការស្តបុសណ្្្េះ)
បានសដ្យរសបៀបណ្?
៣.១ The import() expression

The import(module) expression ដំសណើរការ module បនាទ្ប់ម្រ return ជា promise
ស្ដ resolve សៅជា module object, រនុ្ module object សនេះ្ទុរ exports រប ់វាទំ្្អ ់។
import(modulePath)
.then((obj) => <module object>)
.catch((err) => <error object>)
ម្្ា្្សទ្ៀតសយើ្អាចសក្បើ let module = await import(modulePath); ក្ប ិនសបើវា ែិតរនុ្

async function ឬ script រប ់វាមាន attribute type=“module”។

// operation.js
export function sum(a, b) {
return a + b;
}
export function multiple(a, b) {

return a * b;
}
// main.js
let { sum, multiple } = await import("./operation.js");
console.log(sum(2, 2)); // 4
console.log(multiple(4, 4)); // 16
/animal.js
export default class {
constructor(name) {
this.name = name;
}
}
// main.js
let Animal = await import("./animal.js");
const animal = new Animal.default("Kie Kie");

console.log(animal.name); // Kie Kie
ចំណ្ំ៖ Dynamic imports ដំសណើរការសៅរនុ្ regular scripts , ដូចសនេះសៅរនុ្ script

មាន ឬម្ិនមាន type=“module” បានដូចគាន្។ បុស្នតសបើ script សនាេះម្ិនមាន type=“module” សទ្,
រូដរប ់ module សនាេះក្តូវស្តសក្បើសៅរនុ្ async function។

ស្ូម្អ្រ្ុែ!

JavaScript
Shortcut Key

JavaScrpt From Beginner To Advanced

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScrpt From Beginner To Advanced

Uploaded by

Copyright:

Available Formats

ក្របស ៀវសៅ

ការ រស ររូដបស្កើតជារម្មវិធីសដើម្្បីបំសេញតក្ម្ូវការជារ់ស្ ែ្រប ់ម្នុ ្ស រំេុ្ស្តសដើរតួយ្្

©ររ្ា ិទ្ធិក្គប់យ្្សដ្យ សាលាម៉ាស្ទរ័ អាយ

មេម ៀនទី១ មេចក្តណី ែន ាំ Introduction ............................................................................ 4

១. សតើ JavaScript គឺជាអែី? .......................................................................................... 4

២. សហតុអែីបានជាក្តូវសរៀន JavaScript? ......................................................................... 4

៣. ការចុេះសឈា្្េះនិ្រសបៀបសក្បើក្បា ់ replit.com .............................................................. 4

មេម ៀនទី២ ........................................................................ េូ លដ្ឋានគ្រឹះមៅក្នុងភាសា JavaScript

១.១ ការសក្បើក្បា ់ document.write ........................................................................ 7

១.២ ការសក្បើក្បា ់ console.log ................................................................................ 7

១.៣ ការសក្បើក្បា ់ alert ......................................................................................... 8

១.៤ ការសក្បើក្បា ់ prompt...................................................................................... 8

១.៥ Limitation សៅរនុ្ script tag ........................................................................ 9

២. អញ្ញតតិ Variable ................................................................................................... 9

២.១ អញ្ញតតិ let ...................................................................................................... 9

២.២ អញ្ញតតិ var ................................................................................................... 10

២.៣ អញ្ញតតិ const ................................................................................................ 10

២.៤ ការដ្រ់សឈា្្េះអញ្ញតតិ (Variable) ..................................................................... 10

៣. ក្បសភទ្ទ្ិននន័យ Data types .................................................................................. 11

៣.១ Number .................................................................................................... 11

៣.២ BigInt ....................................................................................................... 11

៣.៣ String ....................................................................................................... 11

៣.៤ Boolean ..................................................................................................... 12

៣.៥ The “null” value........................................................................................ 12

៣.៦ The “undefined” value .............................................................................. 12

៣.៧ Objects ..................................................................................................... 12

៤. ការផ្ល្ ់បតូរក្បសភទ្ទ្ិននន័យ Type Conversion.......................................................... 14

៤.១ String Conversion ..................................................................................... 14

៤.២ Numeric Conversion ................................................................................. 14

៤.៣ Boolean Conversion .................................................................................. 16

៥. Basic operators, maths .................................................................................... 16

៥.១ Maths operations ...................................................................................... 17

៥.២ String Concatenation with binary + ......................................................... 17

៥.៣ Numeric conversion, unary + ................................................................... 18

៥.៤ Operator precedence ................................................................................. 18

៦. ការសក្បៀបសធៀប Comparisons ............................................................................... 19

៦.១ ការសក្បៀបសធៀប String ................................................................................... 19

៦.២ ការសក្បៀបសធៀបរវា្ក្បសភទ្ទ្ិននន័យខុ គាន្ .......................................................... 19

៦.៣ Strict equality........................................................................................... 20

៦.៤ ទ្ធ្ ចំស្ រសៅសេ សក្បៀបសធៀប null vs 0 ................................................... 21

៧. Conditional branching: if, '?' ........................................................................... 21

៧.១ The “if” statement .................................................................................... 21

៧.២ Boolean conversion ................................................................................... 22

៧.៣ The “else” clause ...................................................................................... 22

៧.៤ Several conditions: “else if” ...................................................................... 23

៧.៤ Conditional operator “? : “ ........................................................................ 23

៨. Logical operators ............................................................................................. 24

៨.១ Logical operator (OR) ||........................................................................... 24

៨.២ Logical operator (AND) && ...................................................................... 25

៨.៣ Logical operator (NOT) ! ........................................................................... 25

៩. Nullish coalescing operator “??” ...................................................................... 25

១០. Loops: while, do…while និ្ for loop .............................................................. 27

១០.២ The “do…while” loop .............................................................................. 28

១០.៣ The “for” loop ......................................................................................... 30

១០.៤ Breaking the loop ................................................................................... 31

១០.៥ Continue to the next iteration................................................................ 31

១១. The “switch” statement................................................................................. 32

១២. Functions ...................................................................................................... 34

១២.១ ការក្បកា Function (Function Declaration) ........................................... 35

១២.២ Local variables....................................................................................... 35

១២.៣ Outer variables...................................................................................... 36

១២.៣ Parameters ............................................................................................ 36

១២.៤ Default values ........................................................................................ 37