Mga Function sa JavaScript
Ipinaliliwanag ng artikulong ito ang mga function sa JavaScript.
YouTube Video
Mga Function sa JavaScript
Mga Function sa JavaScript ay mga bloke ng reusable na code na ginagamit upang magsagawa ng partikular na mga gawain. Ang paggamit ng mga function ay nagpapabuti sa readability ng code at nagpapadali ng maintenance. Ang mga function ay maaaring ideklara sa iba't ibang paraan at maaaring manipulahin nang flexible gamit ang mga argumento at return value.
Mga Paraan ng Pagdedeklara ng Function
Deklarasyon ng Function
Maaaring tukuyin ang mga function gamit ang keyword na function. Ang mga deklarasyon ng function ay inaangat bago tumakbo ang code, kaya maaari silang tawagin bago pa sila ideklara.
1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4 return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice
Sa halimbawang ito, dahil ang function na greet ay tinatawag bago ang deklarasyon nito, Hello, Everyone at Hello, Alice ang ipapakita.
Expression ng Function
Ang mga function ay maaari ring ideklara sa pamamagitan ng pag-assign sa mga ito sa isang variable. Sa kasong ito, ang function ay hindi inaangat at maaari lamang tawagin pagkatapos itong ideklara.
1const greet = function(name) {
2 return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob
Sa halimbawang ito, Hello, Bob ang ipapakita.
Arrow Function
Ang arrow functions ay isang paraan upang magdeklara ng function gamit ang mas maikling syntax. Ito ay partikular na kapaki-pakinabang kapag gumagamit ng mga anonymous function (mga function na walang pangalan). Ang arrow functions ay may kakaibang asal kaugnay ng this keyword.
1const greet = (name) => {
2 return "Hello, " + name;
3};
4
5// When it can be expressed in a single line,
6// `return` and curly braces can be omitted
7const greetShort = name => "Hello, " + name;
8
9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave
Ang mga function ay maaaring ideklara bilang greet at greetShort sa halimbawang ito. Kung ang function ay isang linya lamang, maaaring tanggalin ang {} (curly braces) tulad ng greetShort.
Mga Elemento ng Function
Mga Argumento
Ang mga halaga na ipinapasa sa isang function ay tinatawag na argumento. Sa pamamagitan ng pagtukoy ng mga argumento kapag nagdeklara ng isang function, maaari kang magpasa ng mga halaga kapag tinatawag ang function.
1function add(a, b) {
2 return a + b;
3}
4
5console.log(add(2, 3)); // 5
Mga Default na Argumento
Maaari kang magtakda ng default na halaga kung walang halaga ang naipasa sa mga argumento.
1function greet(name = "Guest") {
2 return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice
Sa halimbawang ito, kung tinawag ang greet(), ang default na Guest ay gagamitin.
Halagang Ibinabalik
Maaari kang magbalik ng halagang ibinabalik mula sa isang function gamit ang return na pahayag. Kung walang return na pahayag, ang function ay nagbabalik ng undefined.
1function greet(name) {
2 console.log('Hello, ' + name + '!');
3}
4function square(num) {
5 return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined
Sa halimbawang ito, dahil walang ibinabalik na halaga ang greet, ang ibinabalik na halaga ay undefined.
Anonymous na Function
Ang function na walang pangalan ay tinatawag na anonymous na function. Kadalasan silang ginagamit bilang mga pagpapahayag ng function o mga arrow na function.
1const double = function(num) {
2 return num * 2;
3};
4
5console.log(double(5)); // 10
Agad na Tinawag na Function Expression (IIFE)
Ang Agad na Tinawag na Function Expression (IIFE) ay isang function na inaasahang agad pagkatapos itong ideklara. Karaniwan itong ginagamit upang kontrolin ang saklaw.
1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3 console.log("This is an IIFE");
4})(); // This is an IIFE
Inaasahang agad ito pagkatapos ideklara.
Callback na Function
Ang pagpasa ng isang function bilang argumento sa isa pang function, para sa susunod na pagsagawa, ay tinatawag na callback na function. Karaniwan itong ginagamit sa asynchronous na pagpoproseso at paghawak ng mga kaganapan.
1function processData(callback) {
2 let data = "Processed Data";
3 callback(data);
4}
5
6processData(function(result) {
7 console.log(result); // Processed Data
8});Sa halimbawang ito, isang function na nagpapalabas ng halaga sa console ang ipinasa bilang isang callback na function.
Rekursibong Function
Ang pagtawag sa sarili nitong function ay tinatawag na recursion, at ang function na gumagawa ng paulit-ulit na proseso gamit ito ay tinatawag na rekursibong function. Halimbawa, ang isang function upang kalkulahin ang factorial ay maaaring magamit gamit ang recursion sa sumusunod na paraan.
1function factorial(n) {
2 if (n === 0) {
3 return 1;
4 } else {
5 return n * factorial(n - 1);
6 }
7}
8
9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)
Sa halimbawang ito, ang factorial ng 5, na 120, ay ipapakita.
this na Keyword
Ang this na ginagamit sa loob ng isang function ay tumutukoy sa kung aling object ang tinutukoy ng function. Sa isang regular na function, ito ay tumutukoy sa tumatawag na object, ngunit sa mga arrow na function, pinapanatili nito ang this ng saklaw kung saan ito naideklara.
1const obj = {
2 name: "Alice",
3 greet: function() {
4 console.log(this.name); // Refers to "Alice"
5 }
6};
7
8obj.greet(); // Alice
9
10const obj2 = {
11 name: "Bob",
12 greet: () => {
13 // Arrow function refers to the outer scope (undefined here)
14 console.log(this.name);
15 }
16};
17
18obj2.greet(); // undefined
Ang greet ng variable na obj ay idineklara gamit ang keyword na function. Samakatuwid, ang keyword na this ay tumutukoy sa object ng variable na obj. Sa kabilang banda, ang greet ng variable na obj2 ay idineklara gamit ang isang arrow function. Samakatuwid, ang keyword na this ay tumutukoy sa object sa labas ng saklaw at undefined ito sa halimbawa na ito.
Saklaw ng Function at Closures
Ang mga variable na tinukoy sa loob ng isang function ay hindi maaaring ma-access mula sa labas ng function. Ito ay tinatawag na saklaw ng function. Mayroon ding tampok na tinatawag na closure na nagpapanatili ng saklaw sa sandaling ang function ay tinukoy.
1function outer() {
2 let outerVar = "I am outer!";
3
4 function inner() {
5 console.log(outerVar); // Can access outerVar
6 }
7
8 return inner;
9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!
Sa halimbawang ito, ang inner na function ay maaaring ma-access ang variable na outerVar dahil pinanatili nito ang saklaw kung saan ito tinukoy.
Buod
- Mayroong iba't ibang paraan upang tukuyin ang mga function, kabilang ang function declarations, function expressions, at arrow functions.
- Ang mga function ay maaaring kumuha ng arguments at magbalik ng values.
- May mga espesyal na gamit gaya ng callback functions at recursive functions.
- Dapat mag-ingat sa paghawak ng
this, dahil magkaiba ang asal ng arrow functions at regular functions. - Maaaring gamitin ang closures upang ma-access ang mga panloob na variable mula sa labas ng saklaw.
Ang mga function ay isa sa mahahalagang konsepto sa JavaScript, na ginagamit ang kakayahang umangkop ng istruktura nito.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.