٢٥ مارس ٢٠٢١

إفادة «var» القديمة

هذه المقالة من أجل فهم النصوص القديمة

المعلومات داخل هذه المقالة تساعدنا فى فهم النصوص القديمة أكثر ولا تحتوي علي أي معلومات عن كيفية كتابة كود جديد

ذكرنا في أوائل الفصول حين تكلمنا عن المتغيرات, ذكرنا ثلاث طرائق للتصريح عنها:

  1. let
  2. const
  3. var

تصرّف كلا الإفادتين ‎let‎ و‎const‎ بذات الطريقة (بالمقايسة مع البيئات المُعجمية).

بينما ‎var‎ فهو وحش آخر مختلف جذريًا ويعود في أصله إلى قرون سحيقة. لا نستعمله عادةً في السكربتات الحديثة ولكنّك ستجده حتمًا خلف إحدى صخور السكربتات القديمة.

لو لم ترغب بالتعرّف على هذه السكربتات فيمكنك تخطّي هذا الفصل أو تأجيله لوقت لاحق. ولكن لا تنسَ احتمالية ندمك لاحقًا فيغدر بك هذا الوحش.

من أول وهلة نرى بأنّ تصرّف ‎var‎ يشابه تصرّف ‎let‎، أي أنّه يُصرّح (مثل الثاني) عن متغير:

function sayHi() {
  var phrase = "Hello"; // ‫متغير محلي، استعملنا «var» بدل «let»

  alert(phrase); // Hello
}
=======
The `var` declaration is similar to `let`. Most of the time we can replace `let` by `var` or vice-versa and expect things to work:

```js run
var message = "Hi";
alert(message); // Hi

But internally var is a very different beast, that originates from very old times. It’s generally not used in modern scripts, but still lurks in the old ones.

alert(phrase); // ‫خطأ، phrase غير معرّف

ولكن... ما خفي كان أعظم. إليك الفروق.
=======
If you don't plan on meeting such scripts you may even skip this chapter or postpone it.

On the other hand, it's important to understand differences when migrating old scripts from `var` to `let`, to avoid odd errors.

## "var" has no block scope

Variables, declared with `var`, are either function-scoped or global-scoped. They are visible through blocks.


```js run
if (true) {
  var test = true; // ‫نستعمل «var» بدل «let»
}

alert(test); // ‫الناتج true، أي أنّ المتغير «حيّ يُرزق» بعد إفادة if

تجاهل ‎var‎ كتل الشيفرة، وبهذا صار متغير ‎test‎ عموميًا.

لو استعملنا ‎let test‎ بدل ‎var test‎ فسيكون المتغير ظاهرًا لباقي الشيفرة داخل إفادة ‎if‎ فقط لا غير:

if (true) {
  let test = true; // ‫نستعمل «let»
}

alert(test); // ReferenceError: test is not defined
يسري الأمر ذاته على الحلقات فلا يمكن أن يكون `‎var‎` محليًا حسب الكتلة أو حسب الحلقة:

```js
for (var i = 0; i < 10; i++) {
  var one = 1;
  // ...
}

alert(i);   // 10, "i" is visible after loop, it's a global variable
alert(one); // 1, "one" is visible after loop, it's a global variable

لو كتبت كتلة شيفرة في دالة فسيصير ‎var‎ متغيرًا على مستوى الدالة كاملةً.

function sayHi() {
  if (true) {
    var phrase = 'Hello';
  }

  alert(phrase); // يمكننا فعل هذا
}

sayHi();
alert(phrase); // ReferenceError: phrase is not defined

As we can see, var pierces through if, for or other code blocks. That’s because a long time ago in JavaScript, blocks had no Lexical Environments, and var is a remnant of that.

تُعالج التصريحات باستعمال ‎var‎ عند بدء الدالة

ُعالج التصريحات باستعمال ‎var‎ متى ما بدأت الدالة (أو بدأ السكربت، للمتغيرات العمومية).

“var” tolerates redeclarations

If we declare the same variable with let twice in the same scope, that’s an error:

let user;
let user; // SyntaxError: 'user' has already been declared

With var, we can redeclare a variable any number of times. If we use var with an already-declared variable, it’s just ignored:

var user = 'Pete';

var user = 'John'; // this "var" does nothing (already declared)
// ...it doesn't trigger an error

alert(user); // John

“var” variables can be declared below their use

أي أنّ متغيرات ‎var‎ تُعرّف من بداية الدالة مهما كان مكان تعريفها (هذا لو لم يكن التعريف في دالة متداخلة أخرى).

يعني ذلك أنّ هذه الشيفرة:

function sayHi() {
  phrase = 'Hello';

  alert(phrase);

  var phrase;
}
sayHi();

متطابقة تقنيًا مع هذه (بتحريك ‎var phrase‎ إلى أعلى):

function sayHi() {
  var phrase;

  phrase = 'Hello';

  alert(phrase);
}
sayHi();

أو حتى هذه (لا تنسَ بأنّ كُتل الشيفرات مُهملة):

function sayHi() {
  phrase = 'Hello'; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

يدعو الناس هذا السلوك بسلوك «الطفو» hoisting (أو الرفع) إذ أنّ متغيرات ‎var‎ «تطفو» إلى أعلى الدالة (أو ترتفع إلى أعلاها).

أي أنّه في المثال أعلاه، الفرع ‎if (false)‎ من الإفادة لا يعمل قط ولكن هذا ليس بمهم، إذ أنّ ‎var‎ داخله سيُعالج في بداية الدالة، وحين تصل عملية التنفيذ إلى ‎(*)‎ سيكون المتغير موجودًا لا محالة.

التصريحات تطفو صحيح، ولكنّ ليس عبارات الإسناد.

الأفضل لو نمثّل ذلك في هذا المثال:

function sayHi() {
  alert(phrase);

  var phrase = 'Hello';
}

sayHi();

في السطر ‎var phrase = "Hello"‎ إجراءان اثنان:

  1. التصريح عن المتغير باستعمال var
  2. إسناد قيمة للمتغير باستعمال ‎=‎