شرح let وconst في JavaScript بالأمثلة العملية: من الأساسيات إلى المستوى المتقدم

شرح let وconst في JavaScript بالأمثلة العملية: من الأساسيات إلى المستوى المتقدم

السلام عليكم

بعد أن تعرّفنا في الدرس السابق على المتغيرات في JavaScript والفرق بين var وlet وconst،

 سنركّز في هذا الدرس على استخدام let وconst بصورة أعمق، مع أمثلة عملية تساعدنا على فهم طريقة التعامل مع القيم وتجنّب الأخطاء الشائعة.

الهدف ليس حفظ القواعد فقط، بل معرفة متى نستخدم كل كلمة، وكيف نكتب كودًا واضحًا ومنظمًا منذ البداية.

أولًا: مراجعة سريعة للفرق بين let وconst

تُستخدم let لإنشاء متغير يمكن تغيير قيمته بعد تعريفه، بينما تُستخدم const لإنشاء متغير لا يمكن إعادة إسناد قيمة جديدة إليه بعد تعريفه.

مثال على let:

let score = 10;

score = 25;

console.log(score);

الناتج:

25

بدأ المتغير score بالقيمة 10، ثم غيّرنا قيمته إلى 25، ولذلك ظهرت القيمة الجديدة عند الطباعة.

أما مع const:

const country = "Egypt";

console.log(country);

الناتج:

Egypt

يعمل المثال بصورة طبيعية؛ لأننا عرّفنا المتغير وأعطيناه قيمة دون محاولة إعادة إسناد قيمة جديدة إليه.

ثانيًا: متى نستخدم let؟

نستخدم let عندما نتوقع أن تتغير قيمة المتغير أثناء كتابة البرنامج أو تشغيله.

على سبيل المثال، تخيّل أننا نكتب برنامجًا بسيطًا لحساب مجموع النقاط التي يحصل عليها لاعب:

let points = 0;

points = points + 10;
points = points + 15;
points = points + 5;

console.log(points);

الناتج:

30

بدأنا من صفر، ثم أضفنا 10 نقاط، وبعدها 15 نقطة، ثم 5 نقاط.

في كل مرة، حُسبت قيمة جديدة وأُسندت إلى المتغير points. لذلك كان استخدام let مناسبًا هنا.

مثال آخر:

let productPrice = 200;

productPrice = 180;

console.log(productPrice);

الناتج:

180

يمكننا استخدام let عندما تتغير قيمة السعر، مثل حالة تخفيض سعر منتج في مثال برمجي.

ثالثًا: متى نستخدم const؟

نستخدم const عندما نريد إنشاء متغير لا نحتاج إلى إعادة إسناد قيمة جديدة إليه.

مثال:

const appName = "KINGDOM";

console.log(appName);

الناتج:

KINGDOM

إذا حاولنا إعادة إسناد قيمة جديدة إلى المتغير نفسه، فسيحدث خطأ:

const appName = "KINGDOM";

appName = "PRO-Tech";

console.log(appName);

السبب أن const لا يسمح بإعادة إسناد قيمة جديدة إلى المتغير بعد تعريفه.

ومن المهم معرفة أن const لا يعني أن القيمة يجب أن تكون رقمًا أو نصًا؛ بل يمكن استخدامه مع أنواع مختلفة من القيم في JavaScript.

رابعًا: أمثلة على اختيار الكلمة المناسبة

لنفترض أننا نريد تخزين اسم المستخدم وعمره ودرجة اختباره.

const username = "Ahmed";
const birthYear = 2005;
let examScore = 70;

examScore = 85;

console.log(username);
console.log(birthYear);
console.log(examScore);

الناتج:

Ahmed
2005
85

استخدمنا const مع الاسم وسنة الميلاد لأننا لا نحتاج إلى إعادة إسناد قيم جديدة إليهما في هذا المثال، واستخدمنا let مع درجة الاختبار لأننا غيّرناها من 70 إلى 85.

هذا لا يعني أن الاسم أو سنة الميلاد لا يمكن أن يتغيرا في كل البرامج؛ بل يعتمد اختيارنا على ما إذا كنا نحتاج إلى إعادة إسناد قيمة جديدة للمتغير في البرنامج الذي نكتبه.

خامسًا: هل يمكن استخدام const مع المصفوفات والكائنات؟

نعم، يمكن استخدام const مع المصفوفات والكائنات، لكن توجد نقطة مهمة يجب فهمها.

عندما نستخدم const مع مصفوفة، يمكننا تعديل محتوياتها، لكن لا يمكننا إعادة إسناد المتغير إلى مصفوفة أخرى.

مثال:

const colors = ["red", "blue"];

colors.push("green");

console.log(colors);

الناتج:

["red", "blue", "green"]

نجح المثال لأننا أضفنا عنصرًا إلى المصفوفة، ولم نُعد إسناد المتغير colors إلى مصفوفة أخرى.

أما المثال التالي:

const colors = ["red", "blue"];

colors = ["black", "white"];

فسينتج عنه خطأ؛ لأننا حاولنا إسناد مصفوفة جديدة إلى متغير مُعرّف باستخدام const.

وينطبق المبدأ نفسه على الكائنات:

const user = {
  name: "Ahmed",
  age: 20
};

user.age = 21;

console.log(user.age);

الناتج:

21

تغيّرت قيمة الخاصية age، لكن المتغير user نفسه لم يُعَد إسناده إلى كائن آخر.

سادسًا: أخطاء شائعة عند استخدام let وconst

الخطأ الأول: محاولة تغيير قيمة const

const price = 100;

price = 150;

هذا غير مسموح؛ لأننا حاولنا إعادة إسناد قيمة جديدة إلى المتغير price.

الخطأ الثاني: استخدام let دون الحاجة إليه

let websiteName = "KINGDOM";

console.log(websiteName);

هذا الكود صحيح، لكن إذا لم نكن بحاجة إلى إعادة إسناد قيمة جديدة إلى websiteName، فإن const سيكون اختيارًا مناسبًا.

الخطأ الثالث: الاعتقاد أن const يمنع تغيير كل شيء داخل المصفوفة

const numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);

هذا الكود صحيح، لأن const يمنع إعادة إسناد المتغير، وليس تعديل محتويات المصفوفة نفسها.

سابعًا: نصائح لاختيار let وconst

ابدأ باستخدام const عندما لا تحتاج إلى إعادة إسناد قيمة جديدة إلى المتغير.

استخدم let عندما تحتاج إلى تغيير القيمة لاحقًا.

اختر أسماء واضحة للمتغيرات، مثل totalPrice وuserName وexamScore.

لا تستخدم const لمجرد الاعتقاد أن قيمته لن تتغير مطلقًا؛ فالمهم هو فهم الفرق بين إعادة إسناد المتغير وتعديل محتويات المصفوفة أو الكائن.

جرّب الأمثلة بنفسك، وغيّر القيم ولاحظ النتائج.

اختبر فهمك

السؤال الأول: ما الناتج؟

let score = 10;
score = 20;

console.log(score);

السؤال الثاني: هل الكود التالي صحيح؟

const language = "JavaScript";
language = "Python";

الإجابات

إجابة السؤال الأول اكتب إجابته في التعليقات وانا سوف ارد عليك واخبرك إن كانت صحيحة او تحتاج لتعديل .

إجابة السؤال الثاني :-

الكود ينتج عنه خطأ؛ لأننا حاولنا إعادة إسناد قيمة جديدة إلى متغير const.

الخاتمة

يُعد فهم let وconst خطوة مهمة في تعلم JavaScript.

 فاختيار الكلمة المناسبة يجعل الكود أوضح ويساعد على تجنّب بعض الأخطاء أثناء البرمجة.

تذكّر القاعدة الأساسية: استخدم const عندما لا تحتاج إلى إعادة إسناد قيمة جديدة، واستخدم let عندما تحتاج إلى تغيير قيمة المتغير.

في الدروس القادمة من دورة JavaScript التأسيسية على KINGDOM، سنواصل بناء المعرفة خطوة بخطوة،

 مع التركيز على الفهم والتطبيق العملي قبل الانتقال إلى موضوعات جديدة.

شكراً لكم

والسلام عليكم ورحمة الله وبركاته