كيف يمكنني جعل صيغة الشرط condition افضل؟

منتصر احمد · 20 مايو 2022

كيف يمكنني جعل الcondition افضل مثلا كيف يمكنني جعل هذا ال condition افضل:

if (condition) {
  // if true
}else {
  // if flase
}

تم التعديل في 20 مايو 2022 بواسطة سامح أشرف
توضيع عنوان السؤال

سامح أشرف · 20 مايو 2022

الشرط في الكود المرفق لا يوجد به أي مشكلة، فتكوين جملة if .. else مصمم ليكون بهذا الشكل تمامًا:

if (condition) {
  // condition is true
} else {
  // condition is false
}

إن كان ما تريد تنفيذه من هذا الشرط هو تعليمه بسيطة مثل تخزين قيمة في متغير فيمكنك إستعمال المعامل الثلاثي trinity operator كما يلي:

// المعامل الثلاثي trinity operator
// conditoin ? true : false;

const age = 19;
var msg = age > 18 ? "you are an adult" : "you are young";

console.log(msg);

لكن هناك طرق يمكن تحسين الكود ليكون أفضل وأقل عرضة للأخطاء، على سبيل المثال الكود التالي يقوم بجلب عمر المستخدم من حقل input:

<input id="age-input" type="number" />
<button id="submit">submit</button>

var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  if (age > 0) {
    // condition is true
    console.log("condition is true");
  } else {
    // condition is false
    console.log("condition is false");
  }
});

إذا قام المستخدم بكتابة عمره فسوف يتم طباعة condition is true ولكن ماذا يحدث إذا كتب صفر 0 ، أو إن ترك المستخدم الحقل فارغًا، أو في حالة كتابة رقم أقل من صفر (رقم سالب)، في هذه الحالة يجب أن نحدد الشرط بشكل أدق:

var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  if (age > 0) {
    // condition is true
    console.log("condition is true");
  } else {
    // condition is false
    console.log("condition is false");
  }
});

أيضًا بما أن الكود موجود في دالة function ونريد تنفيذ أما الكود الموجود في جملة if أو الكود الموجود في جملة else، فيمكننا الإستعانه بالكلمة المفتاحية return والإستغناء عن جملة else:

var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  
  if (age > 0) {
    // condition is true
    console.log("condition is true");
    return;
  }
    
  // condition is false
  console.log("condition is false");
});

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

var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  
  if (age <= 0) {	// لاحظ الشرط 
    // condition is false
    console.log("condition is false");
    return;
  }  
    
  // condition is true
  console.log("condition is true");
});

ويمكننا إضافة أكثر من شرط في بداية الدالة، مثلًا إذا لم يقم المستخدم بكتابة أي شيء في الحقل:

var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  
  // if age equal or is less than 0
  if (age <= 0) {
    // condition is false
    console.log("condition is false");
    return;
  }
  
  // if there is no `age` value
  if (age !== "") {
    // condition is false
    console.log("condition is false");
    return;
  }
    
  // main functionality
  console.log("condition is true");
});

كل هذه المباديء تنتدرج تحت مصطلح الكود النظيف Clean Code ، ويمكنك قراءة المزيد عنه من خلال موسوعة حسوب من هنا، أو من خلال الأسئلة التالية:

منتصر احمد · 20 مايو 2022

بتاريخ 4 دقائق مضت قال سامح أشرف:
الشرط في الكود المرفق لا يوجد به أي مشكلة، فتكوين جملة if .. else مصمم ليكون بهذا الشكل تمامًا:
if (condition) {
  // condition is true
} else {
  // condition is false
}
إن كان ما تريد تنفيذه من هذا الشرط هو تعليمه بسيطة مثل تخزين قيمة في متغير فيمكنك إستعمال المعامل الثلاثي trinity operator كما يلي:
// المعامل الثلاثي trinity operator
// conditoin ? true : false;

const age = 19;
var msg = age > 18 ? "you are an adult" : "you are young";

console.log(msg);
لكن هناك طرق يمكن تحسين الكود ليكون أفضل وأقل عرضة للأخطاء، على سبيل المثال الكود التالي يقوم بجلب عمر المستخدم من حقل input:
<input id="age-input" type="number" />
<button id="submit">submit</button>
var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  if (age > 0) {
    // condition is true
    console.log("condition is true");
  } else {
    // condition is false
    console.log("condition is false");
  }
});
إذا قام المستخدم بكتابة عمره فسوف يتم طباعة condition is true ولكن ماذا يحدث إذا كتب صفر 0 ، أو إن ترك المستخدم الحقل فارغًا، أو في حالة كتابة رقم أقل من صفر (رقم سالب)، في هذه الحالة يجب أن نحدد الشرط بشكل أدق:
var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  if (age > 0) {
    // condition is true
    console.log("condition is true");
  } else {
    // condition is false
    console.log("condition is false");
  }
});
أيضًا بما أن الكود موجود في دالة function ونريد تنفيذ أما الكود الموجود في جملة if أو الكود الموجود في جملة else، فيمكننا الإستعانه بالكلمة المفتاحية return والإستغناء عن جملة else:
var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  
  if (age > 0) {
    // condition is true
    console.log("condition is true");
    return;
  }
    
  // condition is false
  console.log("condition is false");
});
بهذا الشكل يكون الكود أوضح من السابق، وما زال بإمكاننا تحسينه أكثر، فمن الأفضل أن نجعل كل شروط التحقق في بداية الدالة، بحيث لا يتم تنفيذ الكود إلا عند تخطي كل الشروط، على النحو التالي:
var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  
  if (age <= 0) {	// لاحظ الشرط 
    // condition is false
    console.log("condition is false");
    return;
  }  
    
  // condition is true
  console.log("condition is true");
});
ويمكننا إضافة أكثر من شرط في بداية الدالة، مثلًا إذا لم يقم المستخدم بكتابة أي شيء في الحقل:
var submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", function () {
  var age = parseInt(document.getElementById("age-input").value);
  
  // if age equal or is less than 0
  if (age <= 0) {
    // condition is false
    console.log("condition is false");
    return;
  }
  
  // if there is no `age` value
  if (age !== "") {
    // condition is false
    console.log("condition is false");
    return;
  }
    
  // main functionality
  console.log("condition is true");
});
كل هذه المباديء تنتدرج تحت مصطلح الكود النظيف Clean Code ، ويمكنك قراءة المزيد عنه من خلال موسوعة حسوب من هنا، أو من خلال الأسئلة التالية:

هل يمكنك شرح return; لانني لا افهم ما معناها

سامح أشرف · 20 مايو 2022

بتاريخ 30 دقائق مضت قال Mohamed Montaser3:

هل يمكنك شرح return; لانني لا افهم ما معناها

الكلمة المفتاحية return تستعمل لإرجاع قيمة من الدالة وإيقاف تشغيلها، مثال:

// لدينا دالة تقوم بطباعة ضعف أي رقم مُمرر لها
function double(num) {
  console.log(num * 2);
}

double(5);	// سيتم طباعة 10
double(3);	// سيتم طباعة 6
double(8);	// سيتم طباعة 16

الدالة double السابقة تقوم بطباعة ضعف أي رقم مُدخل إليها (تضرب الرقم في 2 وتطبع الناتج)، لكن ماذا إذا أردنا أن نستخدم ناتج عملية الضرب هذه بدلًا من طباعتها؟ في هذه الحالة لا نستعمل console.log بل نستعمل الكلمة return :

// لدينا دالة تقوم بطباعة ضعف أي رقم مُمرر لها
function double(num) {
  return (num * 2);
}

var result = double(5);
console.log("The result is:", result);	// The result is: 10

الكلمة return تقوم بإرجاع قيمة وإيقاف تنفيذ الدالة، أي أن أي شيء يأتي بعدها لن يتم تنفيذه:

// لدينا دالة تقوم بطباعة ضعف أي رقم مُمرر لها
function double(num) {
  return (num * 2);
  console.log("Some Content");	// هذا السطر لن يتم تنفيذه لأنه جاء بعد كلمة return
}

var result = double(5);
console.log("The result is:", result);	// The result is: 10

لمزيد من المعلومات حول الكلمة المفتاحية return أقرأ فقرة "أرجاع قيمة"، في هذه المقالة:

المقالة السابقة جزء من سلسلة "دليل تعلم جافاسكربت"، وهي سلسلة شاملة لكل أساسيات JavaScript وتحتوي على شرح لكثير من الأمور المتقدمة.

منتصر احمد · 20 مايو 2022

بتاريخ 1 دقيقة مضت قال سامح أشرف:
الكلمة المفتاحية return تستعمل لإرجاع قيمة من الدالة وإيقاف تشغيلها، مثال:
// لدينا دالة تقوم بطباعة ضعف أي رقم مُمرر لها
function double(num) {
  console.log(num * 2);
}

double(5);	// سيتم طباعة 10
double(3);	// سيتم طباعة 6
double(8);	// سيتم طباعة 16
الدالة double السابقة تقوم بطباعة ضعف أي رقم مُدخل إليها (تضرب الرقم في 2 وتطبع الناتج)، لكن ماذا إذا أردنا أن نستخدم ناتج عملية الضرب هذه بدلًا من طباعتها؟ في هذه الحالة لا نستعمل console.log بل نستعمل الكلمة return :
// لدينا دالة تقوم بطباعة ضعف أي رقم مُمرر لها
function double(num) {
  return (num * 2);
}

var result = double(5);
console.log("The result is:", result);	// The result is: 10
لمزيد من المعلومات حول الكلمة المفتاحية return أقرأ فقرة "أرجاع قيمة"، في هذه المقالة:

المقالة السابقة جزء من سلسلة "دليل تعلم جافاسكربت"، وهي سلسلة شاملة لكل أساسيات JavaScript وتحتوي على شرح لكثير من الأمور المتقدمة.

لا انا فاهم ال return بس انا قصدي انك كتبت return; منغير حاجه ايه معناها

سامح أشرف · 20 مايو 2022

بتاريخ الآن قال Mohamed Montaser3:

لا انا فاهم ال return بس انا قصدي انك كتبت return; منغير حاجه ايه معناها

أي دالة في JavaScript يجب أن ترجع قيمة بشكل أو بآخر، وإن لم تحتوي الدالة على كلمة return أو لم ترجع قيمة محددة فسوف ترجع undefined بشكل إفتراضي:

// الدالة التالية لا تحتوي على return
// لذلك يتم إرجاع undefined
function test() { }

console.log(test());	// undefined

والكلمة return يمكنها إرجاع أي قيمة، حتى أنه يمكن إستخدامها لإرجاع دالة جديدة كاملة، وفي حالة لم يتم إعطائها قيمة لإرجاعها، فسوف يتم إرجاع undefined بشكل إفتراضي كذلك:

// الكلمة return ترجع undefined في حالة لم يتم تحديد قيمة معينة لإرجاعها
function test() {
  return;
}

console.log(test());	// undefined

ومن المتعارف عليه هو إستخدام return في مثل هذه الحالة لإيقاف الدالة فقط، وليس لإرجاع قيمة معينة.

منتصر احمد · 20 مايو 2022

بتاريخ 1 دقيقة مضت قال سامح أشرف:
أي دالة في JavaScript يجب أن ترجع قيمة بشكل أو بآخر، وإن لم تحتوي الدالة على كلمة return أو لم ترجع قيمة محددة فسوف ترجع undefined بشكل إفتراضي:
// الدالة التالية لا تحتوي على return
// لذلك يتم إرجاع undefined
function test() { }

console.log(test());	// undefined
والكلمة return يمكنها إرجاع أي قيمة، حتى أنه يمكن إستخدامها لإرجاع دالة جديدة كاملة، وفي حالة لم يتم إعطائها قيمة لإرجاعها، فسوف يتم إرجاع undefined بشكل إفتراضي كذلك:
// الكلمة return ترجع undefined في حالة لم يتم تحديد قيمة معينة لإرجاعها
function test() {
  return;
}

console.log(test());	// undefined
ومن المتعارف عليه هو إستخدام return في مثل هذه الحالة لإيقاف الدالة فقط، وليس لإرجاع قيمة معينة.

ما فائدة ايقاف الداله ؟

سامح أشرف · 20 مايو 2022

بتاريخ الآن قال Mohamed Montaser3:

ما فائدة ايقاف الداله ؟

هذا الأمر مهم في كثير من الحالات، على سبيل المثال بفرض أن لدينا دالة تتحقق مما إذا كان المستخدم كبير كفاية لدخول الصفحة (عمره 18 أو أكبر):

function userIsAdult(age) {
  // في حالة كتب المستخدم رقم أقل من 18
  if (age < 18) {
    console.log("you can not access this page");
    // إن لم يتم إيقاف الدالة هنا سوف تكمل العمل 
  }  
    
  // condition is true
  console.log("you are an adult");
}

// عند تنفيذ الدالة السابقة برقم أقل من 18
userIsAdult(10);

/*
Output:
you can not access this page
you are an adult
*/

لاحظ أن الدالة في المثال السابق إن لم تتوقف في حالة كانت قيمة age أقل من 18 فسوف يتم طباعة كلا الجملتين لأن الدالة سوف تكمل العمل بغض النظر عما إذا كان الشرط مُحققًا أم لا، لذلك علينا إيقاف الدالة إن كان العمر أقل من 18:

function userIsAdult(age) {
  // في حالة كتب المستخدم رقم أقل من 18
  if (age < 18) {
    console.log("you can not access this page");
    return;	// نوقف الدالة عن العمل هنا في حالة توقف الشرط
  }  
    
  // condition is true
  console.log("you are an adult");
}

// عند تنفيذ الدالة السابقة برقم أقل من 18
userIsAdult(10);

/*
Output:
you can not access this page
*/

كيف يمكنني جعل صيغة الشرط condition افضل؟

السؤال

منتصر احمد

7 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

منتصر احمد

سامح أشرف

منتصر احمد

سامح أشرف

منتصر احمد

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية