Hoisting در جاوااسکریپت

Hoisting در جاوااسکریپت

سلام دوستان عزیز ☺️
امروز موضوع خاصی داریم که می‌خوام باهاتون در میون بذارم، و شرط می‌بندم که بعضی‌هاتون با دیدنش کمی شگفت‌زده می‌شین! پس خیلی دقت کنید و ببینید می‌تونید پیش‌بینی کنید خروجی این کد چیه:

console.log(myVar);
var myVar = 'Hello, JavaScript!';

حدس بزنید، خروجی چیه؟

برخی از دوستان ممکنه بگن خطا می‌ده، ولی نه، جواب اینجا کمی فرق می‌کنه.

بعد از اینکه جواب رو دادید، بیایید ببینیم واقعاً چرا این اتفاق می‌افته.

پاسخ به مثال:

اگر گفتید ‘undefined’، دقیقاً درسته! حالا شاید بپرسید چرا؟

برای اینکه در جاوااسکریپت یه پدیده‌ای به اسم “Hoisting” وجود داره. بذارید کمی بیشتر بهش بپردازیم.

بخش ۱: معرفی Hoisting

بالا بردن یا Hoisting به ما می‌گه که تعریف متغیرها و توابع توسط جاوااسکریپت در پس‌زمینه، قبل از اجرای کد به طور کامل انجام می‌شه. یعنی جاوااسکریپت قبل از اجرای کد، متغیرها و توابع رو ‘بالا می‌کشه’. اما توجه داشته باشید که تنها تعریف متغیرها بالا کشیده می‌شود، نه مقادیر آن‌ها.

دلیل اینکار چی هست ؟

جاوااسکریپت Hoisting رو انجام می‌ده چون این زبان کدها رو در دو مرحله اجرا می‌کنه. اول میاد همه‌ی تعریف‌ها، یعنی متغیرها و توابع رو شناسایی می‌کنه و می‌بره بالای کد، بعد شروع می‌کنه به اجرای کدها. این کار باعث می‌شه بتونی از متغیرها و توابع استفاده کنی حتی قبل از اینکه توی کد تعریفشون کرده باشی. به این ترتیب، نوشتن کد راحت‌تر و انعطاف‌پذیرتر می‌شه.

بخش ۲: Hoisting و متغیرها

بیایید با یک مثال ساده شروع کنیم:

console.log(score); // چی چاپ می‌شه اینجا؟
var score = ۹۵;

اگر این کد را اجرا کنیم، undefined چاپ می‌شه. این اتفاق می‌افته چون جاوااسکریپت متغیر score را قبل از اجرای کد، ‘می‌بینه’ اما هنوز مقداردهی نشده. حالا، این رفتار با let و const فرق می‌کنه:

console.log(age); // خطا میده!
let age = ۳۰;

اینجا با خطا مواجه می‌شیم چون let و const مقداری به نام ‘Temporal Dead Zone’ دارن، یعنی تا زمانی که مقداردهی نشن، نمی‌تونیم ازشون استفاده کنیم.

بخش ۳: Hoisting و توابع

حالا برای توابع یک مثال بزنیم:

sayHello(); // 'سلام، چطوری؟' چاپ می‌شه

function sayHello() {
  console.log('سلام، چطوری؟');
}

// ولی اگه از تابع فلشی استفاده کنیم:

sayHi(); // خطا میده!
const sayHi = () => {
  console.log('سلام، خوبی؟');
}

این مثال نشان می‌دهد که توابع سنتی کاملاً hoist می‌شوند، اما توابع فلشی که با const تعریف شده‌اند، همانند متغیرهای const رفتار می‌کنند و قبل از تعریف نمی‌توان از آن‌ها استفاده کرد.

جمع‌بندی:

بالا بردن یا Hoisting یکی از این مفاهیمیه که واقعاً می‌تونه درک شما از جاوااسکریپت رو عمیق‌تر کنه. امیدوارم این ویدئو به شما کمک کرده باشه که چطور جاوااسکریپت کد شما رو ‘می‌بینه’ و تجزیه می‌کنه.

اگر این آموزش برات مفید بوده

حتماً کامنت بذار . منتظر ویدیوهای بعدی هم باش

خداحافظ و تا دیداری دیگر!