A funkciók definiálása a JavaScript

Bevezetés

egy függvény egy kódblokk, amely műveletet hajt végre vagy értéket ad vissza. A funkciók olyan egyedi kód, amelyet az újrafelhasználható programozók határoznak meg, így modulárisabbá és hatékonyabbá tehetik a programokat.

ebben az oktatóanyagban számos módot fogunk megtanulni egy függvény definiálására, egy függvény hívására, valamint a Függvényparaméterek JavaScript-ben történő használatára.

függvény definiálása

a függvényeket afunction kulcsszóval definiáljuk vagy deklaráljuk. Az alábbiakban a szintaxis egy függvény JavaScript.,

function nameOfFunction() { // Code to be executed}

a nyilatkozat a function kulcsszóval kezdődik, amelyet a függvény neve követ. A függvénynevek ugyanazokat a szabályokat követik, mint a változók-tartalmazhatnak betűket, számokat, aláhúzásokat és dollárjeleket, és gyakran teve-tokban íródnak. A nevet zárójelek sorozata követi, amelyek opcionális paraméterekhez használhatók. A függvény kódja göndör zárójelben található, csakúgy, mint a for statement vagy az if utasítás.,

az első példánkban egy funkciónyilatkozatot teszünk, hogy üdvözlő nyilatkozatot nyomtassunk a konzolra.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

itt van a kódot nyomtatni Hello, World!a konzol belsejében található greet() funkció. Azonban semmi sem fog történni, és egyetlen kód sem fog végrehajtani, amíg meg nem hívjuk a funkciót. Egy függvényt úgy hívhat meg, hogy beírja a függvény nevét, majd a zárójeleket.

// Invoke the functiongreet();

most ezeket összerakjuk, meghatározzuk a funkciónkat és hivatkozunk rá.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

a greet();hívással a függvény fut, és a Hello, World! parancsot kapjuk a Program kimeneteként.

Output
Hello, World!

most már megvan a greet() kódunk, amely egy függvényben található, és annyiszor újra felhasználhatjuk, amennyit csak akarunk.

paraméterek segítségével dinamikusabbá tehetjük a kódot.

Funkcióparaméterek

a greet.js fájlban létrehoztunk egy alapvető funkciót, amely kiírja aHello, World a konzolra., A paraméterek használatával további funkciókat is felvehetünk, amelyek rugalmasabbá teszik a kódot. A paraméterek olyan bemenetek, amelyek névként kerülnek át a függvényekbe, és helyi változóként viselkednek.

amikor egy felhasználó bejelentkezik egy alkalmazásba, érdemes lehet, hogy a program név szerint üdvözölje őket, ahelyett, hogy csak azt mondaná: “Helló, világ!”.

hozzáadunk egy paramétert a funkciónkhoz, az úgynevezett name, hogy képviseljük a üdvözlő személy nevét.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

a függvény neve greet, most pedig egyetlen paraméterünk van a zárójelben. A paraméter neve ugyanazokat a szabályokat követi, mint egy változó elnevezése. A függvény belsejében, a Hello, World statikus karakterlánc helyett, van egy sablon szó karakterláncunk, amely tartalmazza a paraméterünket, amely most helyi változóként viselkedik.

észre fogod venni, hogy nem határoztuk meg a name paramétert bárhol. Hozzárendelünk egy értéket, amikor meghívjuk a funkciónkat., Feltételezve, hogy a felhasználó neve Sammy, akkor hívja a funkciót, és helyezze a felhasználónevet, mint az érv. Az argumentum az a tényleges érték, amely a függvénybe kerül, ebben az esetben a "Sammy"karakterlánc.

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

"Sammy" értéke a name paraméteren keresztül kerül a függvénybe. Most minden alkalommal, amikor a name – ot használják a funkció egészében, a "Sammy" értéket képviseli. Itt van az egész kód.

a fenti program futtatásakor a következő kimenetet kapjuk.

Output
Hello, Sammy!

most van egy példa arra, hogy egy függvény újra felhasználható. Egy valós példa, a funkció húzza a felhasználónevet egy adatbázisból, ahelyett, hogy közvetlenül a nevét, mint egy argumentum értéke.

a paraméterek mellett a változók a függvények belsejében is deklarálhatók. Ezek a változók helyi változók néven ismertek, és csak saját függvényblokkjuk hatókörén belül léteznek., A változó hatókör határozza meg a változók hozzáférhetőségét; a függvény belsejében definiált változók nem érhetők el a függvényen kívülről, de annyiszor használhatók, ahányszor a függvényüket EGY program során használják.

értékek visszatérése

több paraméter is használható egy függvényben. Több értéket adhatunk át egy függvénynek, és visszaadhatunk egy értéket. Létrehozunk egy függvényt, hogy megtaláljuk a x és yáltal képviselt két érték összegét.

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

a fenti programban meghatároztunk egy függvényt a x és y paraméterekkel, majd átadtuk a 9 és 7 a függvényhez. Amikor futtatjuk a programot, megkapjuk ezeknek a számoknak az összegét kimenetként.

Output
16

ebben az esetben a 9 és 7 a sum() függvénynek átadott program 16.,

amikor areturn kulcsszót használjuk, a függvény nem hajtódik végre, és a kifejezés értéke visszatér. Bár ebben az esetben a böngésző megjeleníti az értéket a konzolon, nem ugyanaz, mint a console.log() használata a konzolra történő nyomtatáshoz. A függvény meghívása pontosan azt az értéket adja ki, ahol a függvény meghívásra került. Ezt az értéket azonnal fel lehet használni, vagy egy változóba lehet helyezni.

Function Expressions

az utolsó szakaszban egy függvénynyilatkozatot használtunk, hogy megkapjuk a két szám összegét, és visszaadjuk ezt az értéket., Mi is létrehozhat egy függvény kifejezés hozzárendelésével egy függvény egy változó.

ugyanazt aadd függvénypéldát használva közvetlenül alkalmazhatjuk a visszaküldött értéket egy változóra, ebben az esetbensum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

most a sum konstans egy függvény. Ezt a kifejezést tömörebbé tehetjük, ha névtelen funkcióvá alakítjuk, ami egy névtelen függvény., Jelenleg a függvény neve add, de a függvénykifejezésekkel nem szükséges megnevezni a függvényt, a név pedig általában elhagyható.

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

ebben a példában eltávolítottuk a függvény nevét, amely add volt, és névtelen függvényré változtattuk. A megnevezett funkció kifejezés lehet használni, hogy segítse a hibakeresés, de ez általában kimaradt.,

Nyílfüggvények

eddig a function kulcsszó segítségével definiáltuk a funkciókat. Van azonban egy újabb, tömörebb módszer a arrow function expressions néven ismert funkció meghatározására az ECMAScript 6 – tól. A nyílfüggvényeket, mint közismert, egy egyenlő jel képviseli, amelyet egy jelnél nagyobb követ: =>.

A Nyílfüggvények mindig anonim függvények és egyfajta függvénykifejezés. Létrehozhatunk egy alapvető példát a két szám termékének megtalálásához.

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

a function kulcsszó kiírása helyett a => nyilat használjuk a függvény jelzésére. Ellenkező esetben hasonlóan működik, mint egy reguláris funkció kifejezés, néhány speciális különbséggel, amelyekről a Mozilla fejlesztői hálózat nyíl funkciói alatt olvashat.

csak egy paraméter esetén a zárójelek kizárhatók. Ebben a példában a x négyzetet osztjuk, amely csak egy számot igényel argumentumként., A zárójeleket kihagytuk.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Megjegyzés: paraméterek hiányában a () zárójelek üres halmaza szükséges a nyílfüggvényekben.

ezekkel a konkrét példákkal, amelyek csak egy return utasításból állnak, a nyílfüggvények lehetővé teszik a szintaxis további csökkentését. Ha a függvény csak egyetlen sor return, akkor mind a göndör zárójelek, mind a return utasítás elhagyható, amint az az az alábbi példában látható.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

mindhárom ilyen típusú szintaxis ugyanazt a kimenetet eredményezi. Általában a preferencia vagy a vállalati kódolási szabványok kérdése annak eldöntése, hogy miként fogja felépíteni saját funkcióit.

Következtetés

ez A bemutató tartozó funkció nyilatkozatok, valamint a funkció kifejezések, visszatérő értékek a funkciók funkció kijelölése értékek változók, valamint ES6 nyíl funkciók.

A funkciók olyan kódblokkok, amelyek értéket adnak vissza vagy műveletet hajtanak végre, így a programok skálázhatók és modulárisak.