ការបង្កើត function របស់ Javascript មានបីរបៀបគឺ៖
Function Declaration
ទំរង function បែបនេះគឺជាទំរងទូទៅសំរាប់យើងរៀនដំបូង
fuction name(){}
<body>
<div class="demo">Demo</div>
</body>
<script>
function myFunction(){
document.querySelector(".demo").innerHTML = "Hello Ros Dul"
}
//call function to use
myFunction()
</script>
</html>
function មាន parameter <body>
<div class="demo">Demo</div>
</body>
<script>
function myFunction(name){
document.querySelector(".demo").innerHTML = name
}
//call function to use
myFunction("Hello Ros Dul")
</script>
</html>
Function Expression
ការបង្កើត variable មាន function វាដូច function ខាងលើដែរ
var name = function(){}
<body>
<div class="demo">Demo</div>
</body>
<script>
var nameFunction = function(){
document.querySelector(".demo").innerHTML = "Hello Ros Dul"
}
nameFunction()
</script>
</html>
function មាន parameter <body>
<div class="demo">Demo</div>
</body>
<script>
var nameFunction = function(name){
document.querySelector(".demo").innerHTML = name
}
let myName = "Hello Ros Dul"
nameFunction(myName)
</script>
</html>
Arrow Functions
ការបង្កើតបែបនេះហៅថា narrow fuction ដោយសារវាសរសេរខ្មី យើងមិនបាចសរសេរ function ទៀតទេ
var name = () =>{}
<body>
<div id="demo">Demo</div>
</body>
<script>
myFuntion =()=>{
document.getElementById("demo").innerHTML = "Hello Ros DUL"
}
myFuntion()
</script>
</html>
<body>
<div id="demo">Demo</div>
</body>
<script>
myFuntion =(myName)=>{
document.getElementById("demo").innerHTML = myName
}
myFuntion("Hello Ros DUL")
</script>
</html>
return function
return function មានន័យថា function យើងមាន return value។ return នេះ ប្រសិនជាfunction យើងមាន return ហើយវាដើរដល់ return នោះវាដើរត្រឡប់ទៅលើវិញ វាលែងទៅមុទៀតហើយ។
ហើយនេះគឺជា ឧទាហរណ័នៃ return function
<body>
<div id="demo">Demo</div>
</body>
<script>
let txt = document.getElementById("demo")
function myFuntion(p){
return txt.innerHTML = p
}
myFuntion("Hello Ros DUL")
</script>
return narrow function
<body>
<div id="demo">Demo</div>
</body>
<script>
let txt = document.getElementById("demo")
myFuntion = name => "Hello Ros DUL"
txt.innerHTML = myFuntion(name)
</script>
</html>
<body>
<div id="demo">Demo</div>
</body>
<script>
let a = 40
let b = 20
myFuntion = () => a + b
document.getElementById("demo").innerHTML = "Total: "+ myFuntion()
</script>
</html>
Parameters និង Arguments
សម្រាប់ Parameters យើងបានសិក្សាខ្លះៗរួចហើយវាគឺ Variable ដែលបានប្រកាសនៅក្នុង function (ដែលសម្រាប់ទទួល arguments)
Arguments
arguments គឺជាតម្លៃដែលអ្នកផ្ញើចូលទៅក្នុង function នៅពេលដែលអ្នកហៅវា។
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Dul")//Dul;
ដោយ Dul គឺជា Arguments
Default Parameters
ប្រើសម្រាប់កំណត់តម្លៃលំនាំដើម (default value) ដើម្បីជៀសវាង undefined។
function greet(name = "Guest") {
console.log("Hello, " + name + "!");
}
greet(); // 👉 Hello, Guest!
greet("Lina"); // 👉 Hello, Lina!
Rest Parameters (...args)
Rest Parameters (...args) Rest parameters (...args) គឺជា ES6 feature ដែលអាចប្រើជំនួស arguments object ដើម្បីទទួល arguments ជារាយនាម។
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
function sumAll(...nums) {
return nums.reduce((total, num) => total + num, 0);
}
console.log(sumAll(1, 2, 3, 4, 5)); // 👉 15
0 Comments