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