Gaurd Clause چیه

هرچند که این نوشته قراره راجعبه برنامه نویسی و مخصوصا جاوا اسکریپت باشه اما مفهومی که میخوام راجع بهش بنویسم چیزیه که ماها زیاد توی جامعمون دیدیم.

قطعا برای هممون پیش اومده که رفتیم کارخاصی انجام بدیم و شرایط اصلی انجام اون کار رو داریم ولی جلومون گرفته میشه چون توی همون قانون یک تبصره وجود داره که مارو از انجام دادن اون کار خاص منع میکنه .

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

حالا توی دنیای برنامه نویسی به این تبصره میگن Gaurd Clause.

فرض کنید که یک گروه از دکمه هارو داریم و قراره وقتی رو هرکدوم کلیک میکنیم محتوای خاصی رو بهمون نشون بده:

HTML:
<div class=&quotbtnContainer flex flex-col w-[140px] justify-center&quot>
<button class=&quotbtn bg-cyan-500 rounded&quot>
<span>item1</span>
</button>
<button class=&quotbtn bg-red-500 rounded mt-4&quot>
<span>item2</span>
</button>...
</div>
Js:
const btnContainer = document.querySelector(&quot.btnContainer&quot);
const btns = document.querySelectorAll(&quot.btn&quot);

همونطور که احتمالا میخوایم کدمون بهینه باشه باید از Event Deligation استفاده کنیم و پس :

btnContainer.addEventListener('click',(e)=>{

حالا نکته اینه که ما باید بریم سراغ Dom traversal که اگرروی span ایکه توی هر دکمه قرار داره کلیک کردیم همون دکمه ای که والدش هست عملیات رو انجام بده و بهترین متدبرای این مورد closest هست:

const clicked = e.target.closest(&quot.btn&quot);
console.log(clicked);
}

تا اینجای کار به نظر همه چیز مرتبه و مشکلی نیست و هر بار که کاربر روی دکمه یا span هر دکمه ای کلیک کنه توی کنسول خروجی رو میبینه

اما مشکل جایی پیش میاد که کاربر بیاد و جایی کلیک کنه که Js نتونه نزدیکترین والد (closest('.btn')) رو تشخیص بده مثلا بین دکمه ها کلیک کنه

اینجاست که برنامه کار نمیکنه و توی کنسول ارور زیر رو میبینیم

script.js:151 Uncaught TypeError: Cannot read properties of null (reading 'classList')     at HTMLDivElement.<anonymous> (script.js:151:11)

یعنی ما شرط لازم که عملیاتی رو انجام بده (کلیک کردن توی محوطه btnContainer) رو داریم ولی تبصره اینه که مشخص به JS بفهمونیم که دقیقا کدوم دکمه مد نظرمونه وگرنه به ارور میخوریم اینجاست که مفهوم Gaurd Clause معنی پیدا میکنه کافیه یک شرط بذاریم و جلوی این ارور رو بگیریم:

if(clicked){
console.log(clicked)
}

که البته شکل مدرن ترش به صورت زیره:

if(!clicked)return;
console.log(clicked)

این کار به این معنی نیست که کلیک توی جای نامربوط خروجیش null نخواهد بود، بلکه به این معنیه که دیگه اروری وجود نخواهد داشت.

پس شکل کلی کدمون در نهایت میشه:

const btnContainer = document.querySelector(&quot.btnContainer&quot);
const btns = document.querySelectorAll(&quot.btn&quot);
btnContainer.addEventListener(&quotclick&quot, (e) => {
const clicked = e.target.closest(&quot.btn&quot);
if(!clicked)return; 
console.log(clicked)
});