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

پس ....

اولین قهوه رو بریزین که روزِ سنگین و به‌ شدت جذابی در پیش داریم...

☝🏻 قدم اول
خیلی‌ها فکر می‌کنن دیزاین سیستم یعنی همون فایل فیگما که طراح بهمون میده. اما تو دنیای مهندسی نرم‌افزار، دیزاین سیستم خودش یک "محصول" است که به محصولات دیگر سرویس میده!
حالا این یعنی چی دقیقا؟ 🤔

دیزاین سیستم چیست؟
🎨 مجموعه‌ای یکپارچه از عناصر رابط کاربری (UI) قابل استفاده مجدد هست که تیم‌ها برای ساخت محصولاتشون از اون‌ها استفاده میکنن تا یک تجربه کاربری (UX) کاملا سازگار و استاندارد خلق کنن.

مثلا فرض کنین توی شرکتی کار میکنین که ۳ تا پروژه مختلف داره :
۱. سایت اصلی (Landing Page)
۲. پنل ادمین
۳. داشبورد مشتریان

❌ بدون دیزاین سیستم : شما باید کدِ یه دکمه یا فرم ساده رو حداقل ۳ بار توی این پروژه‌ها تکرار کنید! 🤦‍♂️
✅ با دیزاین سیستم : بدون هیچ تکرار کدی، همه‌چیز از یک منبع مشترک فراخوانی میشه

import { Button } from '@company/design-system'

در واقع این دیزاین سیستم به عنوان یه مرجع حقیقی (Single Source of Truth) برای پروژه‌های شرکت عمل می‌کنه 🎯

حالا جادوی اصلی کجاست؟ برای مثال، شرکت ری‌برند (Re-brand) میکنه و تصمیم میگیره رنگ اصلی برند و تمام پروژه‌هاش رو به «آبی» تغییر بده اگه دیزاین سیستم نداشته باشی، باید بری هزاران فایل رو تو پروژه‌های مختلف پیدا کنی و دستی تغییر بدی. اما با دیزاین سیستم، فقط کافیه رنگ رو توی همون کتابخونه‌ی مرجع عوض کنی؛ با همین یک تغییر، رنگ تمام پروژه‌های شرکت به صورت یکپارچه و خودکار آپدیت میشه ⚡️😎

☝🏻 قدم دوم
برای درک عمیق دیزاین سیستم، باید با معماری اتمیک (Atomic Design) آشنا بشین یکی از معروف‌ترین و استانداردترین روش‌ها تو دنیای فرانت‌اند بحساب میاد ⚛️
توی این متدولوژی، ما با رابط کاربری (UI) دقیقاً مثل علم شیمی برخورد میکنیم و اون رو به ۵ سطحِ مختلف تقسیم می‌کنیم:

۱. 🔴 اتم‌ها (Atoms) : کوچک‌ترین اجزای غیرقابل تجزیه! مثل یک دکمه (Button)، یک تگ اینپوت یا یک آیکون ساده.
۲. 🧬 مولکول‌ها (Molecules) : ترکیب چند اتم با هم. (مثلا: یک لیبل + یک اینپوت + یک دکمه = ساخت یک فرم جستجوی ساده).
3. 🦠 ارگانیسم‌ها (Organisms) : ترکیبِ مولکول‌ها و اتم‌ها که بخش‌های مستقل و پیچیده‌تری می‌سازن. (مثل هدر سایت، فوتر، یا یک کارتِ محصول کامل).
۴. 🧩 تمپلیت‌ها (Templates) : ساختار و لی‌آوت (Layout) کلی صفحه، اما به صورت خام و بدون دیتای واقعی.
۵. 🖼 صفحات (Pages) : مرحله‌ی نهایی! همون تمپلیت‌ها هستن که حالا با دیتای واقعیِ API پر شدن و کاربر اون‌ها رو می‌بینه.

میتونید اینکه چرا این دیزاین سیستم از علم شیمی ایده گرفته رو از وبلاگ Brad Frost سازنده این دیزاین سیستم بخونین : لینکش

✨ نتیجه‌ی این سبک کدنویسی :
وقتی با این ذهنیت کامپوننت‌هاتون رو می‌سازین، دیگه هیچ کُدِ کثیف و درهم‌تنیده‌ای ندارین. هر قطعه از سایت جای مشخصِ خودش رو داره و مدیریت پروژه‌های بزرگ به شدت راحت و لذت‌بخش میشه 👌😎

☝🏻 قدم سوم
کالبدشکافی غول‌های دیزاین سیستم در جهان 🌍
کدوم شرکت‌ها استانداردهای طراحی و توسعه رو در دنیا تعیین می‌کنن؟ بیاید ۴ تا از بزرگترین دیزاین سیستم‌های جهان رو زیر ذره‌بین ببریم 👇

🔹 1. Material Design (گوگل) :
معروف‌ترین سیستم بر پایه فیزیک دنیای واقعی. تمرکز اصلی متریال روی سایه‌ها (Shadows)، عمق و انیمیشن‌های واکنش‌گراست. خیلی ساختاریافته است، اما یه ایراد بزرگ داره: به شدت ظاهر پروژه‌تون رو "گوگلی" می‌کنه و کاستوم کردنش واقعا سخته

🔹 2. Human Interface Guidelines یا HIG (اپل) :
قانون اساسیِ اپل! تمرکز عجیب و غریب روی مینیمالیسم، بلار (Blur) کردن پس‌زمینه و تایپوگرافیِ بی‌نقص. شعار اپل اینه :
کاربر نباید گیج بشه، همه‌چیز باید در ساده‌ترین و زیباترین حالتِ ممکن باشه.

🔹 3. Fluent Design (مایکروسافت) :
سیستمی که ویندوز ۱۱ و محصولات جدید مایکروسافت بر پایه‌اش ساخته شدن.
تمرکز این سیستم روی نور، عمق و متریال جذابی به اسم Acrylic (شفافیت شیشه‌ای) هست.

🔹 4. Radix UI / Shadcn (محبوب‌ترین در اکوسیستم فرانت‌اند مدرن) :
برخلاف متریال و بقیه، اینا Headless هستن!
یعنی چی؟ یعنی فقط منطقِ کامپوننت (مثل باز و بسته شدن مودال یا استانداردهای دسترسی‌پذیری) رو به شما میدن، اما هیچ استایلِ از پیش تعیین شده‌ای ندارن! این یعنی شما نهایتِ کنترل رو دارین تا دیزاین سیستمِ اختصاصی و حرفه‌ای برند خودتون رو صفر تا صد با Tailwind CSS بسازین.
خود Shadcn به صورت دیفالت 5 تا رنگ اصلی داره که شما موقع نصب انتخاب میکنین اما بعد از نصب هم میتونین کامل رنگ اصلی و همچی رو تغییر بدین و این یعنی یه دیزاین سیستم به شدت قابل کاستوم که همچی رو خودت تعیین کنی

شما تو پروژه‌هاتون ترجیح میدین از سیستم‌های آماده (مثل Material/Ant Design) استفاده کنید، یا با ابزارهایی مثل Shadcn دیزاین سیستم اختصاصی بسازین؟
نامرده هرکی تو کامنت‌ها ننویسه 😁

☝🏻 قدم چهارم
دیزاین توکن‌ها (Design Tokens) - زبان مشترک طراح و برنامه‌نویس 🤝
تو دیزاین سیستم‌های حرفه‌ای، ما چیزی به اسم کد رنگِ هاردکد شده (مثلاً #bd9855) یا سایزهای ثابت (مثل 16px) تو کدهامون نداریم! به جاش از توکن استفاده می‌کنیم 🎨

توکن چیه؟ متغیرهای استاندارد شده‌ای هستن که مقادیر دیزاین رو تو خودشون نگه میدارن ، یعنی طراح تو فیگما به جای اینکه به شما بگه این دکمه طلاییه، یه متغیر تعریف می‌کنه
color-primary-brand = #bd9855
و شما هم تو کدتون (مثلا تو tailwind.config) دقیقا همون نام رو می‌خونین و به کامپوننت‌هاتون میدین

چرا اینقدر حیاتیه؟ فرض کنین فردا برندینگِ شرکت کلا عوض شد. اگه توکن نداشته باشین باید تو ۱۰۰۰ تا فایل بگردین و رنگ‌ها رو عوض کنین.
اما با توکن، شما حتی یک خط از کدهای کامپوننت‌هاتون رو دست نمیزنین!
فقط مقدارِ همون یک توکن آپدیت میشه و کل سیستم به صورت یکپارچه تغییر رنگ میده. این یعنی مهندسیِ نرم‌افزار ⚡️

☝🏻 قدم پنجم
استوری‌بوک (Storybook) - ویترینِ دیزاین سیستم شما 📘
حالا که اتم‌ها و مولکول‌ها رو با توکن‌ها ساختیم، این کامپوننت‌ها کجا باید نگهداری بشن؟ از کجا بدونیم چه دکمه‌ها و فرم‌هایی قبلاً ساخته شده که دوباره کدشون رو ننویسیم؟
جواب ابزاری به اسم Storybook هست! 🛠 استوری‌بوک یه محیط کاملاً ایزوله و مستقل (بیرون از پروژه اصلی) براتون می‌سازه که مثل یه کاتالوگ عمل می‌کنه.

✨ جادوی استوری‌بوک چیه؟ شما تمام کامپوننت‌هاتون رو اونجا لیست می‌کنین، کارفرما یا بقیه اعضای تیم می‌تونن برن اونجا، با فرم‌ها تعامل داشته باشن و استیت‌های مختلف رو تست کنن. مثلاً می‌تونن حالت بارگذاری (Loading State) بصریِ دکمه‌ها رو در لحظه کلیک ببینن (که همون‌طور که می‌دونید برای UX خیلی اصولی‌تر از یه تاخیرِ ساده یا Debounce تو عملکرده) و دقیقا درک کنن سیستم چطور به کاربر فیدبک میده ⏳

اگه می‌خواید به عنوان یک فرانت‌اند دولوپرِ ارشد (Senior) رزومه بدید، توانایی داکیومنت کردن دیزاین سیستم با Storybook یکی از مهم‌ترین برگ برنده‌های شماست 💥

چندتا مقاله برای بهتر مفهوم و ساختار دیزاین سیستم ها همراه با مثال 🚀
https://www.smashingmagazine.com/2025/11/design-system-culture/
https://www.smashingmagazine.com/2022/02/recipe-good-design-system/
https://ux-ui-design.de/was-ist-atomic-design/
https://ux-ui-design.de/design-token/

🌙 شب بخیر رفقا
امروز حسابی درگیرِ دنیایِ مهندسیِ سیستم‌ها بودیم و یاد گرفتیم چطور پروژه‌هامون رو از یه حالتِ معمولی به یه سیستمِ حرفه‌ای و مقیاس‌پذیر تبدیل کنیم
امشب خوب استراحت کنید تا ذهنتون برای فردا تازه بمونه. فردا دوباره با کلی مبحثِ فنی و جذاب برمیگردیم

شبتون آروم و پر از آرامش ✌️🌌

سلام رفقا، صبح همگی بخیر ☕️☀️
امیدوارم هفته رو پرانرژی شروع کرده باشید. بریم که یه روز عالی رو کنار هم بسازیم.

معرفی کتابخونه 📕⚒️

امروز می‌خوام یکی از اون کتابخانه‌هایی رو معرفی کنم که اگه تو پروژه‌تون نباشه، عملا دارین چرخ رو از اول اختراع می‌کنین 🔄 : TanStack Query 📦
یا همون React Query سابق 🔄

خیلی‌ها هنوز برای گرفتنِ دیتا (Data Fetching) از useEffect استفاده می‌کنن و درگیرِ مدیریتِ Loading، Error و Caching میشن 😫. اما TanStack Query این پیچیدگی‌ها رو کامل حذف میکنه 🚀.
✅ کش کردن خودکارِ داده‌ها.
✅ مدیریت هوشمندِ Stateهای درخواست (Loading, Error, Success).
✅ همگام‌سازیِ داده‌های سرور با کلاینت.

این کتابخونه رسما استانداردی برای اپلیکیشن‌های مدرنِ React/Next.js هست 🏗
⚠️ این کتابخونه فقط مختص به نکست یا ری‌اکت نیست و برای کتابخونه یا فریمورک‌های
Preact
Vue
Angular
Solid
Svelte
Lit
هم قابل استفاده هست.

کسی هست که هنوز از useEffect برای فچ کردنِ دیتا استفاده کنه 🧐؟


#Labs_library

🌟 معرفی کتابخونه 📕⚒️

بیاین یه سناریوی خیلی آشنا رو بررسی کنیم. طراح یه دیزاین خفن بهمون میده که توش کاربر با هر بار اسکرول کردن، کل صفحه به صورت نرم و انیمیشنی میره روی بخش بعدی (دقیقا مثل سایت‌های معرفی محصول اپل).
اولش با خودمون میگیم خب یه اسکرول ساده است دیگه اما وقتی شروع می‌کنیم به کد زدن، تازه دردسرها شروع میشه : هماهنگ کردن اسکرول موس، هندل کردن لمس (Touch) روی صفحه موبایل، باگ‌های مرورگرها و کلی کثیف‌کاری با جاوااسکریپت 🤦‍♂️

راه‌حل چیه؟
کتابخونه fullPage.js
این کتابخونه سال‌هاست که بهترین ابزار برای ساختن وب‌سایت‌های اسکرولیِ تمام‌صفحه (Full-screen scrolling) به حساب میاد و خوشبختانه پکیج رسمی و بسیار پایداری برای React و Next.js داره (@fullpage/react-fullpage).

چرا اینقدر محبوبه و کار رو راحت می‌کنه؟
📱 سازگاری بی‌نقص با موبایل : خیالتون بابت رفتار Swipe (کشیدن صفحه) روی گوشی‌ها کاملاً راحته.
🔗 آپدیت خودکار URL: با رفتن به هر اسلاید، آدرس سایت هم عوض میشه تا کاربر بتونه لینکِ همون بخش رو برای بقیه بفرسته (که برای سئو هم عالیه).
⚛️ بدون نیاز به کدهای اضافه : نیازی به درگیر شدن با رویدادهای پیچیده DOM یا CSSهای عجیب و غریب ندارید.

اگه تا الان برای این مدل دیزاین‌ها خودتون رو با کدهای دستی خسته می‌کردین، تو پروژه بعدی حتما این کتابخونه رو تست کنین
💣 من به شخصه با تستش کردم و میتونم بگم واقعا خروجی خفن و بدون نقصی بهتون میده

تست کردنش 2 دقیقه زمان میره اما وقتی آشنا میشی باهاش دیوانت میکنه و کلی ایده خفن به ذهنتون برمیخوره 💥

#Labs_library

پیش اومده تو کدهای پروژه گیر کنین یا یه کار خیلی ازتون وقت بگیره ولی بعد با نصب یه کتابخونه (پکیج) خاص، ببینید چقدر کارتون راحت شده؟

توی پروژه‌هاتون چه مشکلی داشتین و با چه کتابخونه‌ای حلش کردین ؟ 🤔

اسم اون ابزار و کاری که براتون کرده رو تو کامنتا بنویسین تا همهمون چند تا پکیج جدید و به درد بخور یاد بگیرین
عشقید ❤️

معرفی کتابخونه 📕⚒️✨

تاحالا شده یه کامپوننت بسازین و بعدش مجبور بشین کلی وقت بذارید تا برای حالت لودینگش یه اسکلتون (Skeleton) دقیقا شبیه به خودش طراحی کنین ( قطعا شده )؟😫
سر و کله زدن با کلاس‌های Tailwind و نوشتن تگ‌های اضافه برای ساخت لودینگ‌ها گاهی واقعاً خسته‌کننده میشه.🛠

امروز می‌خوام یه ابزار خیلی باحال به اسم Boneyard رو بهتون معرفی کنم.🚀
کار این ابزار چیه؟ خیلی ساده میاد از روی کامپوننت‌های ریکت و نکستِ شما، به صورت خودکار Skeleton می‌سازه ( مجیک )🪄✨

✅ چرا خیلی به درد می‌خوره؟
دیگه نیازی نیست برای هر بخش از سایت، کدهای اسکلتون رو دستی بنویسین🚫✍️
فرم و ساختارِ اسکلتون دقیقا شبیه کامپوننت اصلیتون درمیاد🔍
سرعت توسعه‌تون رو بالا میبره و کدهاتون رو خیلی تمیزتر نگه می‌داره.🧹🚀
به جای درگیری با کدهای اضافه، این ابزار بهتون کمک می‌کنه تا ساختار لودینگِ پروژه‌ها رو تو سریع‌ترین زمان پیاده کنین.⚡️
پیشنهاد می‌کنم حتما یه نگاه به فیچرهاش بندازین 👀📖


#Labs_library

دوست دارید فردا بیشتر روی چه موضوعی تمرکز کنیم و در موردش بحث کنیم؟
معرفی کتابخونه‌ها و ابزارهای کاربردی (مثل امروز)
بررسی یه چالش فنی و کدنویسی (تو ریکت و نکست‌جی‌اس)
برگشتن به مباحث معماری و دیزاین سیستم
یا اصلا یه گپ و بحث آزاد در مورد مسیر و دغدغه‌های برنامه‌نویسی؟

ریش و قیچی رو برای فردا دادم دست خودتون ببینم چی دوست دارین
مشارکت توی این بحث باعث خوشحالی من میشه ❤️

صبحتون یه زیبایی مهندسی نرم افزار 😁

امروز بیاین یه نگاه به یکی از پایه‌ای‌ترین و مهم‌ترین مباحث جاوااسکریپت بندازیم که اگه دقیق درکش نکنیم، کدهامون پر از باگ‌های عجیب و غریب میشه :
تفاوت Primitiveها و Objectها

تو جاوااسکریپت، متغیرها موقع کپی شدن به دو شکل کاملا متفاوت رفتار میکنن

⭕️ داده‌های اولیه (Primitives)
شامل مواردی مثل Number، String، Boolean، Null و Undefined هستن. اینا خیلی ساد‌ن وقتی یه متغیر رو برابر با یه متغیر دیگه قرار میدین خودِ مقدار کپی میشه و دو تا متغیر کاملا از هم مستقل میشن.

let a = 10;
let b = a;
b = 20; 

console.log(a); // خروجی همون 10 هست و تغییری نکرده

🔴 آبجکت‌ها و آرایه‌ها (Objects & Arrays)
اینجا داستان فرق داره. این داده‌ها بر اساس آدرس حافظه (Reference) کار میکنن. وقتی یه آبجکت رو کپی می‌کنین، در واقع شما خودِ مقادیر رو کپی نمیکنن بلکه فقط دارین میگین که آدرس شی دومی هم همون آدرس شی اولی توی حافظه هست و این یعنی هر دو متغیر دارن به یک جا اشاره میکنن

let user1 = { name: "Ali" };
let user2 = user1; // آدرس حافظه کپی میشه، نه خود آبجکت!
user2.name = "Reza"; 

console.log(user1.name); // خروجی میشه "Reza"! یوزر اول هم تغییر کرد

⚠️ چرا این موضوع اینقدر مهمه؟ دلیل اصلی خیلی از باگ‌هایی که توی ریکت و نکست‌جی‌اس موقع آپدیت کردن استیت‌ها (State) باهاش مواجه میشیم، همین رفتار آبجکت‌هاست. برای همین همیشه تاکید میشه که استیت‌ها رو مستقیم دستکاری نکنید و از روش‌هایی مثل اسپرد اپراتور (...) برای کپی کردن استفاده کنین.

#Labs_js

👀 تفاوت == و ===
وقتی دو تا مقدار رو با هم مقایسه میکنیم، جاوااسکریپت دو تا رفتار کاملا متفاوت از خودش نشون میده :
🔹 علامت == (مقایسه کشکی) : این علامت اصلا به نوعِ داده‌ها کاری نداره. مثلا اگه عدد 1 رو با متنِ "1" مقایسه کنین، میگه با هم برابرن (true)! چون خودش پشت صحنه میاد متن رو به عدد تبدیل میکنه تا شبیه هم بشن.
🔹 علامت === (مقایسه سخت‌گیر) : این یکی خیلی دقیقه. هم خود مقدار رو چک میکنه و هم نوعش رو. از نظر این علامت، عدد 1 با متنِ "1" اصلا برابر نیست (false)، چون یکی عدده و اون یکی رشته.
قانون طلایی : برای اینکه کدهاتون رفتار عجیب غریب از خودشون نشون ندن و اسیر باگ‌های بیخودی نشین، همیشه از === استفاده کنین.
تنها استثنای قضیه معمولا وقتاییه که می‌خوایم خالی بودنِ (null یا undefined) یه متغیر رو چک کنیم.

#Labs_js

⁉️حالا این مقایسه چطوری توسط موتور js انجام میشه و چه مراحلی رو طی میکنه ؟

توی پست قبلی گفتیم که علامت == پشت صحنه میاد نوع داده‌ها رو تغییر میده تا بتونه مقایسه‌شون کنه؛ مثلاً متن "1" رو تبدیل به عدد 1 می‌کنه.
اما تا حالا به این فکر کردید که چرا برعکسش اتفاق نمی‌فته؟ یعنی چرا جاوااسکریپت عدد رو به متن تبدیل نمی‌کنه؟ 🤔

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

مثلا فرض کنین می‌خوایم عدد 100 رو با متنِ "1e2" (که فرمت ریاضیِ همون عدد ۱۰۰ هست) مقایسه کنیم :
اگه عدد به متن تبدیل می‌شد، عدد ۱۰۰ تبدیل می‌شد به متنِ "100" و مقایسه‌ش با "1e2" غلط در میومد!!!
اما وقتی متن به عدد تبدیل میشه، جاوااسکریپت می‌فهمه هر دو طرف واقعا ۱۰۰ هستن و جواب درست رو بهمون میده.

⚙️ جاوااسکریپت چطوری اینو تصمیم می‌گیره؟
پشت صحنه یک دستورالعمل خیلی مشخص وجود داره که قدم به قدم اینطوری عمل میکنه :
۱. هم‌نوع بودن : اگه هر دو طرف از یه جنس باشن (مثلا هر دو عدد)، اصلا دست بهشون نمیزنه و مستقیم مقایسه میکنه.
۲. دوقلوها : اگه یه طرف null و طرف دیگه undefined باشه، بدون هیچ تبدیلی میگه با هم برابرن (true).
۳. رشته و بولین : اگه پای رشته یا بولین (true و false) وسط باشه، اون‌ها رو تبدیل به عدد میکنه و بعد مقایسه رو انجام میده.

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

#Labs_js

معماری Event Loop در جاوااسکریپت : مدیریت هم‌روندی پشت صحنه
جاوااسکریپت Single-threaded (تک‌نخی) هست یعنی فقط یک Call Stack داره و در هر لحظه میتونه دقیقا یک خط کد رو پردازش کنه. اما چطور بدون قفل شدن رابط کاربری، هم‌زمان ریکوئست‌های شبکه رو ارسال میکنیم، تایمر میزاریم و انیمیشن‌ها رو اجرا می‌کنیم؟ این جادوی هم‌روندی، وظیفه فرآیندی به اسم Event Loop عه

برای درک مهندسی این سیستم، باید محیط اجرای جاوااسکریپت (Runtime) رو به ۴ قطعه‌ی اصلی تقسیم کنیم :

⚙️ اجزای اصلی معماری سیستم
Call Stack :
پردازنده اصلی کدهای همگام (Sync) که خط به خط و به ترتیب لایفو (LIFO) اجرا میشن
Web APIs :
این بخش جزو موتور جاوااسکریپت نیست، بلکه مرورگر یا Node.js این نخ‌های جداگانه را در پس‌زمینه فراهم میکنه تا کارهایی مثل تایمرها یا ریکوئست‌های شبکه رو اونجا پردازش کنه.
Microtask Queue (صف VIP) :
صفِ نگهداری کالبک‌های با اولویت بالا مثل Promise.then و async/await.
Task Queue (صف عادی) یا Macrotasks ها هم بهش میگن :
صفِ نگهداری کالبک‌های معمولی مثل setTimeout و رویدادهای کلیک

🔄 الگوریتم Event Loop چطور کار میکنه ؟
حلقه رویداد یک مکانیزم مداوم هست که پشت صحنه این مراحل رو طی میکنه :
بررسی استک : اول چک میکنه که آیا کدهای همگام (Call Stack) کاملا خالی شده‌اند یا نه. تا استک خالی نشه، کار جدیدی رو شروع نمیکنه
تخلیه صف VIP : به محض خالی شدن استک، سراغ Microtask Queue میره و تمام کالبک‌های داخل اون رو یکی‌یکی اجرا میکنه تا این صف کاملا صفر بشه
اجرای صف عادی : در نهایت سراغ Task Queue میره و فقط یک کالبک را برمیداره، به استک می‌فرستد تا اجرا بشه و دوباره به مرحله اول برمیگرده

یک تست مهندسی معروف
به ترتیب خروجی این کد دقت کنین

console.log('1');

setTimeout(() => {
    console.log('2');
}, 0);

Promise.resolve().then(() => {
    console.log('3');
});

console.log('4');

با اینکه تایمر روی صفر میلی‌ثانیه تنظیم شده اما خروجی به این ترتیبه :
1 => 4 => 3 => 2

علتش چیه ؟
اعداد 1 و 4 کدهای همگام هستن و مستقیم توی استک اجرا میشن
کالبکِ setTimeout به صف عادی (Task Queue) میره
کالبکِ Promise به صف VIP (Microtask Queue) میره
بعد از اتمام کدهای همگام، Event Loop اول صف VIP را خالی می‌کند (چاپ عدد 3) و در آخر سراغ صف عادی (چاپ عدد 2) میره

اینم نحوه Event Loop توی موتور js که خیلی مبحث مهمی برای درک ترتیب اجرای کدهاتون هست و توی سوالات مصاحبه ای پرسیده میشه 😉

#Labs_js

مقاله های تکمیلی برای مباحث امروز

Link-1
Link-2
Link-3

از قوی ترین مدل حال حاضر که رقابت با کلاد داره برید استفاده کنین
روزانه 5 میلیون توکن رایگان هم بهتون میده
https://chat.z.ai/