https://virgool.io/feed/@hamid1998 Developer | GNU/LINUX User fa 2026-06-07 10:37:48 https://files.virgool.io/upload/users/257871/avatar/M4SFiI.png?height=120&width=120 https://virgool.io/@hamid1998 https://virgool.io/@hamid1998/javascript-visualized-hoisting-d789mfcelkmn مفهوم Hoisting ...Hoisting یکی از اصطلاحاتی هست که هر توسعه دهنده جاوااسکریپتی وقتی به اروری میخوره و اون رو گوگل میکنه و به آخر استک اور فلو میرسه یک نفره به اون گفته که این ارور به خاطر Hoisting اتفاق افتاده!? پس بریم سراغ اینکه Hoisting چیه ؟اگر شما تازه وارد جاوااسکریپت شدید ( مثل من :دی ) ممکن هست رفتارهای عجیب‌و‌غریبی رو تجربه کرده باشید که بعضی متغیر ها به طور تصادفی undefined برگشت داده میشوند یا خطای ReferenceError و چیزهای دیگه. Hoisting اغلب با قرار گرفتن متغیر ها و توابع بالای فایل تعریف میشوند اما نه! این چیزی نیست که اتفاق میفته، اگرچه ممکنه رفتارش همینطوری به نظر برسه.. ?وقتی که موتور جاوااسکریپت، اسکریپت مارو میگیره، اولین کارش تنظیم کردن حافظه، برای دیتا توی کد ما هست. تو این مرحله هیچ کدی اجرا نمیشه، فقط همه چیز برای اجرا آماده میشه. نحوه تعریف تابع و ‌‌ذخیره شدن متغیرها متفاوت هست. توابع با یک رفرنس به کل تابع ذخیره میشوند.(برای درک بهتر گیف زیر رو ببینید)در متغیرها، تعریف کردن کمی متفاوت هست. ES6 دو تا کلمه کلیدی برای تعریف کردن متغیرها: let و const معرفی کرده. متغیرهای تعریف شده با let و const بدون مقداردهی ابتدایی(uninitialized) ذخیره میشوند .متغیرهای تعریف شده با کلمه var به صورت پیشفرض تعریف نشده(undefined) ذخیره میشوند.حالا که مرحله تولید و ذخیره متغیر ها و تابع ها انجام شد، ما میتوانیم کد رو اجرا کنیم.بریم ببینیم قبل تعریف (declare) تابع یا هر متغیر دیگری وقتی سه تا console.log بالای کد هامون داریم چی میشه.چون که توابع با یک رفرنس به کل تابع ذخیره میشوند ما میتوانیم قبل اینکه اون تابع رو درست کنیم آن را فراخوانی کنیم.وقتی که ما اشاره میکنیم به متغیری که با کلمه کلیدی var آن را تعریف کردیم به صورت خیلی ساده مقدار پیشفرض خودش رو کهundefinedهست رو برمیگردونه! به هرحال ممکن هست گاهی منجر به رفتار غیر منتظره "unexpected" بشه. احتمالا مواقعی که نمیخواید مقدار undefiend داشته باشید!مثل وقتی که ما یک متغیری را که تعریف شده اما مقدار دهی نشده رو میخواهیم برگردانیم و با خطایی undefined برخورد میکنیم موقع فراخوانی متغیر های(uninitialized) هم با خطای ReferenceError مواجه میشویم. وقتی انجین خط هایی که ما متغیر تعریف کردیم رو اجرا میکنه، متغیر هایی که در رم وجود دارند با متغیر های جدیدی که تعریف کردیم overwrite می شوند.تمام ! یه جمع بندی سریع ? : توابع و متغیر ها قبل از اینکه ما آنها رو اجرا کنیم در معموری ذخیره میشوند. به این عمل Hoisting می گویند. توابع با رفرنسی که به خود تابع اشاره میکند ذخیره میشوند، متغیر ها با کلمه کلیدی var و مقدار undefined، و متغیر هایی که با کلمات کلیدی let و const تعریف میشوند مقدار uninitialized دارند.کمی این مفهوم مبهم هست اما یاد گرفتیم وقتی کد ما اجرا میشود چه اتفاقی می افتد نگران نباشید اگر هنوز براتون مبهم هست با تمرین بیشتر بهتر متوجه این مفهوم خواهید شد.این مقاله ترجمه شد از مقاله های Lydia hallie هست.امیدوارم تونسته باشم تو درک این موضوع کمکی به دوستداران جاوااسکریپت کرده باشم. Hamidreza Hamidreza Wed, 02 Jun 2021 20:34:37 +0430 https://virgool.io/coderlife/javascript-visualized-event-loop-qygbho11hl2w ایونت لوپ ...یکی از مهم ترین چیزهای که هر توسعه دهنده جاوااسکپریت باید باهاش کنار بیاد، اما اولش ممکنه فهمیدن این موضوع کمی گیج کننده باشه.اما اول از همه بریم سراغ اینکه event loop چیه و برای چی باید بهش اهمیت بدیم ؟جاواسکریپت یک زبان single-threaded هست یعنی اینکه در هر لحظه فقط یک تسک میتونه اجرا بشه. معمولا مسئله بزرگی نیست، اما تصور کنید یه تسک شما 30 ثانیه طول بکشه تا اجرا بشه ..اونوقت شما باید 30 ثانیه صبر کنید تا اتفاق دیگه ای رخ بده..( جاوااسکریپت به طور پیشفرض روی مرورگر اجرا میشه و تو اون لحظه رابط کاربری یا UI گیر کرده و شما کاری نمیتونید کنید )‌ حتی گاهی از طرف مرورگر پیغام میاد که این صفحه kill یا forceStop شه، بگذریم سال 2020 هستیم و کسی حوصله این همه کند بودن نداره !خوشبختانه، مرورگر به ما امکان دسترسی به توابع و ویژگی‌های مختلفی، مانند DOM API ،setTimeout و ... را می‌دهد که این توابع و ویژگی‌ها در قالب Web API ( خود موتور جاوااسکریپت این امکانات رو فراهم نمیکنه)، توسط مرورگر‌ها ارائه می‌شوند. توابعی مانند setTimeout امکان برنامه‌نویسی Async و non-Blocking را در جاوا اسکریپت برای ما فراهم می‌کند که در ادامه به بررسی آن می‌پردازیم.خب قبل اینکه شروع کنم برای دوستانی که دو تا مفهوم Stack و Queue رو تو ساختمان داده آشنایی ندارن یه عکس این پایین آپلود میکنم تا یکم در جریان کار این دو قرار بگیرن در ادامه بحث اصلی بهتر آشنا میشن.خب بریم سر اصل مطلب:وقتی ما یک تابع رو فراخوانی میکنیم به یک چیزی اضافه میشه که ما بهش میگیم CallStack. CallStack یکی از بخش های انجین جاوااسکریپت هست و فقط مخصوص مرورگر نیست.کال استک یک پشته هست به این معنی که اولین چیزی واردش میشه آخرین چیزی هست که خارج میشه (First In, Last Out).وقتی یک تابع مقداری رو برمیگردونه بعدش از پشته بیرون میاد.تابع respond به ما تابع setTimeout رو برمیگردونه. setTimeout توسط Web API در اختیار ما هست که به ما اجازه میده تسک ها رو بدون بلاک شدن ترد اصلی برنامه،به تاخیر بندازیم.تابع callback که ما به تابع setTimeout پاس دادیم، تابع () => { return &quotHey!&quot }رو به Web API اضافه میکنه.درضمن تابع setTimeout و تابع respond از پشته بیرون رفتن جفتشون مقدار هاشون برگشت داده شده!توی Web API یک تایمر تا وقتی اجرا میشود که اون زمان رو به عنوان پارامتر دوم به تابع پاس دادیم (اینجا 1000ml) هست. تابع callback بلافاصله به پشته اضافه نمیشه، در عوض به چیزی به اسم صف (Queue) اضافه میشه. این قسمت شاید یکم گیج کننده باشه، اما به این معنی نیست که تابع callback ما به callstack اضافه نمیشه ( پس مقدار رو برمیگردونه ) اما بعد 1000 میلی ثانیه ! پس بعد 1000ms خیلی ساده به صف اضافه میشه. اما این صف هست، تابع باید منتظر نوبت خودش بمونه!حالا این بخش، بخشی هست که منتظرش بودیم... زمانی که event loop تنها وظیفه اش رو باید انجام بده! وصل کردن صف به Callstack!اگر صف پشته (callstack) خالی باشه، پس تمام توابع که قبلا فراخوانی شده بودن مقدارشون رو برگردوندن و از پشته (stack) خارج شدن، اولین آیتم که توی صف هست اضافه میشه به CallStack.تو این حالت هیچ تابع دیگری فراخوان نمیشه، معنیش اینه که CallStack تا زمانی که تابع CallBack اولین آیتم صف بود خالی بود.تابع callback ما به callstack اضافه میشه, فراخوان میشه، و یک مقدار برگشت داده میشه، و خارج میشه از پشته (stack)بریم مثال زیر رو ببینیم، شاید خنده دار و آسون باشه اما فقط با تکرار و تمرین با این موضوع راحت تر خواهید بود.اگر کد زیر رو اجرا کردید سعی کنید حدس بزنید کنسول چه لاگی رو تو خروجی نمایش میدهconst foo = () => console.log(&quotFirst&quot); const bar = () => setTimeout(() => console.log(&quotSecond&quot), 500); const baz = () => console.log(&quotThird&quot); bar(); foo(); baz();فهمیدید؟ بیاید سریع بفهمیم وقتی این کد در مرورگر اجرا میشه چه اتفاقی رخ میده:تابع ()bar رو صدا میزنیم. bar یک فانکشن setTimeout برمیگردونه.تابع کال بک رو که به تابع setTimeout پاس دادیم، به Web API اضافه میشه، حالا تابع setTimeout و bar از CallStack بیرون میان.در همین حال که تایمر تو Web API درحال اجرا هست تابع foo فراخوان میشه و اول از همه تو کنسول اجرا میشه، بعدش تابع baz فراخوان میشه و در همین حال تابع callback ما به صف (Queue) اضافه میشه.خروجی دوم برای تابع baz هست که Third رو نمایش میده. اینجا event loop نگاه میکنه که CallStack بعد اجرای تابع baz که مقدارش برگشت خالی باشه. بعدش تابع CallBack ما که تو صف بود به CallStack ما اضافه میشه.آخر‌سر به عنوان خروجی سوم تو کنسول لاگ Second رو میبینیم.این مقاله ترجمه شد از مقاله های Lydia hallie هست. ازاین سایت هم برای درک بهتر این موضوع میتونید استفاده کنید.امیدوارم تونسته باشم تو درک این موضوع کمکی به دوستداران جاوااسکریپت کرده باشم. Hamidreza Hamidreza Thu, 03 Sep 2020 18:03:07 +0430