با HOISTING در جاوا اسکریپت  آشنا شو

HOISTING IN JAVASCRIPTقبل از اینکه بریم سراغ توضیحات کامل به طور خلاصه تعریفش کنیم : در واقع HOISTING در جاوا اسکریپت به این موضوع اشاره داره که متغییر ها و فانکشن ها رو قبل از اینکه تعریف کنیم فراخوانی نکنیم . خب حالا اگر خواستی دقیق تر با این موضوع اشنا شی مقاله رو تا انتها همراهی کن راستی خوشحال میشم بهم سر بزنید ??اینستاگرام لینکدین WEBDESGINLEARN (WDL)عبارتی که خیلی شنیده شده و شاید بیشتر باعث شه که بگید چی هست اصلا و یه جورایی سر در گمی ایجاد کنهبا خودتون بگید اقا این HOISTING چی هست اصلا ؟می خوایم با هم بررسی کنیم ! یک خطای جاوا اسکریپت هست اما برای اینکه بیشتر با HOISTING اشنا شیم بیام اول ببنیم جاوا اسکریپت چطوری کدها رو اجرا می کنه و در نهایت به ما خروجی میدهاولین کاری که جاوا اسکریپت انجام میده متغییر ها و فانکشن ها رو دخیره می کنه . بعد از ذخیره کردن کد ها رو بررسی می کنه و خط به خط کد ها رو شروع می کنه به خوندن , جاوا اسکریپت یک زبان برنامه نویسی مفسری هستش به همین معنا که خط به خط کد ها رو می خونه و اگر خط کدی مشکلی داشته باشه همونجا متوقف میشه به ما با توجه به مشکل خطا میده3 تا کلمه کلیدی برای تعریف متغییر در جاوا اسکریپت داریم . let , const , var که کار ذخیره شدن داده ها رو برای ما انجام میدنمتغییر ها در جاوا اسکریپت که LET و CONST که در اکما اسکریپت ES6 اضافه شد . استفاده می کنیم.خب و اما Hoisting چیه !؟مهمه که با Hoisting اشنایی داشتیه باشیم چون ممکنه همین یک نکته کوچیک در جاوا اسکرپیت موجوب باگ شه . مخصوصا در پروژه های بزرگ .اشاره کردیم که متغیر ها و فانکشن ها قبل از اجرا در حافظه ذخیره می شند . که به این موضوع Hoisting می گیمتفاوت متغییر ها در ذخیره شدن :اگر var مقداری نداشته باشه بصورت undefined ذخیره میشه برای let , بصورت uninitializedبرای const هم بصورت uninitializedخب با این حساب زمانی که بخوایم var لاگ بگیریم بهمون undefinedنشون میده که باعث گمراه شدن میشهاما اگر همین کار رو با let , انجام بدیم به ما error زیر رو در console مرورگر به ما نشون میده.مثال let :HOISTING in javascriptمی بینید که در کنسول لاگ به ما referenceError نشون میده قبل اینکه ذخیره شده باشه داریم صداش می زنیم.اقا قبل از اینکه تعریف اش کنیم داریم صداش می زنیم .مثل این می مونه که پشت ماشین بدون سوخت بشینیم بعد همینجور پا رو بزاریم رو پدال گازبرای var هم همینه منتها یه تفاوت داره :داخل کنسول به ما Undefined رو نشون میده که خودش ممکنه کمی گمراه کننده شه در پروژه های بزرگHOISTING in javascript دیگه خبری از referenceError نیست فقط یدونه undefined به ما بر می گردونهخب این موضوع تو پروژه های بزرگ که کلی دیتا داریم ممکنه مشکل ساز شه و یکی از دلیل های کهاز let و const استفاده می کنیم همین موضوع هست .برای const هم مثل let عمل می کنه و before initialization داریم : خوب بریم سراغ Temporal dead zone :متغییر ها در یک محلی قرار گرفتند و منتظر هستند یک مقداری براشون تعریف شهکه این محل قرار گیری رو Temporal dead zone نام گذاری کردندبه زبان ساده Hosting یعنی اینکه اول متغییر رو تعریف کن بعد صداش بزن در غیر اینصورت با خطا رو به رو میشیم . که در مثال های بالا با هم دیگه بررسی شون کردیم در فانکشن ها Hosting داریم :3 روش معمول تعریف فانشکن داریم یک نوع فانکشن ifff هم داریم که دیگه زیاد ازش استفاده نمیشهDeclarationExpressionArrow Functionدر Declartion Function :این نوع فانکشن رو هر جا صدا بزنیم مشکلی پیدا نمی کنه و کار می کنهاما پیشنهاد میشه که همیشه اول تعریف اش کنیم بعد صداش بزنیم که کد تمیز تر و خوانا تری داشته باشیم .در Arrow Function : اما قضیه در arrow function متفاوت میشه زمانی که ما یک arrow function تعریف می کنیم دیگه همه جا به اون دسترسی نداریم .اگر arrow function رو قبل از تعریف صدا بزنیم با ارور مواجه میشیم .Hosting arrow function in javascriptHosting arrow function in javascriptدر Expression Function :از اونجای که همراه با یک varibel تعریف می شند خب طبیعی هست که قبل از تعریف نمی تونیم بهشون دسترسی داشته باشیم مثل arrowfunction ها با خطا مواجه می شیمExpression Functionالبته این نوع فانکشن ها رو می تونیم به صورت arrowfunction هم تعریف کنیمExpression Function خلاصه : فانکشن ها و متغیرها قبل از فراخوانی کد ، در حافظه قرار می گیرند که بهش Hoisting میگند.این موضوع به ما کمک می کنه به درک بیشتر جاوا اسکریپت و در پروژه های بزرگ باعث میشه کمتر به مشکل بخوریم . راستی خوشحال میشم بهم سر بزنید ??اینستاگرام لینکدین