خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

چگونه عبارات if را در جاوا اسکریپت ساده کنیم

ساده تر اگر عبارات همیشه به معنای کد جاوا اسکریپت پاک تر است.

عبارات شرطی بخش اساسی جاوا اسکریپت هستند. آنها به شما اجازه می دهند بر اساس درست یا نادرست بودن یک شرط، کد را اجرا کنید، و می توانید چندین عبارت elseif (و یک دیگری) را برای ارزیابی بیش از یک شرط قرار دهید.

اما مشکل اینجاست – هنگام نوشتن زنجیره‌های پیچیده، همه چیز می‌تواند به سرعت به هم ریخته شود و به راحتی می‌توانید با کدهایی مواجه شوید که خواندن و درک آن دشوار است.

بیایید بیاموزیم که چگونه زنجیره‌های طولانی و پیچیده‌ی اگر…السیف…السیف را به نسخه‌ای مختصر، تمیزتر و قابل فهم تر تبدیل کنیم.

پیچیده اگر…دیگر زنجیر

هنگام نوشتن عبارات پیچیده if…else در جاوا اسکریپت، ضروری است که کدی تمیز، مختصر و قابل فهم بنویسید. به عنوان مثال، به زنجیره شرطی if…else در تابع زیر نگاهی بیندازید:

function canDrink(person) {
  if(person?.age != null) {
    if(person.age < 18) {
     console.log("Still too young")
    } else if(person.age < 21) {
      console.log("Not in the US")
    } else {
      console.log("Allowed to drink")
    }
  } else {
    console.log("You're not a person")
  }
}

const person = {
  age: 22
}

canDrink(person)

منطق اینجا ساده است. اولین عبارت if تضمین می کند که شی شخص دارای ویژگی سنی است (در غیر این صورت او یک شخص نیست). در داخل آن بلوک if، یک زنجیره if…else…if اضافه کرده اید که اساسا می گوید:

اگر فرد کمتر از 18 سال دارد، برای نوشیدن نوشیدنی بسیار جوان است. اگر کمتر از 21 سال سن داشته باشند، هنوز کمتر از سن قانونی نوشیدن الکل در ایالات متحده هستند. در غیر این صورت، آنها می توانند به طور قانونی یک نوشیدنی دریافت کنند.

مطلب مرتبط:   چگونه یک نمودار ساده با Chart.js بسازیم

در حالی که کد بالا معتبر است، تودرتو درک کد را برای شما دشوارتر می کند. خوشبختانه، می‌توانید با استفاده از یک بند محافظ، کد را به گونه‌ای که مختصر و راحت‌تر خوانده شود، اصلاح کنید.

بندهای نگهبانی

هر زمان که دستور if دارید که تمام کد شما را می‌پیچد، می‌توانید از یک بند نگهبان برای حذف تمام تودرتوها استفاده کنید:

function canDrinkBetter() {
  if(person?.age == null) return console.log("You're not a person")

  if(person.age < 18) {
    console.log("Still too young")
  } else if(person.age < 21) {
    console.log("Not in the US")
  } else {
    console.log("Allowed to drink")
  }
}

در ابتدای تابع، یک بند محافظ تعریف کردید که بیان می‌کرد اگر آن شرط خاص برآورده نشد، می‌خواهید فوراً از تابع canDrinkBetter() خارج شوید (و وارد کنید “شما یک شخص نیستید” در کنسول).

اما اگر شرط برآورده شد، زنجیره if…else را ارزیابی می کنید تا ببینید کدام بلوک قابل اجرا است. اجرای کد همان نتیجه مثال اول را به شما می دهد، اما خواندن این کد آسان تر است.

از یک بازگشت استفاده نکنید

ممکن است استدلال کنید که تکنیک بالا یک اصل برنامه نویسی خوب نیست زیرا ما از چندین بازگشت در یک تابع استفاده می کنیم و معتقدید که بهتر است فقط یک عبارت بازگشتی داشته باشیم (معروف به سیاست بازگشت واحد).

اما این یک راه وحشتناک برای نوشتن کد است، زیرا شما را مجبور می‌کند به همان موقعیت‌های تودرتوی دیوانه‌واری که در نمونه کد اول دیدیم، بروید.

با این گفته، می‌توانید از چندین دستور بازگشت برای ساده‌سازی بیشتر کد خود استفاده کنید (و از شر تودرتو خلاص شوید):

function canDrinkBetter() {
  if(person?.age == null) return console.log("You're not a person")

  if(person.age < 18) {
    console.log("Still too young")
    return
  }

  if(person.age < 21) {
    console.log("Not in the US")
    return
  }

  console.log("Allowed to drink")
}

این کد مانند دو مثال قبلی کار می کند و همچنین کمی تمیزتر است.

مطلب مرتبط:   نحوه پیاده سازی احراز هویت کاربر در فلاسک با استفاده از JWT

استخراج توابع برای کد پاک کننده

آخرین بلوک کد ما تمیزتر از دو مورد اول بود، اما هنوز آنقدر که می‌توانست خوب نیست.

به جای داشتن یک زنجیره طولانی if…else در داخل یک تابع، می توانید یک تابع جداگانه canDrinkResult() ایجاد کنید که بررسی را برای شما انجام می دهد و نتیجه را برمی گرداند:

function canDrinkResult(age) {
  if(age < 18) return "Still too young"
  if(age < 21) return "Not in the US"
  return "Allowed to drink"
}

سپس در داخل تابع main، تنها کاری که باید انجام دهید این است که ابتدا بند محافظ را قبل از فراخوانی تابع canDrinkResult() (با پارامتر سن) اعمال کنید تا به نتیجه برسید:

function canDrinkBetter() {
  if(person?.age == null) return console.log("You're not a person")

  let result = canDrinkResult(person.age)
  console.log(result)
}

بنابراین در این مورد، شما وظیفه بررسی سن نوشیدن را به یک تابع جداگانه واگذار کردید و فقط در صورت نیاز آن را فراخوانی کردید. این باعث می شود کد شما مختصر و ساده تر از همه مثال های قبلی کار کنید.

موارد دیگر را از اظهارات مشروط دور نگه دارید

شما یاد گرفته‌اید که چگونه زنجیره‌های شرطی پیچیده و تودرتو را با استفاده از بندهای محافظ و تکنیک استخراج تابع به زنجیره‌های کوتاه‌تر و خوانا تبدیل کنید.

سعی کنید با استفاده از هر دو بند محافظ و تکنیک استخراج تابع، عبارت else را تا حد امکان از شرطی های خود دور نگه دارید.

اگر هنوز در استفاده از عبارت if…else جاوا اسکریپت تازه کار هستید، با اصول اولیه شروع کنید.

مطلب مرتبط:   چگونه یک برنامه CRUD لیست کار بسازیم و وضعیت های آن را در React مدیریت کنیم