Connect with us

קטגוריות

Javascript

Javascript: בואו נכיר את var, let ו-const ואת ההבדלים ביניהם

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

עד ES6 יכולנו להצהיר על משתנים בדרך אחת, בעזרת var, העדכון החדש הביא איתו עוד שתי אפשרויות let ו-const, במאמר זה אנחנו נדבר על var, let ו-const ונבין את השוני ביניהם.

בואו נדבר על var

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

var ו-scope

 גבול ההצהרה (scope) אומר היכן אנחנו יכולים להשתמש במשתנה המוצהר.

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

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

var age = 78;

function(){
  var name = "Codehub"; 
}

console.log(name); // Uncaught ReferenceError: name is not defined

המשתנה age מוגדר כמשתנה גלובלי, המשתנה name מוגדר בתוך פונקציה מה שאומר שהוא מקומי, כשננסה להשתמש ב-name מחוץ לפונקציה, הדפדפן יזרוק לנו שגיאת ReferenceError מכיוון שהוא לא הצליח למצוא את המשתנה name.

השמה מחדש

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

// הצהרה נוספת על אותו משתנה - תקין
if(true){
var age = 13;
var age= 12;
}

// הצהרה נוספת על אותו משתנה (בדרך אחרת) - תקין
var age = 13;
age= 12;

var ו-Hoisting

Hoisting הוא מנגנון ב-Javascript שמבצע העברה של הצהרות על משתנים ופונקציות לראש ה-scope שבהם הוצהרו לפני שהמנוע מתחיל להריץ את הקוד.

משתנים שהוצהרו על ידי var מועברים לחלק העליון של ה-scope שבהם הם הוצהרו ומאותחלים ב-undefined.

זה אומר שאם אנחנו נכתוב את הקוד הבא:

console.log(name);
var name = "meni";

המנוע יתרגם את זה לקוד הבא:

var name;
console.log(name); // Uncaught ReferenceError: name is not defined
name = "meni";

בואו נדבר על let

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

הגדרת let בתוך בלוק

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

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

let name = "meni";

if(name === "meni"){
 let age = 33;
}

console.log(age) // Uncaught ReferenceError: age is not defined

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

if(true){
let age = 18;
let age = 33; // Uncaught SyntaxError: Identifier 'age' has already been declared
}

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

function(){
 let name = "john";
 if (true) {
   let name = "lennon";
   console.log(name);// פלט: "lennon"
 }
 console.log(greeting);// פלט: "john"
}

let ו-Hoisting

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

בואו נדבר על const

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

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

כשאנחנו מצהירים על משתנה בעזרת const, אנחנו חייבים לאתחל את המשתנה ברגע ההצהרה, במידה ולא נעשה זאת, אנחנו נקבל שגיאה:

// הצהרה ללא אתחול משתנה - לא תקין
const something;
// Uncaught SyntaxError: Missing initializer in const declaration

כמו let, אם נצהיר על משתנה בעזרת const בבלוק מסוים הוא יהיה קיים אך ורק באותו בלוק. בנוסף, גם const לא יכול להיות מוצהר פעמיים בתוך הבלוק שבו הוא קיים:

// הצהרה נוספת על אותו משתנה - לא תקין
if(true){
  const age = 18;
  const age = 33; // Uncaught SyntaxError: Identifier 'age' has already been declared
}

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

const ו-Object

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

בואו נסתכל על הדוגמא הבאה:

// שינוי של שדות באובייקט - תקין לחלוטין
const car = {type:"Fiat", model:"500", color:"white"};
car.color = "red";
car.owner = "Johnson";

// השמה נוספת לאותו משתנה - לא תקין
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // Uncaught TypeError: Assignment to constant variable.

אם אתם רוצים ליצור אובייקט שהשדות (properties) שלו לא יוכלו להשתנות בעתיד, השתמשו בפונקציית Object.freeze שקיימת מ-ES5 ותעזור לכם ליצור אובייקטים שלא ניתנים לשינוי (immutable).

const ו-Array

כשאנחנו מצהירים על משתנה בעזרת const אשר יכיל מערך (Array), אנחנו לא נוכל לבצע השמה חדשה לאותו המשתנה (שינוי ה-reference) אך אנחנו כן נוכל להוסיף, להסיר ולערוך אלמנטים במערך, בואו נסתכל על הדוגמא הבאה:

// שינוי של הערכים במערך - תקין
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota";
cars.push("Audi");

console.log(cars); // פלט: ["Toyota", "Volvo", "BMW", "Audi"]

// השמה נוספת לאותו משתנה - לא תקין
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; 

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

עוד ב Javascript

Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
קריאה מהנה.

מאמרים פופולריים

נושאים פופולריים

חזרה למעלה