تعريف JavaScript Let and Const
-
بنحكي في هذا الدرس عن طرق التعريف Let و Const وكيف بتم التعريف، أيضا كيفية الاستخدام. واكيد بنطبق امثلة عليها. وتستخدم هذه Keywords لتعريف المتغيرات مثل var مع وجود فروقات.
نبدأ ب Let
تم استخدام هذه keyword let في ES6 (2015).
يجب تعريف Declared المتغيرات المعرفة بـ let قبل الاستخدام.
لا يمكن إعادة تعريف Re-declared المتغيرات المعرفة بـ let.
المتغيرات المعرفة بواسطة let لها Block Scope.
شو يعني هذا الكلام.
اذا عرفنا أي متغير باستخدام كلمة Let ممنوع نرجع نعرف نفس الاسم في مكان ثاني في الصفحه (برجع خطأ)
مثال :
let x=100;
let x=50;
النتيجة:
اكيد لاحظت الرسالة ان ممنوع إعادة التعريف.( Block Scope)
لكن هذا التعريف ما في أي مشكلة باستخدام var
var x=100;
var x=50;
شو يعني Block Scope
تعني هذه الكلمة ان في حال تم تعريف متغيرات داخل كتلة block فهذا الامر يعني ان لا يمكن الوصول الى هذه المتغيرات من خارج هذه الكتلة block
هذا المفهوم تم اضافته في ES6 مع إضافة Let و const (يعني هذا المفهوم مربوط مع let و const). بمعنى اخر يمكن القول ان عند استخدام let و const بتم تعريف Block Scope للمتغيرات ولا يمكن إعادة تعريفها مره ثانيه في الصفحة،(الا في حال تم إعادة التعريف في block مختلف ولكن القيمه ما بتتغير)
الامر مختلف عند استخدام var ،هذه الكلمة var بتشتغل على مفهوم Global Scope and Function Scope الي بيعني ان scope كامل الصفحه وبالتالي يمكن إعادة استخدام المتغير في أي مكان.
يمكن تعريف block scope باستخدام الاقواس
{
var x = 2;
}في هذا block المعنى ان x يمكن الوصول اليها فقط داخل هذا block
نطبق مثال حتى نفهم الموضوع:
إعادة التعريف باستخدام var
كود ملف JS
var x = 100;
{
var x = 200;
}
document.getElementById("Result").innerHTML = x;
كود ملف HTML
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Variables</h3>
<p id="Result"></p>
<script src="JS.js"></script>
</body>
</html>
النتيجة
تم إعادة تعريف المتغير x في block مختلف ومع ذلك القيمة المطبوعة كانت 200 بسبب استخدام var
نفس المثال السبق باستخدام let
ملف JS
let x = 100;
{
let x = 200;
}
document.getElementById("Result").innerHTML = x;
ملف HTML
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Variables</h3>
<p id="Result"></p>
<script src="JS.js"></script>
</body>
</html>
النتيجة :
لاحظ ان تم إعادة تعريف المتغير x مع استخدام let لكن في block مختلف. ومع ذلك تم طباعة القيمة 100 وهي القيمة الأولى للمتغير.
JavaScript Const
تم استخدام هذه keyword const في ES6 (2015).
يجب تعريف Declared المتغيرات المعرفة بـ const قبل الاستخدام.
لا يمكن إعادة تعيين Reassigned المتغيرات المعرفة بـ const.
لا يمكن إعادة تعريف Re-declared المتغيرات المعرفة بـ const.
المتغيرات المعرفة بواسطة const لها Block Scope.
تستخدم const مع المتغيرات الثابتة فقط (اذا كان هناك احتمالية لتغير قيمة المتغير فلا يجب استخدام هذه الكلمة) هذا الامر يفسر ليش لا يمكن إعادة التعيين Reassigned لان في حال Reassigned سيفقد المتغير قيمته وهذا غير الهدف من هذه الكلمة
شو يعني هذا الكلام.
إعادة تعيين Reassigned المتغيرات
اذا عرفنا أي متغير باستخدام كلمة const ممنوع نرجع نعيين قيمة ثانية لنفس المتغير (برجع خطأ)
مثال :
const x=100;
x=50;
document.getElementById("Result").innerHTML = x;
النتيجة:
الخطأ : Assignment to constant variable. بمعني ان لا يمكن إعادة التعيين بسبب قيود المتغير.
يجب التعيين Assigned
المعنى: يجب تعيين قيمة للمتغير عند استخدام const واذا ما تم التعريف النتيجة بتكون خطأ.
مثال :
const x;
document.getElementById("Result").innerHTML = x;
النتيجة
معنى الرسالة: يجب إضافة قيمة للمتغير في البداية.
نفس الرسالة من المتصفح:
متى يتم استخدام JavaScript const؟
كقاعدة عامة، يمكن استخدام الكلمة const في تعريف المتغيرات باي وقت إلا إذا كان عندنا علم أن القيمة للمتغير ستتغير.
يمكن استخدام const عندما تعريف:
A new Array
A new Object
A new Function
A new RegExp
تمام نفهم شو يعني هذا الكلام ونطبق مثال على كل نوع حتى نفهم.
تعريف Array باستخدام const
يمكن استخدام const لتعريف المصفوفات array ل
- تغيير عناصر المصفوفة الثابتة constant array
- تغيير خصائص الكائن الثابت constant object
ومثل ما حكينا إعادة التعريف او التعيين يتنافى مع الهدف من هذه الكلمة. (تتعامل مع المتغيرات الثابته)
مثال:
ملف JS
// You can create a constant array:
const PL = ["C# ", "F# ", "VB "];
// You can change an element:
PL[0] = "Python ";
// You can add an element:
PL.push("PHP ");
// Display the Array:
document.getElementById("Result").innerHTML = PL;
كود ملف HTML
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Variables</h3>
<p id="Result"></p>
<script src="JS.js"></script>
</body>
</html>
النتيجة:
نفهم شو عملنا
عرفنا مصفوفه للغات البرمجة في السطر الأول.
في السطر الثاني غيرنا اول قيمة في المصفوفة من C# الى Python
في السطر الثالث اضفنا قيمة جديده الى المصفوفة تساوي PHP
واخر اشي طبعنا القيمة على الشاشة.
لإضافة قيمة الى المصفوفة بنستخدم الامر
push
لاحظ ان عملنا في الكود استبدال للقيمة C# ولو حاولنا إعادة تعيين القيمة Python بدل C# بتكون النتيجة خطأ.
يعني في حال تبديل الكود السابق الى (إعادة تعيين القيم)
// You can create a constant array:
const PL = ["C# ", "F# ", "VB "];
// You can change an element:
//PL[0] = "Python ";
PL = ["Python ", "F# ", "VB "];
// You can add an element:
PL.push("PHP ");
// Display the Array:
document.getElementById("Result").innerHTML = PL;
النتيجة:
تغيير خصائص الكائن الثابت constant object
حكينا ان اعادة التعريف وإعادة التعيين ممنوع في const، لكن يمكن تغيير الخصائص objects properties ل object المعرفة باستخدام const.
المثال السابق نعدل الكود الي :
ملف JS
// You can create a const object:
const car = {Type:"BMW",Model: "2020",color: "Black "};
// You can change an property:
car.color = "Gray ";
// You can add an property:
car.number="123456"
// Display the const object:
document.getElementById("Result").innerHTML = "Car Type: "+car.Type +" ,Car Model: "+car.Model +" ,Car Color: "+car.color+ ", Car number: "+car.number;
ملف HTML
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Variables const</h3>
<p id="Result"></p>
<script src="JS.js"></script>
</body>
</html>
النتيجة:
شو عملنا
عرفنا object باسم car له مجموعه من property وهي
const car = {Type:"BMW",Model: "2020",color: "Black "};بعد هيك غيرنا property اللون الى gray
car.color = "Gray ";
وبعدها اضفنا property جديده لرقم السياره
car.number="123456"
وأخيرا طبعنا object
لاحظ ان ما غيرنا على قيم object الأصل.
لو حاولت تعدل على القيم ل object باعادة التعريف او التعيين بتكون النتيجة خطأ.
مثلا لو غيرن الكود الى :
// You can create a const object:
const car = {Type:"BMW",Model: "2020",color: "Black "};
// You can change an property:
//car.color = "Gray ";
car = {Type:"BMW",Model: "2020",color: "Gray "};
// You can add an property:
car.number="123456"
// Display the const object:
document.getElementById("Result").innerHTML = "Car Type: "+car.Type +" ,Car Model: "+car.Model +" ,Car Color: "+car.color+ ", Car number: "+car.number;
النتيجة خطأ
اترك تعليقك