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

امروز بیاین یه نگاه به یکی از پایه‌ای‌ترین و مهم‌ترین مباحث جاوااسکریپت بندازیم که اگه دقیق درکش نکنیم، کدهامون پر از باگ‌های عجیب و غریب میشه :
تفاوت 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/

نتیجه تستش رو میزارم حتما

فرق وایب کدینگ و پروژه ای که برنامه نویس معماری رو مدیریت کنه توی تصویر آشکاره

با استفاده از این ادیتور هوش مصنوعی که بهتون دسترسی به glm-5.2 و نسخه توربو میده دارم یه نیاز رو تبدیل به محصول میکنم
امیدوارم توی ماه آینده یا شایدم زودتر یه نسخه اولیه ازش بتونم بدم بیرون

شما ازش برای چه کاری استفاده کردین ؟ یا اصلا نگاهشم نکردین ؟

تصمیم گرفتم کتاب‌های مربوط به برنامه نویسی رو شروع کنم و از کتاب React_Modern_Patterns_for_Developing_React_Apps شروع کردم

براتون روزانه آپدیت و مطالبی که یاد گرفتم رو در قالب پست های بهم پیوسته میزارم ❤️

📕کتاب React Modern Patterns for Developing React Apps

〽️ ری‌اکت چطوری ساخته و وارد بازار برنامه نویسی شد؟
ری‌اکت توسط یه مهندس نرم افزار به اسم Jordan Walk که توی Facebook کار میکرد برپا شد و در سال 2011 در بخش خبری فیسبوک و بعد از اینکه توسط فیسبوک خریداری شد در سال 2012 در اینستاگرام هم گنجانده شد این برنامه.

توی سال 2013 ری‌اکت توسط جامعه JSConf به صورت اپن سورس ارائه شد و به دسته بندی هزاران کتابخونه دیگه مثل Angular, Dojo و ... پیوست.
ری‌اکت خودش رو به عنوان کلمه V در عبارت MVP که بیانگر View هست توصیف کرد که یعنی با استفاده از کامپوننت‌های ساخته شده توسط اون به عنوان رابط کاربری javascript شما دیده میشن.

از همونجا بود که استفاده ازش بین کامیونیتی شروع کرد به پخش شدن. تو ژانویه 2015 نتفلیکس اعلام کرد که داره از React برای ساختن UI خودش استفاده میکنه. اواخر همون ماه هم React Native منتشر شد که یه کتابخونه برای ساخت اپلیکیشن‌های موبایل با همون React بود. فیسبوک هم ReactVR رو منتشر کرد، یه ابزار دیگه که React رو به هدف‌های رندرینگ گسترده‌تری میبرد. تو سال‌های 2015 و 2016 هم یه تعداد خیلی زیاد از ابزارهای معروف مثل React Router، Redux و MobX اومدن روی کار تا کارهایی مثل Routing و State Management رو هندل کنن. آخرش هم React به عنوان یه کتابخونه شناخته میشد: یعنی فقط حواسش به پیاده‌سازی یه سری ویژگی‌های خاص بود، نه اینکه بخواد برای هر کیس و استفاده‌ای یه ابزار ارائه بده.

یه اتفاق خیلی بزرگ دیگه تو این تایم‌لاین، انتشار React Fiber تو سال 2017 بود. فایبر یه بازنویسی از الگوریتم رندرینگ React بود که تو اجراش یه جورایی جادویی بود. این یه بازنویسی کامل از بخش‌های داخلی React بود که تقریباً هیچ تغییری تو API عمومیش ایجاد نکرد. در واقع یه راهی بود برای اینکه React رو مدرن‌تر و سریع‌تر کنه بدون اینکه روی کاربران و برنامه‌نویسا تاثیری بذاره.

#RMP_ep1

یکم ناخوش احوالم نتونستم کتاب بخونم و براتون مطالبش رو بزارم
فردا جبرانش انشالا ❤️

🎫 ایونت معرفی ۴ ماه کارورزی فشرده توی آوینوکس
که دیروز برگزار شد و به نسبت ایونت جالب و مفیدی بود

اصل موضوع یک دوره ۴ ماهه کارورزی توی کارخونه نوآوری آوینوکس بود که تحت نظر شرکت مادر یعنی آواپرداز قرار داشت

و به ۶ تا آزمایشگاه مختلف و تخصصی تقسیم میشد این دوره و طی نظر منتور های متخصص شما مباحث تئوری رو یاد میگرفتین و بعد توی آزمایشگاه به صورت تیمی و عملی روی پروژه‌های شبیه سازی شده واقعی کار میکردین

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


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

🚀 TypeScript 7
منتشر شد؛ بزرگ‌ترین تغییر تاریخ TypeScript!

مایکروسافت در TypeScript 7، کامپایلر و Language Server را از پایه‌ی قبلی به Go پورت کرده تا به‌صورت Native اجرا شوند. نتیجه؟ عملکردی که در بسیاری از پروژه‌ها تا ۱۰ برابر سریع‌تر از TypeScript 6 است.

✨ مهم‌ترین تغییرات:

- ⚡ کامپایلر Native مبتنی بر Go
- 🚀 تا ۱۰ برابر افزایش سرعت Type Checking و Build
- 🧠 IntelliSense و Autocomplete سریع‌تر در VS Code
- 💾 مصرف حافظه کمتر در پروژه‌های بزرگ
- 🔄 استفاده از Parallelism برای پردازش هم‌زمان و عملکرد بهتر

نکته جالب اینجاست که تیم TypeScript این پروژه را بازنویسی کامل نکرده؛ بلکه منطق کامپایلر فعلی را به Go پورت کرده تا سازگاری حفظ شود و در عین حال از سرعت اجرای Native بهره ببرد.

اگر روی پروژه‌های بزرگ React، Next.js یا Node.js کار می‌کنید، این نسخه می‌تواند زمان Build و Type Checking را به شکل محسوسی کاهش دهد.

💬 شما بعد از انتشار TypeScript 7 مهاجرت می‌کنید یا فعلاً روی نسخه‌های قبلی میمونین؟