PracticU

שפת JavaScript - פונקציה חץ - Arrow

בלי כתוביותעם כתוביות
PracticU › קורס NodeJS › שפת JavaScript - פונקציה חץ - Arrow
מילון מושגים:
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
Callback - פונקציה שמועברת כארגומנט לפונקציה אחרת כדי שתופעל מאוחר יותר, לרוב בסיום פעולה.
תחביר - אוסף הכללים של שפת תכנות הקובעים כיצד לכתוב קוד תקין. הפרתם גורמת לשגיאת תחביר.
פרמטר - ערך שמועבר לפונקציה או לפקודה כקלט, ומשפיע על אופן פעולתן ועל התוצאה שהן מחזירות.

שפת JavaScript - פונקציה חץ - Arrow
פונקציית חץ (arrow function) היא צורה מקוצרת לכתיבת פונקציה אנונימית, והיא נפוצה מאוד בשימוש ב-callback. השיעור מראה את כללי הקיצור ואילו חלקים אפשר להשמיט.
כללי התחביר
1. המילה function: במקומה כותבים חץ בין הפרמטרים לגוף הפונקציה.
2. פרמטר יחיד: כשיש פרמטר אחד בלבד, אפשר להשמיט את הסוגריים העגולים. בלי פרמטרים או עם כמה פרמטרים הסוגריים חובה.
3. פקודה אחת: אם הגוף מכיל פקודה אחת בלבד, אפשר להשמיט את המסולסלים ואת הנקודה-פסיק.
4. החזרה בקיצור: אם הפקודה היחידה היא return, אפשר להשמיט גם את המסולסלים וגם את המילה return, והערך שמחושב הוא ערך ההחזרה.
דוגמה
1. שעון: פונקציית חץ בלי פרמטרים שמחזירה את השעה המקומית של תאריך חדש עושה את אותה פעולה כמו פונקציה רגילה שמציגה שעון בכל שנייה.
שימו לב
1. מספר פרמטרים: ההחלטה אם להשמיט סוגריים תלויה במספר הפרמטרים, לא בסגנון הכתיבה.
עכשיו אפשר לקרוא פונקציית חץ ולהבין מה כל חלק בה עושה.
השיעור הבא בקורס: שפת JavaScript - טווח הכרה - Scope

פרקי ההרצאה: שפת JavaScript - פונקציה חץ - Arrow

  1. 00:00

    למה משתמשים ב-arrow function

  2. 00:36

    המרת inline function ל-arrow function

  3. 01:50

    הסרת המילה function והוספת חץ

  4. 02:46

    פרמטרים מרובים ב-arrow function

  5. 03:41

    פרמטר בודד בלי סוגריים עגולים

  6. 04:42

    פקודה אחת בלי מסולסלים

  7. 06:04

    שילוב פרמטר בודד ופקודה אחת

תמלול ההרצאה: שפת JavaScript - פונקציה חץ - Arrow

הטקסט המלא של הדקות הראשונות בהרצאה «שפת JavaScript - פונקציה חץ - Arrow» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    השימוש ב-callbacks הוא מאוד מאוד נפוץ ב-JavaScript. אז בגרסה מסוימת של JavaScript יצא תחביר מקוצר יותר ל-callback function, או ליתר דיוק ל-anonymous function או inline functions.

  2. 00:21

    אז בואו נראה איך בעצם לבצע את התחביר הזה, יש לו כמה וריאציות, התחביר נקרא arrow function, ובשביל זה אנחנו צריכים לבנות לעצמנו כמה סוגים של פונקציות כאלה.

  3. 00:36

    אז מה שאני רוצה לעשות זה לבנות את הצורך להשתמש ב-Inline Function ואז להפוך אותה ל-Arrow Function. בואו נניח שיש לנו כאן איזושהי פונקציה Do Something.

  4. 00:49

    הפונקציה הזאת מקבלת Callback ומבצעת Console.Log. יש לנו פה Start יש לנו End והיא פשוט קוראת לה Callback בצורה כזאת. אם אנחנו רוצים לקרוא לדו סמפינג אנחנו צריכים לשלוח פונקציה מפני שאנחנו רואים שזאת קריאה לפונקציה אבל מה אנחנו בעצם רואים שהפונקציה לא מקבלת שום דבר ולא מחזירה שום דבר כמובן שזה בעצם

  5. 01:20

    דוגמה מאוד כללית לא דוגמה של לוגיקה ספציפית אבל התחביר הוא מה שחשוב לנו אז איזה פונקציה אנחנו שולחים פונקשן ולא מקבלת שום דבר ולא מחזירה שום דבר בוא נניח שהיא עושה כמה פעולות קונסול לוג doing something ובואו נניח doing something else שתי הפעולות האלה.

  6. 01:49

    בואו נריץ את זה node app go והנה אנחנו רואים start doing something ו-doing something else ואז end.

  7. 01:58

    זאת inline function רגילה אנחנו רוצים את אותה קריאה לבצע בעזרת arrow function כל מה שאנחנו עושים אנחנו מוחקים את המילה פאנקשן ושמים פה חץ בין הסוגריים של הפונקציה לבין התוכן שלה אנחנו שמים חץ וקיבלנו את אותו הדבר אז זה מקרה ראשון תחביר ראשון לפונקציית אירו בואו נשכפל ונשים את זה בהערה ונגיד הפעם שהפונקציה שלנו מקבלת שלושה משתנים 10,

  8. 02:34

    20 ו-30 ככה אנחנו שולחים לה הרי קודם כל מישהו בנה את do something רק אחר כך מישהו אחר משתמש ב-do something.

  9. 02:46

    מי שבנה את do something מצפה לקבל callback ולשלוח לה שלושה משתנים. אז מי שעכשיו משתמש ב-do something ורוצה לשלוח לה callback צריך לקבל סוגריים שלושה משתנים.

  10. 02:58

    אז אם הפונקציה המקורית הייתה function שקיבלה a, b ו-c ובוא נניח שאנחנו גם מציגים את a, b ו-c doing something, בואו נציג את a, b ו-c פה.

  11. 03:13

    כאשר אנחנו בונים arrow function אז אנחנו פשוט מורידים את המילה function, שמים פה חץ והנה יש לנו עכשיו arrow function שמקבלת שלושה משתנים. הנה ה-10, 20, 30. זה בעצם תחביר מספר 2, arrow function יכולה לקבל משתנים.

  12. 03:32

    בואו נגיד שאנחנו בתחביר הבא רוצים לשלוח משתנה בודד. אוקיי, מה הבעיה? בואו נקבל משתנה בודד וכמובן אין לי את b וc רק נציג את a.

  13. 03:46

    אם אני מריץ אז אני רואה שהכל עובד פרפקט. למה התחביר הזה הוא תחביר מיוחד? כי אם אנחנו שולחים ל-arrow function שלנו משתנה בודד, אנחנו יכולים להיפטר מהסוגריים העגולים.

  14. 04:02

    בואו נריץ, והנה אנחנו רואים שזה עובד אותו הדבר. אם אנחנו שולחים 0 משתנים, אנחנו לא יכולים להיפטר מהסוגריים העגולים. אם אנחנו שולחים יותר מאחד, אנחנו לא יכולים.

  15. 04:17

    רק אם אנחנו שולחים פרמטר בודד, אפשר להיפטר מהסוגריים העגולים. בואו נעבור לתחביר הבא, ולצורך כך ניקח את מה שכתבנו, את זה אנחנו נוריד, נשים בהערה רגע, נדביק את התחביר הזה, שבו לא שלחנו שום דבר.

  16. 04:45

    כעת מה שאנחנו רוצים לעשות בתוך הפונקציה זה רק להציג doing something בלבד. מה הבעיה? לא אמורה להיות פה בעיה. אני מריץ, הנה start, הנה doing something והנה end.

  17. 05:00

    למה זה תחביר מיוחד? מפני שכעת הפונקציה שאנחנו כותבים פה, ה-arrow function, כותבת בתוכה רק פקודה אחת. אם זה המצב, אנחנו יכולים להיפטר מהמסולסלים, להוריד את הנקודה פסיק הזאת ולהיפטר מהמסולסלים האלה.

  18. 05:24

    ועכשיו יש לנו מצב שבו ה-arrow שלנו מכילה פקודה אחת בלבד. ושימו לב שזה אותו הדבר. בואו נעשה את זה שוב פעם, גם עבור המקרה הזה, שאנחנו יכולים לקבל שלושה משתנים.

  19. 05:42

    נשים את זה פה, נוריד את זה, אנחנו פשוט רוצים לעבור ולראות את כל הוואריאציות שיש.

  20. 05:51

    נשים פה רק פקודה אחת, ניפטר מהמסולסלים, נקודה פסיק ועוד סגירת מסולסלים, נריץ ונראה שהוא עובד כמו שצריך, וכמובן גם אם יש לנו משתנה בודד בפונקציה, ארגומנט בודד שהיא מקבלת, בואו נעשה את זה כאן, יש לנו פקודה אחת ויחידה בפונקציה אז אנחנו יכולים לקרוא לה בצורה כזאת.

  21. 06:25

    אנחנו יכולים לעטוף את המשתנה הזה בסוגריים עגולים אבל אין שום צורך, זאת הגישה הנפוצה יותר והנה זה עובד. אז ראינו כל מיני וריאציות מעניינות אבל לא

לקורס המלא: קורס NodeJS אונליין בעברית

ההרצאה הקודמת: שפת JavaScript - פונקציה Callback

ההרצאה הבאה: שפת JavaScript - טווח הכרה - Scope

הרצאות קשורות מקורסים אחרים

  • מבוא ל-Javascript
  • פונקציה - Function
  • Javascript in JavaSelenium
  • פונקציה Scalar - עם פרמטרים

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React