شرح مفهوم الـ Hoisting في جافا سكريبت

اقرأ في هذا المقال


في هذا المقالة، ستتعرف على الـ (Hoisting) في جافا سكريبت بمساعدة الأمثلة، حيث أن (Hoisting) في جافا سكريبت هو سلوك يمكن فيه استخدام دالة أو متغير قبل تعريف أي منهما.

ما هو الـ Hoisting في الجافا سكريبت

يشير (Hoisting) في جافا سكريبت إلى العملية التي يبدو من خلالها أن المترجم الفوري ينقل إعلان الوظائف أو المتغيرات أو الفئات إلى أعلى نطاقها، قبل تنفيذ الكود كالتالي:

// using test before declaring

console.log(test); // undefined

var test;

يعمل البرنامج أعلاه وسيكون الإخراج (undefined)، يتصرف البرنامج أعلاه كالتالي:

// using test before declaring

var test;

console.log(test); // undefined

كيفية استخدام Hoisting في جافا سكريبت

1. استخدام المتغيرات Variable hoisting

  • بسبب الارتباك الذي يمكن أن ينتج عن استخدام (var)، فمن الأفضل تجنب استخدام المتغيرات قبل الإعلان عنها، إذا كنت تكتب رمزًا في مشروع جديد، فيجب عليك استخدام (let و const) لفرض ذلك.
  • وإذا كنت تعمل في قاعدة بيانات قديمة أو كنت مضطرًا لاستخدام (var) لسبب آخر، فيجب كتابة تصريحات (var) أقرب ما يكون إلى الجزء العلوي من نطاقها قدر الإمكان، هذا سيجعل نطاق المتغيرات الخاصة بك أكثر وضوحًا.
  • يمكنك أيضًا التفكير في استخدام قاعدة (ESLint no-use-before-definition) والتي ستضمن عدم استخدامك لمتغير قبل إعلانه.

2. استخدام الوظيفة Function hoisting

  • يعد استخدام (Function hoisting) مفيدًا لأنه يمكننا إخفاء تنفيذ الوظيفة في مكان أبعد في الملف والسماح للقارئ بالتركيز على ما يفعله الكود، أي يمكننا فتح ملف ومعرفة ما يفعله الكود دون فهم كيفية تنفيذه أولاً، كالمثال التالي:

resetScore();

drawGameBoard();

populateGameBoard();

startGame();

function resetScore() {

console.log(“Resetting score”);

}

function drawGameBoard() {

console.log(“Drawing board”);

}

function populateGameBoard() {

console.log(“Populating board”);

}

function startGame() {

console.log(“Starting game”);

}

لاحظ أنه لدينا على الفور فكرة عما يفعله هذا الرمز دون الحاجة إلى قراءة جميع إعلانات الوظائف، ومع ذلك، فإن استخدام الوظائف قبل إعلانها هو مسألة تفضيل شخصي، يفضل بعض المطورين، تجنب ذلك ووضع الوظائف في وحدات يمكن استيرادها حسب الحاجة.

المصدر: JavaScript: The Good Parts, Douglas Crockford, 2008 edition.JavaScript: The Definitive Guide, David Flanagan, 2011 edition.PROFESSIONAL JAVASCRIPT: FOR WEB DEVELOPERS, Nicholas C. Zakas,2012 edition.JavaScript, Stephen Blumenthal, 2017 edition.


شارك المقالة: