path: root/files/he/learn/javascript/building_blocks/functions/index.html

---
title: Functions — פונקציות - חלקי קוד לשימוש חוזר
slug: Learn/JavaScript/Building_blocks/Functions
translation_of: Learn/JavaScript/Building_blocks/Functions
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>

<p class="summary">עקרון חשוב והכרחי נוסף בתכנות הוא פונקציות - <strong>functions. פונקציות</strong> מאפשרות לנו לאחסן קוד בתוך בלוק מוגדר ומבצע פעולה מסויימת, ואז לקרוא לאותו קוד מתי שנצטרך אותו באמצעות פקודה קצרה. זאת במקום לרשום את אותו קוד שוב ושוב. במאמר זה אנחנו נחקור את העקרונות הבסיסיים והחשובים שמאחורי פונקציות כמו הסינטקס הבסיסי שלהן, כיצד להגדיר אותן, כיצד להפעיל אותן, נלמד מהו סקופ ופרמטרים ועוד.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">ידע מוקדם:</th>
   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td>
  </tr>
  <tr>
   <th scope="row">מטרה:</th>
   <td>הבנה של עקרונות היסוד בנושא פונקציות ב-JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="איפה_נמצא_פונקציות">איפה נמצא פונקציות?</h2>

<p>ב-JavaScript אנחנו נמצא פונקציות בכל מקום. בעיקרון, אנחנו השתמשנו בפונקציות לאורך כל הדרך של הקורס, פשוט לא פירטנו עליהם לעומק. כעת אנחנו ניכנס לעומק של אלו ונבין כיצד להשתמש בהם.</p>

<p>כמעט כל פעם שאנחנו עושים שימוש בביטוי מסויים של JavaScript שעושה שימוש בסוגריים רגילות <code>()</code> וזה <u><strong>לא</strong></u> במסגרת לולאת <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a> או לולאות <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while ו- do...while loop</a> או משפטי תנאי <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else</a> אנחנו בעצם עושים שימוש בפונקציות.</p>

<h2 id="פונקציות_מובנות_Built-in_של_הדפדפן">פונקציות מובנות (Built-in) של הדפדפן</h2>

<p>אנחנו ביצענו לא מעט שימוש בפונקציות המובנות בדפדפן. בכל פעם שעשינו מניפולציה על מחרוזת לדוגמא:</p>

<pre class="brush: js notranslate">let myText = 'I am a string';
let newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a source string,
// and a target string and replaces the source string,
// with the target string, and returns the newly formed string</pre>

<p>או בכל פעם שעשינו מניפולציה על מערך:</p>

<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
let madeAString = myArray.join(' ');
console.log(madeAString);
// the join() function takes an array, joins
// all the array items together into a single
// string, and returns this new string</pre>

<p>או בכל פעם שרצינו ליצור מספר רנדומלי:</p>

<pre class="brush: js notranslate">let myNumber = Math.random();
// the random() function generates a random number between
// 0 and up to but not including 1, and returns that number</pre>

<p>אנחנו בעצם השתמשנו בפונקציות.</p>

<div class="note">
<p><strong>תשומת לבכם</strong>: נסו להכניס את השורות קוד הרשומות למעלה לקונסולה אם אתם לא זוכרים איך לעשות בהם שימוש.</p>
</div>

<p>ל- JavaScript יש לא מעט פונקציות מובנות אשר מאפשרות לנו לעשות דברים שימושיים מבלי לכתוב את כל הקוד בעצמנו. בפועל, חלק מהקוד שאנחנו מריצים כאשר אנחנו אנחנו קוראים לפונקציה מובנית של הדפדפן, לא יכל היה להירשם ב-JavaScript - הרבה מהפונקציות הללו קוראות לחלקים בקוד הדפדפן עצמו, אשר נבנה בשפה אחרת שאינה JavaScript כלל.</p>

<p>אנא זכרו שחלק מהפונקציות המובנות של הדפדפם אינן חלק מהבסיס של שפת JavaScript - חלקן מהן מוגדרות כחלק מה-API של הדפדפן, אשר בנוי מעל שפת הכתיבה של הדפדפן על מנת להעניק יותר פונקציונליות. אנחנו נסתכל על ה-API של הדפדפן בהמשך המודול. לרענון זכרונכם, <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">ראו מאמר זה מתחילת הקורס</a>.</p>

<h2 id="functions_vs._methods_-_פונקציות_מול_מתודות">functions vs. methods  - פונקציות מול מתודות</h2>

<p>אנו קוראים לפונקציות שהן חלק מאובייקטים כ-מתודות (methods). אנחנו לא צריכים כרגע לדעת על המבנה הפנימי של אובייקטים ב-JavaScript - אנו נלמד את זה לעומק במודול הבא. לבינתיים, רק רצינו למנוע בלבול בין המושגים השונים. רוב הסיכויים שתשמעו את שניהם.</p>

<p>הקוד המובנה שעשינו בו שימוש לבינתיים מגיע ב-2 תצורות: פונקציות ו-מתודות. אתם יכולים לבדוק את הרשימה המלאה של פונקציות מובנות וכן את הרשימה המלאה של אובייקטים מובנים והמתודות שלהם <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">פה</a>.</p>

<p>כמו כן, ראינו הרבה פונקציות מותאמות -<strong>custom functions</strong> - פונקציות שאנחנו הגדרנו בעצמנו ולא מוגדרות בתוך הדפדפן עצמו. בכל פעם שאנחנו רואים שם שאינו שם שמור של השפה ולאחריו סוגריים רגילות <code>()</code>, זוהי פונקציה שהמפתח הגדיר בעצמו. בתרגול שלנו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> וגם <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">בקוד המקור שלו</a> במאמר בנושא <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות</a>, כללנו פונקציה <code>()draw</code> שאנחנו בנינו שנראית כך :</p>

<pre class="brush: js notranslate">function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (let i = 0; i &lt; 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}</pre>

<p>פונקציה זו מציירת 100 עיגולים אקראיים בתוך אלמנט {{htmlelement("canvas")}} . בכל פעם שאנחנו רוצים לעשות זאת, אנחנו יכולים להפעיל את הפונקציה עם הקוד הבא:</p>

<pre class="brush: js notranslate">draw();
</pre>

<p>במקום לכתוב את כל הקוד שבתוך הפונקציה בכל פעם שאנחנו רוצים שיצוייר עיגול. </p>

<p>פונקציות יכולות להכיל כל קוד שנרצה - אנחנו אפילו יכולים לקרוא לפונקציות אחרות מתוך פונקציות. הפונקציה למעלה לדוגמא, קוראת לפונקציה <code>()random</code> שלוש פעמים, כפי שאנו רואים בקוד הבא:</p>

<pre class="brush: js notranslate">function random(number) {
  return Math.floor(Math.random()*number);
}</pre>

<p>אנחנו צריכים לבנות את הפונקציה <code>()random</code> כי הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a> מייצרת לנו מספר רנדומלי, אבל מספר רנדומלי עשרוני בין 0 ל-1. אנחנו לעומת זאת רצינו מספר רנדומלי שלם ולא עשרוני ושיהיה בין 0 למספר מסויים שאנחנו נגדיר לו.</p>

<h2 id="Invoking_functions_-_קריאה_לפונקציה">Invoking functions - קריאה לפונקציה</h2>

<p>ככל הנראה אתם כבר מבינים את הנושא, אבל בכל מקרה אנו מזכירים שכדי להשתמש בפועל בפונקציה אחרי שהיא הוגדרה, אנחנו צריכים להריץ אותה, לקרוא לה. בשפה האנגלית זה נקרא <strong>To invoke</strong>. זה נעשה באמצעות כתיבת שם הפונקציה איפה שנרצה בתוך הקוד שלנו, ולאחריו סוגריים מסולסלות <code>()</code>.</p>

<pre class="brush: js notranslate">function myFunction() {
  alert('hello');
}

myFunction()
// calls the function once</pre>

<h2 id="Anonymous_functions_-_פונקציות_אנונימיות">Anonymous functions - פונקציות אנונימיות</h2>

<p>אולי נתקלתם בפונקציות אשר מוגדרות ומופעלות בצורות אחרות. עד עכשיו, יצרנו פונקציה בצורה כזו:</p>

<pre class="brush: js notranslate">function myFunction() {
  alert('hello');
}</pre>

<p>אבל אנחנו גם יכולים ליצור פונקציה שאין לה שם:</p>

<pre class="brush: js notranslate">function() {
  alert('hello');
}</pre>

<p>פונקציה שכזו נקראת פונקציה אנונימית - <strong>anonymous function</strong> - אין לה שם. היא גם לא עושה כלום בעצמה. בדרך כלל אנחנו נשתמש בפונקציה אנונימית ביחד עם ״מטפל אירוע״ - event handler. לדוגמא, הקוד הבא יריץ את הקוד בנמצא בתוך הפונקציה, כאשר הכפתור myButton נלחץ:</p>

<pre class="brush: js notranslate">var myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}</pre>

<p>הדוגמא למעלה דורשת שיהיה אלמנט {{htmlelement("button")}} זמין על גבי הדף כדי שנוכל לבחור אותו וללחוץ עליו. ראיתם מבנה שכזה מספר פעמים במהלך הקורס ואתם תלמדו עליו עוד בהמשך הקורס.</p>

<p>אנחנו יכולים להשים פונקציה אנונימית לתוך משתנה כך שהיא תהיה הערך של אותו משתנה. לדוגמא:</p>

<pre class="brush: js notranslate">let myGreeting = function() {
  alert('hello');
}</pre>

<p>ניתן להפעיל את הפונקציה הזו (invoke) באמצעות:</p>

<pre class="brush: js notranslate">myGreeting();</pre>

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

<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre>

<p>הפונקציה הזו יכולה להיות מופעלת בשתי הדרכים:</p>

<pre class="brush: js notranslate">myGreeting();
anotherGreeting();</pre>

<p>אבל זה עלול להיות מבלבל, <strong>אז אל תעשו זאת</strong>. כשאנחנו יוצרים פונקציות, עדיף יהיה להיצמד למבנה הזה:</p>

<pre class="brush: js notranslate">function myGreeting() {
  alert('hello');
}</pre>

<p>אנחנו נשתמש בפונקציות אנונימיות בעיקר על מנת להריץ קוד בתגובה לאירוע שהתרחש - כמו לחיצה על כפתור - וזאת באמצעות ״מטפל אירוע״ - event handler. לדוגמא:</p>

<pre class="brush: js notranslate">myButton.onclick = function() {
  alert('hello');
  // I can put as much code
  // inside here as I want
}</pre>

<h2 id="הפרמטרים_של_הפונקציה">הפרמטרים של הפונקציה</h2>

<p>חלק מהפונקציות דורשות שיינתנו להם פרמטרים מסויימים כשאנחנו מפעילים אותן - אלו בעצם ערכים שאנחנו צריכים לכלול בתוך הסוגריים הרגילות <code>()</code>, וזאת על מנת שהפונקציה תוכל לבצע את מה שהיא צריכה לבצע.</p>

<div class="note">
<p><strong>לתשומת לב</strong>: פרמטרים אלו נקראים ארגומנטים</p>
</div>

<p>כדוגמא, הפונקציה המובנית של הדפדפן לא דורשת שום פרמטרים. כשאנחנו קוראים לה, היא מחזירה מספר עשרוני בין 0 ל-1. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a>:</p>

<pre class="brush: js notranslate">let myNumber = Math.random();</pre>

<p>הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">()replace</a> לעומת זאת, צריכה שני ארגומנטים - מחרוזת משנה שנרצה לחפש בתוך מחרוזת ראשית ואת המחרוזת המשנה שתחליף את זו שמצאנו בתוך המחרוזת הראשית:</p>

<pre class="brush: js notranslate">let myText = 'I am a string';
let newString = myText.replace('string', 'sausage');</pre>

<div class="note">
<p><strong>שימו לב</strong>: כשאנחנו צריכים לציין מספר של ארגומנטים, אנחנו נפריד ביניהם באמצעות פסיק - <code>,</code>.</p>
</div>

<p>חשוב לדעת כי לפעמים ארגומנטים יהיו אופציונליים - כלומר אנחנו לא נהיה חייבים לציין אותם. אם לא נציין אותם כאשר הם אופציונליים, הפונקציה בדרך כלל תאמץ סוג של התנהגות ברירת מחדל. לדוגמא, הפרמטר של פונקציה <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">()join</a> של מערכים הוא אופציונלי:</p>

<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
let madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
let madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'</pre>

<p>אם לא נציין אותו, ערך ברירת המחדל הוא שיהיה התו המחבר - במקרה הזה זה יהיה פסיק <code>,</code>.</p>

<h2 id="סקופ_של_הפונקציה_והתנגשויות">סקופ של הפונקציה והתנגשויות</h2>

<p>בוא נדבר מעט על {{glossary("scope")}} - עקרון חשוב מאוד להבנה כאשר אנחנו עוסקים בפונקציות. כאשר אנחנו יוצרים פונקציה, המשתנים וכל הדברים האחרים המוגדרים בתוך הפונקציה נמצאים בתוך <strong>scope</strong> נפרד, כלומר, הם נעולים בתוך מתחם מסויים, שלא ניתן לגשת אליו מחוץ לפונקציה.</p>

<p>הסקופ או התחום שנמצא מחוץ לכל הפונקציות שלנו נקרא <strong>global scope</strong>. ערכים שמוגדרים ב-<strong>global scope</strong> נגישים מכל מקום בקוד.</p>

<p>JavaScript נבנתה כך בצורה מסיבות מסויימות - אבל בעיקר מסיבות של אבטחה וארגון. לפעמים אנחנו לא נראה שמשתנים יהיו נגישים מכל מקום בקוד - סקריפטים חיצוניים שאנחנו מפעילים ממקומות אחרים יכולים לעשות לנו בלאגן ולגרום לשגיאות במקרה והם ישתמשו בשמות משתנים זהים ועלולים ליצור התנגשויות בין אם בטעות ובין אם מכוון.</p>

<p>לדוגמא, נניח ויש לנו קובץ HTML אשר קורא לשני קבצי JavaScript חיצוניים, ובשניהם יש משתנה ופונקציה מוגדרים שמשתמשים באותו שם:</p>

<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
&lt;script src="first.js"&gt;&lt;/script&gt;
&lt;script src="second.js"&gt;&lt;/script&gt;
&lt;script&gt;
  greeting();
&lt;/script&gt;</pre>

<pre class="brush: js notranslate">// first.js
var name = 'Chris';
function greeting() {
  alert('Hello ' + name + ': welcome to our company.');
}</pre>

<pre class="brush: js notranslate">// second.js
var name = 'Zaptec';
function greeting() {
  alert('Our company is called ' + name + '.');
}</pre>

<p>שתי הפונקציות שאנחנו רוצים לקרוא להם נקראות <code>()greeting</code>, אבל אנחנו יכולים לגשת רק לפונקציה <code>()greeting</code> שבקובץ <code>second.js</code> - שכן הקישור לקובץ מבוצע ב -HTML מאוחר יותר בקוד שלנו, ולכן המשתנים והפונקציה שלו דורסים את אלו שב- <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">first.js</span></font>.</p>

<div class="note">
<p><strong>לתשומת לב</strong>: ניתן לראות את הדוגמא <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">ב-GitHub</a> וכן את <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">קוד המקור</a>).</p>
</div>

<p>שמירה על הקוד שלנו נעול בתוך סקופ מונע בעיות שכאלו ונחשב כ- best practice.</p>

<p>ניתן לחשוב על זה כמו גן חיות. האריות, זברות, נמרים ופינגווינים נמצאים כל במתחמים נפרדים כל אחד, ויש להם גישה רק לדברים שנמצאים במתחם שלהם - בדיוק כמו בסקופים של פונקציות. אם הם היו יכולים להיכנס למתחמים אחרים, היו נוצרות לא מעט בעיות. במקרה הטוב, החיות האחרות היו מרגישות לא בנוח, במקרה הרע, הן היו נאכלות על ידי חיה אחרת.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>

<h3 id="למידה_אקטיבית_לשחק_עם_ה-scope">למידה אקטיבית: לשחק עם ה-scope</h3>

<p>נסתכל על דוגמא על מנת להבין מהו scope.</p>

<ol>
 <li>ראשית, צרו לעצמכם עותק של הדוגמא שלנו <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. הקובץ מכיל 2 פונקציות שנקראות <code>()a</code> ו- <code>()b</code> וכן שלושה משתנים - <code>x</code>, <code>y</code>, ו- <code>z</code> - שניים מתוכם מוגדרים בתוך פונקציות ואחד מתוכם מוגדר ב-global scope. בנוסף, הדוגמא גם מכילה פונקציה שלישית שנקראת <code>()output</code>, אשר מקבלת ארגומנט אחד ומציגה אותו בתוך פסקה על גבי הדף.</li>
 <li>פתחו את הדוגמא בדפדפן ובעורך הקוד שלכם.</li>
 <li>הקלידו בקונסולה את הקוד הבא:
  <pre class="brush: js notranslate">output(x);</pre>
  אתם אמורים לראות שהערך של המשתנה <code>x</code> הוצג למסך.</li>
 <li>כעת נסו להזין את הקוד הבא לקונסולה:
  <pre class="brush: js notranslate">output(y);
output(z);</pre>
  שתי הפקודות הללו יחזירו לנו שגיאה ביחד עם המשפט: "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". מדוע? הסיבה נעוצה ב-scope של הפונקציות: - <code>y</code> ו- <code>z</code> נעולים בתוך הפונקציות <code>()a</code> ו- <code>()b</code> ולכן הפונקציה <code>()output</code> לא יכולה לגשת אליהם כשהיא נקראת מה-global scope.</li>
 <li>עם זאת, מה לדעתכם יקרה כשנקרא לפונקציה <code>()output </code>מתוך הפונקציות? נסו לשנות את <code>()a</code> ו- <code>()b</code> שייראו כך:
  <pre class="brush: js notranslate">function a() {
  let y = 2;
  output(y);
}

function b() {
  let z = 3;
  output(z);
}</pre>
  שמרו את הקוד ואז העלו מחדש את הדף בדפדפן ונסו לקרוא לפונקציות <code>()a</code> ו- <code>()b</code> מהקונסולה:

  <pre class="brush: js notranslate">a();
b();</pre>
  אתם אמורים לראות את הערכים של <code>y</code> ו- <code>z</code> על גבי הדף. זה עובד מכיוון שהפונקציה <code>()output</code> מופעלת מתוך פונקציה אחרת - כלומר מתוך אותו סקופ שבו מוגדרים המשתנים שהיא מדפיסה. הפונקציה <code>()output</code> עצמה זמיני מכל מקום, שכן היא מוגדרת ב-global scope.</li>
 <li>נסו עכשיו לעדכן את הקוד שלכם כך:
  <pre class="brush: js notranslate">function a() {
  var y = 2;
  output(x);
}

function b() {
  var z = 3;
  output(x);
}</pre>
  רענון והעלו את הדף שוב והזינו את הקוד הבא בקונסולה:</li>
 <li>
  <pre class="brush: js notranslate">a();
b();</pre>
  גם <code>a()</code> וגם <code>b()</code> מחזירים את הערך של x — 1. זה עובד מכיוון שלמרות ש-<code>()output</code> לא מוגדרת באותו סקופ ש- <code>x</code> מוגדר בו, אבל <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">x</span></font> הוא משתנה גלובלי אז הוא זמין בכל מקום בקוד.</li>
 <li>לבסוף, עדכנו את הקוד כך:
  <pre class="brush: js notranslate">function a() {
  var y = 2;
  output(z);
}

function b() {
  var z = 3;
  output(y);
}</pre>
  שמור ורענן את הדף. לאחר מכן הזן את הקוד הבא בקונסולה:</li>
 <li>
  <pre class="brush: js notranslate">a();
b();</pre>
  הפעם כשקראנו ל- <code>()a</code> ו- <code>()b</code> אנחנו נקבל שגיאה מסוג "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" זה מכיוון שביצוע הקוד <code>()output</code> והמשתנים שהם מנסים להשיג לא מוגדרים בתוך אותו סקופ של פונקציה - המשתנים בעיקרון בלתי נראים לקריאות הפונציה הזו.</li>
</ol>

<div class="note">
<p><strong>לתשומת לבכם</strong>: אותו מנגנון סקופינג לא חל על לולאות <code>{ ... }(...) for</code> ובלוקים של תנאים - <code>{ ... }(...) if</code> הם אמנם נראים דומים, אבל הם לא אותו דבר. אל תתבלבלו.</p>
</div>

<div class="note">
<p><strong>לתשומת לבכם</strong>: השגיאה <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> היא אחת מהשגיאות השכיחות שתיתקלו בה. אם קיבלתם שגיאה שכזו, וודאו שהגדרת את המשתנה הרלוונטי ובסקופ הרלוונטי.</p>
</div>

<ul>
</ul>

<h3 id="פונקציות_בתוך_פונקציות">פונקציות בתוך פונקציות</h3>

<p>זכרו שאנחנו יכולים לקרוא לפונקציה מכל מקום, <strong>גם מתוך פונקציה אחרת</strong>. זה שימושי על מנת על מנת להשאיר את הקוד שלנו מסודר - אם יש לנו פונקציה אחת מורכבת וגדולה יהיה יותר ברור להבין אותה אם נפרק אותה לכמה פונקציות:</p>

<pre class="brush: js notranslate">function myBigFunction() {
  var myValue;

  subFunction1();
  subFunction2();
  subFunction3();
}

function subFunction1() {
  console.log(myValue);
}

function subFunction2() {
  console.log(myValue);
}

function subFunction3() {
  console.log(myValue);
}
</pre>

<p>חשוב לוודא שה<strong>ערכים שמבוצע בהם שימוש בתוך הפונקציה, מוגדרים בסקופ הנכון</strong>. הדוגמא למעלה תחזיר לנו שגיאה <code>ReferenceError: myValue is not defined</code> מכיוון שאמנם המשתנה <code>myValue</code> מוגדר באותו סקופ שהפונקציה נקראת, אך הוא לא מוגדר בתוך הפונקציות עצמן - בתוך הקוד שירוץ בפועל כשאנחנו קוראים לתתי פונקציות. על מנת לגרום לכך לעבוד, היינו צריכים להעביר אליהם את הפונקציה כפרמטר כמו שרשום בקוד מטה:</p>

<pre class="brush: js notranslate">function myBigFunction() {
  var myValue = 1;

  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}

function subFunction1(value) {
  console.log(value);
}

function subFunction2(value) {
  console.log(value);
}

function subFunction3(value) {
  console.log(value);
}</pre>

<h2 id="לסיכום">לסיכום</h2>

<p>מאמר זה סקר את העקרונות יסוד של פונקציות, על מנת לסלול את הדרך שלכם להבנה של כלים שימושיים נוספות ולהבנה כיצד לבנות פונקציה משלכם.</p>

<h2 id="ראו_גם">ראו גם</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions מדריך מפורט בנושא</a> — מכסה אפשרויות מתקדמות שלא נדונו במאמר זה.</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — הסבר מתקדם בנושא.</li>
</ul>

<ul>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>

<h2 id="במודול_זה">במודול זה</h2>

<ul>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
</ul>