اندر احوالات جاوااسکریپت (قسمت اول)

سلام

به سری مقاله های اندر احوالات جاوااسکریپت خوش اومدی😍

قراره توی این مجموعه مقاله ببینیم یا بهتر بگم ، بفهمیم پس قضیه جاوااسکریپت چه خبره و چطور داره کار میکنه ، اصلا چطور کد های مارو داره تفسیر میکنه

حالا فایده این دونستن چیه ؟ 🤔

باعث میشه بهتر جاوااسکریپت رو درک کنید ، باهاش کد بزنید ، کمتر به باگ بخورید و ممکنه توی مصاحبه ها هم ازتون سوال بشه🤦‍♂️

قبل اینکه شروع کنم چند نکته بگم :

· واژه های فنی رو هم فارسی و هم انگلیسی می نویسم که درکش راحت تر باشه و به گوشتون هم خرده باشه

· خیلی از جاها هست که به یه مطلبی میرسیم که بعدن خودش یه سر فصله ، اینطور جاها خودم میگم که بعدن جامع تر بهش پرداخته میشه. نمیدونم این سری که میخوام شروع کنم چندتا مقاله میشه5 تا یا 10 تا یا 30 تا معلوم نیست و تا جایی که میتونم مطالب رو عامیانه به زبان ساده توضیح میدم

· وقتی متن رو میخونید یه چشتون هم به تصاویر باشه خیلی بهتر درکش میکنید (تصاویر رو از روی اینترنت و دوره های توی یودمی (کورس جوناس) برداشتم )

خب دیگه حرف بسه 🥱 بریم سر اصل مطلب

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

هر کجا که جاوااسکریپت باشه حتما حتما باید یه موتور (Engine) هم باشه مثلا توی مرورگر گوگل کروم اسم این انجین V8 (وی هشت) هستش و توی سایر مرورگر ها این موتور اسم های متفاوتی داره

حالا این Engine وظیفه اش چیه ؟؟؟ وظیفه اش اینه که کد های جاوااسکریپت رو اجرا کنه دیگه😒

این Engine ما دوتا قطعه داره به اسم call stack و Heap (واقعا نمیدونم توی فارسی اینارو چی ترجمه کنم)

هیپ (Heap) جایی که داده های غیرساختاری (unstructured) مثل object ها توش ذخیره میشن . heap رو مثل یه استخر در نظر بگیرید که object ها بدون هیچ نظم و ترتیبی(unordered) در کنار هم شاد و خرم زندگی میکنن

کال استک (call stack) همون جایی که کد های جاوااسکریپت توش به وسیله چیزی به اسم Execution Context (زمینه اجرایی) اجرا میشن

این call stack ما همون طور که از اسمش پیداست مثل یه پشته (stack) اس اگه رشتتون کامپیوتر بوده میدونید که پشته ها چی هستن و سازوکارشون چیه اگر هم نمیدونید چیه خیلی خلاصه میگم که پشته رو مثل یک کارتن در نظر بگیرید و Execution Context رو مثل کتاب ببینید که قراره به ترتیب توی کارتن قرار بدین ولی دیگه عین heap پخش و پلا نیستن و اگه بخواید به اون کتابی که ته ته ته کارتن هست برسید باید کتاب های رو تر رو در بیارین

☝️نکته : اینکه دقیقا این دوتا چی هستن ، کلا مقاله ای جدا میشه راجبشون نوشت اگه بیشتر دوست دارید در رابطه اشون بخونید سرچشون کنید البته بعدا توی بحث Reference type و Value type ها که جلوتر بهشون برسیم بهتر متوجه اشون میشیم (برنامه ها دارم براتون 😉)

خب ما گفتیم که هرجا جاوااسکریپت باشه باید Engine اش هم باشه اما آیا همین کفایت میکنه؟؟؟

معلومه که نه ، اجازه بدین مثال بزنم (نیم نگاهی به تصویر بالا هم داشته باشید)

وقتی توی یک محیط اجرایی (Runtime) مثلا مروگر هستیم انجین ما از طریق web api دسترسی داره به DOM یا fetch یا timer یا ....

یا مثلا توی محیط اجرایی Node.js ما دیگه web api نداریم و به جاش موتور جاوااسکریپت با سیستم عامل حرف میزنه

اینجاست که میگن javascript is every where 😎

نکته : runtime رو مثل یه ظرف ببینید که انجین جاوااسکریپت و web api و callback queue اینا همه توشن و قلب تپنده این ظرف خود انجین جاوااسکریپت هست

☝️نتیجه گیری اخلاقی : همون طور که توی عکس می بینید DOM هیچ ربطی به جاوااسکریپت نداره و جزئی از جاوااسکریپت نیست بلکه با جاوااسکریپت به اون دسترسی داریم و تغییرات روش اعمال میکنیم اینو یادتون باشه
DOM !== javascript

حالا این ارتباط از چه طریقی هست ؟؟ از طریق ساختمان داده ای به اسم Callback Queue (یک صفی از کالبک ها)

این Callback Queue شامل همه call back function هایی (مثل همون timer) هست که آماده اجرا هستن

اینطوری نمیشه بزارین با مثال بریم جلو

کد زیر رو ببینید :

button.addEventListener( “click” , function )

وقتی ما متد addEventListener رو روی یک دکمه که توی DOM هست (نه جاوااسکریپت) رو فراخوانی میکنیم و توی مرورگر روی اون دکمه کلیک میکنیم ، event عه click از clallback queue به call stack فرستاده میشه تا کد هاش اجرا بشه که کار این فرستادن رو چیزی به اسم event loop انجام میده

در واقع کار event loop اینه رویداد (Event)هایی مثل click رو از callback queue میگیره و به call stack میفرسته تا بره برای اجرا شدن توسط موتور جاوا اسکریپت

بازم به زبون عامیانه و ساده تر event loop میاد مرتب چک میکنه که callback queue چیزی برای فرستادن داره تا بده به call stack اجرا بکنه یا نه

☝️نکته : دقت کنید که توی callback queue ترتیب مهمه و اون Event ایی که زودتر اومده زودتر خارج میشه در واقع ساختار داده (FIFO) رو ما اینجا داریم
اگه یادتون باشه اون call stack برعکس این بود یعنی آخرین ورودی ، اولین خروجی ماست (LIFO)
اینجاست که میگم برادر جان ساختمان داده یاد بگیر ضرر نخواهی کرد

مباحث event loop و non-blocking و کلا async رو بعدن دقیق تر بهش میپردازیم فعلا به همین بسنده کنید

توی قسمت بعدی میریم که توی انجین جاوااسکریپت دیپ تر میشیم و دل و رودشو میریزیم بیرون🔪

هرکجای این مقاله اگه دیدین اشتباه میکنم یا منظورم رو بد رسوندم توی نظرات بگین تا اصلاحش کنم بالاخره مام جایز الخطا هستیم