Advertisement
  1. Code
  2. JavaScript

Matuto ng Computer Science Gamit ang JavaScript: Ika-apat na Parte, Mga Function

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Learn Computer Science with JavaScript.
Learn Computer Science With JavaScript: Part 2, Conditionals
Learn Computer Science With JavaScript: Part 3, Loops

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Pagsisimula

Ipagpalagay na mayroong kang file na 82 linya ang haba at puro lamang serye ng pahayag (sana ay hindi ito totoo, ngunit posible ang kahit ano). Paano maiintindihan kung anong ginagawa ng program? Paano mo gagamitin o babaguhin? Magiging mahirap gamitin ang code na ito dahil walang estruktura.

Upang masolusyonan ang problema, maaaring gumamit ng mga function. Ang function ay grupo ng mga statement na may espesipikong gawain. Ang mga function ay ginagamit upang mahati ang isang programa sa mas maliliit pang mga programa, ginagawang mas madaling basahin, gamitin at subukin ang code.

Nilalaman

  • Mga void na function
  • Saklaw
  • Ang saklaw
  • Parametro
  • Modulo

Mga void na function

Ang ganitong uri ng function ay naglilista ng mga hakbang para gumana ang programa. Isipin na nagsusulat ng programa upang mag-log sa isang website. Ang programa ay maaaring mayroong sumusunod na mga gawain:

  • Kunin ang username
  • Kunin ang password
  • Tignan kung may umiiral na username at password
  • Pagdala sa user tungo sa kanilang dashboard

Ang bawat hakbang ay maaaring nasa loob ng isang login function. Ito ang halimbawa ng function:

Ito ang pangkalahatang anyo ng isang function:

Upang maisagawa ang function (na tinatawag ding pag-call sa function of pag-invoke sa function), magsusulat ng statement na tinatawag ito.

Ang () ay kung saang dinadaan ang input papunta sa function. Kapag binibigyang depinisyon ang function, ang input ay tinatawag na parameter. Kapag tinatawag ang function, ang input ay magiging ang aktwal na halaga at tinatawag na argument. Halimbawa:

Sa JavaScript ES6, maaaring bigyan-kahulugan ang mga function gamit ang arrow syntax. Ito ang aming greet function ba ginamitan ng arrow syntax:

Function na may isang parametro:

Function na mayroong higit sa isang parametro:

Function na mayroong maraming statement:

Dahil ang arrow function ay isang di-kilalang function, bibigyan ng pangalan ang ating function sa paglagay nito sa isang variable. Ang mga arrow function ay maaaring gamitin tuwing ang function body ay mayroon lang isang statement.

Function na nagbabalik ng halaga

Ang ganitong klaseng function ay magbabalik ng isang halaga. Ang function ang kailangang matapos gamit ang return statement. Ang halimbawa na ito ay nagbabalik ng pagdagdag ng dalawang numero.

Ito ang pangkalahatang anyo na nagdedepinisyon sa isang function na nagbabalik ng halaga:

Ang halaga ng ekspresyon ay ang nakakakuha ng output mula sa function. Ang ganitong uri ng function ay magagamit tuwing nakalagay sa isang variable.

Ang saklaw

Ang saklaw ng variable ay ang bahagi ng programa kung saan maaaring makuha ang variable. Ang variable ay maaaring maging local o global. Ang saklaw ng local variable ay nasa loob ng function kung saan ito ginawa. Walang code sa labas ng fution ay maaaaring kunin ang mga local variable nito.

Tuwing gagamitin ang let o const upang magtawag ng variable, mayroong saklaw na block. Ang block ay hanay ng mga statement na ipinagsama sa isang grupo. Ang block ay maaaaring kasing simple lang ng pagbalot ng code sa loob ng curly braces:

Ang variable a ay lokal sa block kung nasaan io. Ang block ay maaari ring maging loop of if statement. Halimbawa:

Dahil ang ating console statement ay nasa parehong saklaw ng naunang variable a, ipinapakita ang halagang ito, na 1. Hindi nito makukuha ang mga variable kung nasa loob ng block. Ngayon, ikonsidera ang halimbawang ito:

Ngayon 2 ang ipapakita dahil ang saklaw ng mga variable na maaaring kunin ng console statement ay nasa loob ng if block. Ang mga parametro ng funtion ay mga local variable din at maaari lang kunin ng code na nasa loob ng function. Ang mga global variable, sa kabilang banda, ay maaaring kunin ng lahat ng statement sa file ng isang programa. Halimbawa:

Sa halimbawang ito, ang a ay isang global variable, at maaari itong gamitin sa loob ng foo funtion. Ang unang console statement ay magpapakita ng 1. Matapos tawagin foo, ang halaga ng a ay ilalagay sa 2, upang maging 2 ang ipinapakita ng pangalawang console statement.

Ang mga global variable ay hindi dapat masyadong ginagamit, sana ay hindi talaga. Dahil ang global variable ay maaaring gamitin ng kahit anong parte ng programa, mayroong panganib na mabago ang mga ito sa mga hindi inaasahang paraan. Sa isang malaking programa na mayroong libo-libong linya ng code, nagiging mas mahirap intindihin ang isang programa dahil mahirap makita kung paano ginagamit ang variable. Mas maganang gumawa at gumamit ng mga local variable.

Ngunit kung kailangang gumamit ng variable sa iba’t ibang lugar sa iyong programa, ayos lang gumamit ng global constant. Maiiwasang magbago ang variable sa pagdeklara nito gamit ng const keyword, ginagawa itong mas ligtas na gamitin. Ang kailangan lang isipin ay ang pag-update ng halaga ng constant sa lugar kung saan ito dineklara.

Mga Parametro

Tandaan na ang parametro ay isang variable na ginagamit ng function upang tumanggap ng data. Ang parametro ay binibigyan ng halaga ng mga argument ng function tuwing tinatawag ang function. Sa ES6, ang mga parametro ay maaari ring bigyan ng default value gamit ang format parameterName=value. Sa kasong ito, maaaring tumawag ng function nang walang argumento, at gagamit ito ng mga default value.

Ang operator para sa bilis/pahinga ay bago sa ES6 at maaaring gamitin upang palawakin ang array o object sa indibidwal na mga halaga o pagsamahin ang mga parametro ng function sa isang array. Ito ay halimbawa ng paggamit ng rest parameter:

Mga Modulo

Halimbawa ay mayroong file na may 1,082 na linya. (Nakakaita na ako ng ganito, at tumakbo na kayo kapag nakakita ng ganito.) Ang file ay nakaayos sa mga function, ngunit mahirap makita paano sila nag-uugnay sa isa’t isa.

Upang maigrupo ang magkakatulad, dapat ay ilagay ang code sa mga modulo. Ang mga modulo sa ES6 ay isang file na mayroong magkakaugnay na mga function at variable. Ang mga modulo ay hinahayaan tayong magtagong mga pribadong pag-aari ay ilabas ang mga pampublikong pag-aari na gustong gamitin sa iba pang file. Ang filename ay ang pangalan ng modulo. Ang mga modulo ay mayroon ding sariling saklaw. Upang magamit ang mga variable sa labas ng saklaw ng modulo, kailangang i-export. Ang mga variable na hindi nailabas ay magiging pribado at maaari lang gamitin sa loob ng modulo.

Ang mga indibidwal na pag-aari ay maaaring i-export nang ganito:

Sa kabilang banda, lahat ng property ang maaaring ma-export gamit ang isang export statement:

Upang magamit ang variable ng modulo, kailangang i-import ito sa file. Maaaring tukuyin ano ang nais i-import mula sa modulo gaya nito:

Maaari ring baguhin ang pangalan ng import:

O maaaring i-import lahat ng property ng modulo:

Repasuhin

Ginagamit ang mga function upang hatiin ang ating programa sa mas maliliit pang programa na madaling ayusin. Ang gawain ito ay tinatawag na modularizing. Mayroong dalawang uri ng function: void function at value returning function. Ang void function ay gumagawa ng statement na nasa loob nito. Ang value returning function ay ibinabalik ang isang halaga.

Ang saklaw ang parte ng programa kung saan maaaring gamitin ang variable. Ang mga variable na naideklara sa loob ng function, kabilang ang mga parametro ng function, ay local. Ang mga block ay mayroon ding saklaw, at ang mgaa local variable ay maaaring ilikha sa loob ng mga ito.

Ang mga variable na hindi nakapaloob sa block o module ay global. Kung kailangan ng global variable, katanggap-tanggap na magkaroon ng global constant. O kaya ay subukang ilagay ang code sa mga modulo dahil mayroon silang sariling saklaw. Mas maganda pa rito, nagbibigay ang mga modulo ng estruktura at pag-organisa sa mga code.

Mga sanggunian

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.