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

ידע מוקדם: הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.
מטרה: לקבל הכרות עם הבסיס של המשתנים.

כלים נדרשים

לאורך מאמר זה, תתבקשו להזין מספר שורות קוד בקונסולה על מנת לבדוק את ההבנה שלכם. אם אתם משתמשים בדפדפן במחשב, הדרך הכי טובה לבדוק את הקוד היא באמצעות הקונסולה של JavaScript. לפרטים נוספים אודות הקונסולה ראה What are browser developer tools.

מהו משתנה?

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

<button>Press me</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

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

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

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

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

קיומם של משתנים הוא הגיוני ונדרש, וככל שנלמד יותר לעומק JavaScript אנחנו נתרגל לשימוש בהם באופן טבעי.

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

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

Declaring a variable - הצהרה על משתנה

על מנת לעשות שימוש במשתנה, אנחנו קודם כל צריכים ליצור אותו, או יותר מדוייק, אנחנו צריכים להצהיר עליו. על מנת להצהיר על משתנה אנחנו צריכים להשתמש במילה השמורה var או במילה השמורה let ולאחריהן השם שנרצה לתת למשתנה:

let myName;
let myAge;

כאן הצהרנו על שני משתנים שנקראים myName ו- myAge. נסו להזין את השורות האלו בקונסולה. לאחר מכן, נסו ליצור משתנה אחד או שניים בעצמכם.

לתשומת לב: ב- JavaScript, כל הוראת קוד (לא כל שורת קוד) צריכה להסתיים עם הסימן ; - אם לא נכניס סימן זה, הקוד רוב הסיכויים יעבוד, אבל אם נכניס מספר שורות קוד ביחד, כנראה שלא. אנא התרגלו להוסיף ; בעת שאתם כותבים את הקוד שלכם.

אתם יכולים לבדוק האם הערכים האלו קיימים בסביבת ההרצה על ידי הדפסה של שמות המשתנים לקונסולה כפי שמתואר להלן:

myName;
myAge;

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

scoobyDoo;

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

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

השמת ערך למשתנה

ברגע שהצהרנו על משתנה, אנחנו יכולים לאתחל אותו עם ערך שנשים לו. אנחנו עושים זאת על ידי סימן ה-״שווה״ - =, ולאחריו הערך שאנחנו נרצה לשים במשתנה. לדוגמא:

myName = 'Chris';
myAge = 37;

נסו להזין בקונסולה את הקוד הבא. אתם אמורים להראות שהערכים שהשמנו למשתנים מוחזרים לנו בקונסולה. שוב, אנחנו יכולים לקבל את הערך של משתנה על ידי הזנת שמו לקונסולה. ננסה זאת שוב:

myName;
myAge;

ניתן להצהיר על משתנה וכן להשים לו ערך באותו זמן:

let myDog = 'Rover';

זו ככל הנראה תהיה הדרך שבה נרשום משתנים - הצהרה והשמה באותה שורה שכן זוהי דרך מהירה יותר מאשר לרשום הצהרה בשורה אחת והשמה של ערך בשורה אחרת.

ההבדלים בין var לבין let

בשלב זה אתם בטח שואלים ״מדוע צריכים שתי מילים שמורות על מנת להגדיר משתנים?״ או ״למה יש לנו גם את let וגם את var

הסיבות הן בעיקר היסטוריות. כאשר JavaScript רק נוצרה, היה קיים רק var. זה עבד במרבית המקרים, אבל היו לו סוגיות שונות בצורה ובדרך שבה הוא עבד. ההתנהגות שלו הייתה יכולה להיות מבלבלת וקצת מעצבנת. לכן, let נוצר בגרסאות מודרניות יותר של JavaScript, והציג מילה שמורה חדשה ליצירת משתנים, אשר פועלת בצורה אחרת מהמילה השמורה var ומתקנת את הסוגיות שהיו עם דרך ההגדרה הקודמת. סתם לידיעה - דרך זו של שימוש במילה השמורה let החלה בגרסת העדכון החשובה של JavaScript שנקראת ES2015 (ES6).

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

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

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

לתשומת לב: קוד זה לא יעבוד כשננסה להכניס אותו שורה אחר שורה בקונסולה אלא רק כשנכניס את כל שורות קוד באמצעות JavaScript.

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

Hoisting לא מתבצע יותר עם המילה השמורה let. אם נשנה את var ל- let בדוגמא למעלה, זה יציג לנו שגיאה. זה דבר טוב כמובן - הצהרה על משתנה לאחר שאנחנו משימים לו ערך גורמת לבלבול ולקושי בקריאה והבנה של הקוד.

בנוסף, כשאנחנו משתמשים ב- var, אנחנו יכולים להצהיר על המשתנה שיצרנו באמצעותו כמה פעמים שנרצה ואילו בעת שימוש ב- let אנחנו לא יכולים. הקוד הבא לדוגמא, יעבוד:

var myName = 'Chris';
var myName = 'Bob';

אבל הקוד הבא יקפיץ לנו שגיאה בשורה השנייה:

let myName = 'Chris';
let myName = 'Bob';

ולכן נצטרך לרשום אותו בצורה הבאה:

let myName = 'Chris';
myName = 'Bob';

שוב, מדובר בכלל חשוב אשר נועד למנוע הצהרה חוזרת של משתנה. אנו ממליצים לבצע שימוש כמה שיותר ב- let מאשר ב-var . אין שום סיבה שנרצה להשתמש ב- var, אלא אם אנחנו צריכים לתמוך בגרסאות ישנות של אינטרנט אקספלורר (גרסאות ישנות אלו לא תומכות ב- let אלא רק החל מגרסה 11; הדפדפן אדג׳ לעומת זאת תומך במלואו ב-let).

לתשומת לב: אנחנו בשלבים של עדכון הדוגמאות בקורס זה לשימוש ב- let במקום var.

עדכון משתנה

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

myName = 'Bob';
myAge = 40;

מס׳ כללים בנוגע לשמות משתנים

אנחנו יכולים לקרוא למשתנים שלנו כמעט בכל שם שנרצה, אבל ישנן מס׳ הגבלות. באופן כללי, היצמדו לשימוש באותיות לועזיות (0-9, a-z, A-Z) ולתו מסוג קו תחתון.

  • אל תשתמשו בתווים אחרים מכיוון שהם עלולים לגרום לשגיאות או שיהיה קשה להבין אותם - דמיינו שמתכנת צרפתי קורא למשתנים בשפה הצרפתית ומתכנת בריטי מנסה להבין מה פשר המשתנה.
  • אל תשימו קו תחתון בתחילת שמו של המשתנה - קו תחתון זה משמש במספר מבנים של JavaScript על מנת להצביע על דברים ספציפיים וזה עשוי לגרום לבלבול.
  • אל תשתמשו במספרים בתחילת השם של המשתנה. זה יגרום לשגיאה.
  • מוסכמה מקובלת היא להשתמש ב-״lower camel case" - כאשר אנו קוראים למשתנה בשם המכיל מס׳ מילים, המילה הראשונה תתחיל באות קטנה, ואילו יתר המילים לאחר יתחילו באות גדולה.
  • אנא תנו למשתנים שלכם שמות הגיוניים ואינטואטיביים, על מנת לנסות לתאר כמה שניתן איזה מידע הם מכילים. אל תשתמשו באותיות או במספרים לבד. מצד שני, אל תקראו למשתנים בשמות ארוכים מדי.
  • משתנים הם case sensitive — כך לדוגמא המשתנה myage הוא משתנה שונה מהמשתנה myAge.
  • נסו להימנע משימוש במילים השמורים של JavaScript בתור שמות למשתנים. מילים שמורות אלו אותן מילים שמרכיבות את הסינטקס של השפה. כלומר, אנחנו לא יכולים להשתמש במילים כגון: var, function, let, וכן גם for כשמות למשתנים שלנו. הדפדפן יזהה אותם כרכיבי קוד אחרים, מה שעלול לגרום רוב הסיכויים לשגיאה.

לתשומת לב: ניתן למצוא את רשימת המילים השמורות של השפה ב- Lexical grammar — keywords.

דוגמא למתן שמות למשתני בצורה נכונה:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

דוגמא למתן שמות למשתני בצורה לא נכונה:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

מילים שמורות:

var
Document

נסו ליצור מספר משתנים חדשים בהתאם לכללים שציינו למעלה.

סוגי משתנים

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

Numbers - מספרים

אנחנו יכולים לאחסן מספרים כמשתנים, בין אם הם מספר שלם, כמו 30, או בין אם הם מספר עשרוני, כמו 2.456. ב- JavaScript אנחנו לא צריכים להצהיר על סוג המשתנה, בשונה מכמה שפות תכנות אחרות. כשאנחנו נותנים למשתנה ערך מסוג מספר, אנחנו לא משימים את הערך בין גרשיים. לדוגמא:

let myAge = 17;

Strings - מחרוזות

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

let dolphinGoodbye = 'So long and thanks for all the fish';

Booleans - בוליאנים

בוליאנים אלו ערכי אמת או שקר. משתנים שמכילים ערך בוליאני יכולים לקבל 2 ערכים: או ערך אמת true או ערך שקר false. לדוגמא:

let iAmAlive = true;

בפועל, אנחנו נשתמש במשתנה מסוג בוליאני בדרך הבאה:

let test = 6 < 3;

כאן ביצענו שימוש באופרטור ״קטן מ-״ (<) על מנת לבדוק האם 6 קטן מ-3. כפי שניתן לצפות, זה יחזיר לנו false מכיוון ש-6 לא קטן מ-3. נלמד יותר לעומק על אופרטורים אלו בהמשך הקורס.

Arrays - מערכים

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

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10, 15, 40];

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

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

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

נרחיב על מערכים במאמר בהמשך הקורס.

Objects - אובייקטים

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

הכניסו את הקוד הבא בקונסולה:

let dog = { name : 'Spot', breed : 'Dalmatian' };

על מנת לאחזר מידע המאוחסן באובייקט, השתמשו בקוד הבא:

dog.name

אנו לא נעמיק בנושא אובייקטים כעת - אנו נלמד לעומק את הנושא במאמר בהמשך.

השמת משתנים דינאמית

JavaScript היא שפה דינאמית. שלא כמו שפות אחרת, ב- JavaScript אנחנו לא צריכים לציין איזה סוג של מידע יאוסן בתוך המשתנה (מספרים, מחרוזות, מערכים וכד׳).

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

let myString = 'Hello';

אם נכניס מספרים בתוך הגרשיים, הוא עדיין יהיה מחרוזת!

let myNumber = '500'; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;

נסו להכניס את הקוד שלמעלה לקונסולה שורה אחר שורה, וראו התוצאות. אתם תשימו לב שאתם משתמשים באופטור מיוחד שנקרא typeof - אופרטור זה מחזיר לנו את סוג הערך המאוחסן במשתנה שהעברנו לו. הפעם הראשונה שהרצנו את האופרטור הזה, הוא החזיר string, שכן באותה נקודה, המשתנה myNumber מכיל מחרוזת, '500'. בדקו מה הקונסולה תחזיר כשנזין את שתי השורות האחרונות.

Constants - קבועים

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

בשלביה המוקדים של השפה, קבועים לא היו קיימים. כעת יש בשפה קבועים ואנו משתמשים במילה השמורה const, על מנת להצהיר עליהם ולהשים בערך ערך שלא ישתנה:

const daysInWeek = 7;
const hoursInDay = 24;

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

const daysInWeek = 7;
daysInWeek = 8;

לסיכום

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

במודול זה

Document Tags and Contributors

Contributors to this page: ItzikDabush
Last updated by: ItzikDabush,